BT

Use Web Components Today With Google's Polymer

by Zef Hemel on May 23, 2013 |

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:

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.

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Maybe there is a better way ! by Mel Heravi

Look at generic.melify.com and see me components for a change.
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

Http://Sandbox.Melify.com

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

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

1 Discuss

Educational Content

General Feedback
Bugs
Advertising
Editorial
InfoQ.com and all content copyright © 2006-2014 C4Media Inc. InfoQ.com hosted at Contegix, the best ISP we've ever worked with.
Privacy policy
BT