The future of the web platform, a tag-based approach?
Everyone is talking about them and in fact they are called to be the future of the web platform — »Web Components«. In this post I want to write down the current state of (Web) Components, mainly for my own reference, and also put some thoughts into this topic. I will not go into much technical implementation detail.
What are Web Components?
As there is so much buzz around (Web) Components these days, I think it’s important to clarify what »Web Components« actually are. »Web Components« is an umbrella term for an emerging group of specifications that describe new API primitives in the browser. It has been around for like one and a half years. Right now it consists of:
- Templates, which define chunks of markup that are inert but can be activated for use later.
- Decorators, which apply templates based on CSS selectors to affect rich visual and behavioral changes to documents.
- Custom Elements, which let authors define their own elements, with new tag names and new script interfaces.
- Shadow DOM, which encapsulates a DOM subtree for more reliable composition of user interface elements.
- Imports, which defines how templates, decorators and custom elements are packaged and loaded as a resource.
There is a detailed introduction over at the W3C Working Draft. Quite contrary to other W3C documents, this intro is actually quite a nice read. It describes the particular technologies well, in reasonable language. Having said that, I hope we won’t make »Web Components« the next HTML5 in terms of creating buzzwords that many people are wrong about.
Right now we mainly have two "UI frameworks" that embrace »Web Components« as the specification describes them. The approach of both is tag-based which means a UI component basically is implemented via a tag or custom element.
While still in pre-alpha Polymer is fast evolving, growing and quite popular. It offers polyfills for Shadow DOM, Custom Elements and HTML Imports. Platform technologies also include polyfills for the specifications of Pointer Events and Web Animations.
Compared to Polymer, X-Tag makes a more lightweight impression. It basically implements the Custom Elements portion of Web Components. Therefor it currently make use of Polymer’s polyfills.
Wait, a tag-based approach?
How unobtrusive is a tag-based approach of writing true UI components?
Alternative approaches not necessarily related to Web Components
- Component — Its great focus on building decoupled components makes it worth mentioning here. The philosophy behind it totally makes sense. You should definitely check it out!
- W3C Introduction to Web Components
- Implementation Status — Are we componentized yet?
- Web Components Best Practices — Google Doc.
- Web Components Resources — Gist by @ebidel.
- Polymer and front-end tooling — Interesting video by @addyosmani.
(Web) Component Registries and Samples
- Polymer Elements — Collection of Polymer Elements.
- customelements.io — General registry, currently refers to UI components built with either X-Tags or Polymer.
- X-Tag Registry
- Brick — Bundle of re-usable UI components built with X-Tags.