Tag Archives: Webstandards


Introduction to Web Components (Part 1: Polymer)

In this first blog of a serie of two, I’ll be talking about Web Components: what they are and why they are useful. I’ll also be talking about useful libraries that can help you with developing Web Components.

What are Web Components?

Web Components consist of several technologies. You can think of Web Components as reusable user interface widgets that are created using open Web technology. Web Components are gradually being implemented in the browser, and when fully supported (Chrome natively supports the full specification). They do not need any external javascript libraries like jQuery or Dojo. An existing Web Component can be used without writing code, simply by adding an import statement to an HTML page. Web Components use standard browser capabilities that are new or under-development.

Web Components are a set of standards being developed by Google as a W3C specification.

The standard consists out of 4 main elements:

Although all four elements can be used separately, its true nature really shows when used together.

To put the above in context, you can see a Web Component as a library of code, like you would have a JAR file in Java, which you can import (more or less in a similar way as you would import a package in Java).

The old way of sharing components

Before Web Components was introduced as a standard, sharing a piece of HTML was a matter of copy-pasting a bunch of HTML into your own HTML document, together with some Javascript that you often needed to include separately. You don’t always (unless you spend some time) know what the code that you copied does, so often you just hope it works.

The new way of sharing components

When Web Components were added as part of the W3C specification, we finally gained a way to create reusable components that could be easily shared. So how does this all differ from the “old” way?

Like you would do in Java, you download a library, include it into your project, import the correct package and consume its methods, where-as in the old way, you would copy-paste the body of the methods you wanted to use rather than just calling them. Although not completely the same, Web Components share the same idea, but now for the web. So if we would describe the flow of including a slideshow component into your HTML based application, it would look like:

  1. Download component
  2. Include in html page (<link rel=”import” href=”mycomponents/slideshow.html”>)
  3. Add tag to body of your html page (<slideshow></slideshow>)
  4. Load page and enjoy

Browser support

As mentioned in the introduction to Web Components, not all browsers fully implement the Web Components W3C specification. It’s a common use-case to support multiple browsers with different kind of support. Luckily, people have come with a solution.

Polyfill to the rescue

To close the gap in browser support, specific helper libraries called polyfills were created. A polyfill makes it possible for developers to use new standards today across all modern browsers. Some older browser versions are also (partly) supported when using polyfills. One of the more notable polyfill libraries in context of Web Components is webcomponents.js. This is a suite of polyfills built on top of the web components spec. It implements missing features as a javascript api, so that browsers not implementing (a part of) the spec, can still use that functionality (here’s a little more information about Web Components polyfills). Note that currently, Google Chrome is the only browser that natively supports all aspects of Web Components W3C specification.

Polymer as a library to help create Web Components

Layers of PolymerWhen searching for information about Web Components, there is a good chance you will end up at Polymer is a library to help you build reusable Web Components and tie them together to make fully functioning web applications (much like Angular for instance). It adds features such as templating, two-way data binding and property observation. Overall Polymer is a good choice in conjunction with webcomponents.js as polyfill to create Web Components that work across many different browsers and versions.

Polymer elements

Luckily, when using Polymer as your library to build Web Components, you don’t have to start from scratch. The team behind Polymer also provides an extensive library of pre-made Web Components. These vary from visual components, called paper-elements, such as buttons, icons, toolbars, etc. To non visual components, called iron-elements, such as ajax and local storage. There are currently too many to mention them all, but here you can find more information about the provided elements.

Next time

That’s it for part one of this two parts blog series. Next time will be more technical with code samples and the relation between QAFE and Web Components.


Blog by: Joey Roosing