Web Components 101
We’ve always had the concept of components on the web. Historically they’ve taken a number of different shapes and sizes. Vendors have attempted to create component models in the past with the likes of Flash, Silverlight, Java applets, and any number of vendor specific plugins for server side frameworks such as ASP.NET Web Forms. These previous approaches to component based web development have met with varying degrees of success. In a lot of ways systems like Flash made it very easy to create sandboxed plugins that could be created once and dropped into any number of sites. There were however a number of problems with these plugin based systems:
- The plugins ran within a particular sandbox (Flash/Silverlight) etc. This meant that users needed to have this particular sandbox installed on their PC In order to actually run the plugin, and needed to deal with software updates etc.
- They were developed using a number of vendor specific toolkits, meaning that there was no standard way of developing components across these different frameworks.
The latest generation of this idea of web components comes in the form of four new standard web specifications:
- Custom Elements: A way of creating new user defined DOM elements that the browser knows how to render natively.
- HTML Imports: Standard method for including and reusing additional external HTML resources as a part of an HTML document.
- Templates: This is a new element that allows a block of HTML to be declared which can then be cloned by script and inserted into an HTML document. In the past this has been done by using the script element with a type of text/template.
- Shadow DOM: The Shadow DOM is a way of separating the contents of a document from the presentation. For example, this is how browser vendors implement such features as the date input type. From a DOM perspective the only thing presented is the input element, but behind the scenes behaviour is added using the Shadow DOM.
These standards come together to create a new method for building web components that all browsers will (eventually) understand natively. This solves both of the problems highlighted above. Any of these features can be used independently of one another, and some modern Single Page Application frameworks are starting to do just this.
While these four standards provide the building blocks for web components, implementing them with these parts from scratch requires a lot of boilerplate code, and is generally not recommended. As a result of this, a number of projects have spun up in order to improve and streamline the development process:
- Polymer JS: The most popular framework for building web components at this point in time is PolymerJS. Polymer has a nice declarative syntax for building components, and provides many features out of the box such as data-binding and easy component life-cycle callbacks
- X-Tag: A small light weight framework for creating web components that was originally developed by Firefox but has since been taken over by Microsoft. While the footprint is low for the actual framework itself, the additional boilerplate that goes into building a component with X-Tag makes it somewhat less appealing.
Modern JavaScript Single Page Application frameworks are being built with web components in mind, this means that going forward, we should be able to use our tool of choice (such as Aurelia, Angular2, React etc) to build the components, then export them as standard chunks of functionality to be dropped into websites via a simple import statement.
Another interesting resource in this space is the Polymer Web Component Catalogue which provides a kind of app store that allows web components to be easily discovered, and installed via a package manager such as Bower.
In Summary
Web components are made up of a set of four web standards. These standards can be utilised together using frameworks such as Polymer JS to build standard widgets that can be dropped into any site. This is going to be a really interesting way of delivering and sharing all sorts of functionality going forward.
Originally published at sean-hunter.io on May 15, 2016.
