At Google I/O last week, Google launched Polymer, a new library to build web applications using Web Components, the new HTML5 standard to build reusable components for the web. Polymer provides polyfills for many of the Web Components technologies, enabling developers to create their own reusable components before all browser support them. In addition, Polymer comes with a range of example widgets, include a weather widget, a clock, stock ticker and line chart.
Web Components enable developers to create custom and reusable HTML tags. As an example, here's the skeleton of a web component for a <my-own-tag> tag:
<element name="my-own-tag">
<template>
HTML elements here
</template>
<script>
// JavaScript implementing logic
</script>
</element>
Whereas many web frameworks expose JavaScript APIs to build user interfaces, which under the hood generate a bunch of divs and spans to implement the control, Web Components are a browser-native solution and therefore do not rely on a comprehensive framework. Therefore, Web Components can hopefully reduce fragmentation compared to the HTML components available today, which typically rely on a particular JavaScript framework.
While Web Components are an interesting new technology, until browsers support them, and the majority of your audience use those browsers, many of these features have to remain unused. A way around this problem are polyfills. A polyfill is code that implements technology that is expected to be implemented natively by the browser, eventually. If a browser implements the technology already, the polyfill does nothing. If not, it emulates the behavior, thereby flattening the API landscape. For instance, the webshims library implements various HTML5 features including canvas, HTML5 forms, HTML5 media elements and Geolocation in browsers that do not yet support them.
Polymer has polyfills for many of the web technologies required to successfully implement applications with Web Components, including:
- HTML imports: a way to include and reuse HTML documents inside of other HTML documents.
- Custom Elements: enables developers to define and use custom DOM elements.
- Shadow DOM: provides encapsulation in the DOM.
- Model Driven Views: provides AngularJS-like data binding.
- Web Animations: APIs to implement complex animations.
- Pointer Events: unifies events for mouse, touch and pen.
These polyfills can be used separately, without the need to use the rest of Polymer. However, in addition, Polymer provides:
- polymer.js: The core Polymer runtime, making it easier to create custom attributes and events
- A set of reusable visual and non-visual elements.
Polymer is not the first project to attempt polyfilling parts of the Web Component-related standards. Previously, Mozilla launched X-Tag, a polyfill for the Custom Elements standard. And the Web UI package for Dart implements the custom elements and Model Driven View technologies for applications written using Google's Dart language.
The Google I/O talk on Polymer can be watched on YouTube. To learn more about Web Components in general, the Web Components talk on Google I/O provides more background. Getting started tutorials and other documentation can be found on the Polymer website.
