Use Web Components Today With Google's Polymer
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:
HTML elements here
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.
Maybe there is a better way !
I have been at it for over 12 years. All reusable and no jumbo jumbo for the end user.
All internals of components are hidden
Internet is where assembly was 40 years ago and it's time to move on duded.
I can create a component in 20 min live and have videos to prove it.
Including google gadgets in 20 min.
Interested? Drop me a line. Disgusted? Hit the delete button
Mike Hartington Jul 26, 2015