BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News Use Web Components Today With Google's Polymer

Use Web Components Today With Google's Polymer

This item in japanese

Lire ce contenu en français

Bookmarks

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.

Rate this Article

Adoption
Style

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.

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

Community comments

  • Maybe there is a better way !

    by Mel Heravi,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    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

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

BT