News

WEB COMPONENTS: 4 tools and resources you will need to build future HTML

A collection of must-know tools and resources to help establish a new coding approach to HTML

PolymerProject

A collection of must-know tools and resources to help establish a new coding approach to HTML

PolymerProject

POLYMER
polymer-project.org

The Polymer project was started by Google’s development team and makes the Web Components landscape much easier to move to. Any polyfills required to support Web Components across browsers is immediately available.

On top of that Polymer ships with two element collections of prebuilt elements ready for production use – Core and Paper. The Core elements encompass many useful, single purpose components for core functionality. These work with layouts, inputs, data handling and general application structure components. The Paper collection covers much more UI-focused elements that are highly visual and interactive, and incorporates controls, interactions and UI transitions.

There are a wide range of demos within the Polymer project that can help you get up to speed with using and building Web Components. There are tutorials demonstrating key aspects of web component builds and the actual API documentation is excellent. The Polymer project team have even produced a Designer tool for quickly prototyping apps using Polymer and the ability to save experiments within GitHub (polymer-designer.appspot.com).

Polymer is built based on the (still-in-progress) W3C specifications for Web Components, with the view that when browsers have adopted full support the transition from the polyfills to native support will be smooth. All Polymer code is available on GitHub (github.com/polymer), and benefits from ongoing open source development. Any bugs can be reported directly and visibility of upcoming releases is readily available.


BOSONIC
bosonic.github.io

Bosonic is a good alternative to Polymer, it provides similar polyfills and the tools required to build Web Components across even older browsers (including IE9). The syntax for the element creation matches the current W3C specifications exactly and working with it is very similar to working with Polymer.

There are a range of elements available for production. This is all available on GitHub github.com/bosonic/bosonic and open to community contributions. The getting started guide and documentation is structured in a step by step, making it great for learning about Web Components.

If you want to get involved in developing and contributing to a Web Components framework, Bosonic is a good choice. It is well structured and open but without the scale of contributors as Polymer (at present).


X-TAGS
x-tags.org

X-Tag is the offering from the Mozilla team, and is a small library providing the ability to build, extend and manage your Web Components. This is built from the same W3C polyfills that are provided by the Polymer project with extensions to offer IE9 support.

This library uses JavaScript to register new elements and this script references any HTML Template elements that are to be used, opposed to the Polymer approach of the <script> being integrated into a <polymer-element> alongside the HTML Template.

One of the most comprehensive examples of use is Mozilla’s Brick (mozbrick.github.io), a collection of ten UI components that can be reused in production for building interactive UIs. It is actually available as a Bower installation and is a really quick way to start using these components in your project. This library could rapidly evolve, but at present it doesn’t have the uptake that Polymer has.


WEBCOMPONENTS.ORG
webcomponents.org

This resource site brings together the best practices, updates and developments of everything Web Components related. It provides a wealth of useful content, from presentations and podcasts given by web component framework developers to the current state of native browser support.

The explanations around the base polyfills (used by all libraries) can give good insight into the work that has already gone into enabling us to work with Web Components today. There are also key links to galleries, libraries and the web component development community, many of which are instrumental in the development of the tools we have already mentioned.

One of the best things to take a look at on this site are the presentations, they are often an opportunity to see how other developers are using Web Components or what they are trying to achieve. This is a great place to keep coming back to and will help you to keep up to date in the Web Components landscape. The core vision of this site is to provide a reference point for everyone in the open development community, ensuring that Web Components best practices are defined and followed, making life easier for all of us.

×