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 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
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:
- Download component
- Include in html page (
<link rel=”import” href=”mycomponents/slideshow.html”>)
- Add tag to body of your html page (
- Load page and enjoy
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
Polymer as a library to help create Web Components
When searching for information about Web Components, there is a good chance you will end up at polymer-project.org. 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.
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.
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