HTML5 Rocks

HTML5 Rocks

Yo Polymer – A Whirlwind Tour Of Web Component Tooling

By Addy Osmani at

Web Components are going to change everything you think you know about building for the web. For the first time, the web will have low level APIs allowing us to not only create our own HTML tags but also encapsulate logic and CSS. No more global stylesheet soup or boilerplate code! It’s a brave new world where everything is an element.

In my talk from DotJS, I walk through what Web Components have to offer and how to build them using modern tooling. I’ll show you Yeoman, a workflow of tools to streamline creating web-apps using Polymer, a library of polyfills and sugar for developing apps using Web Components in modern browsers today.

Create custom elements & install elements created by others

In this talk you will learn:

  • About the four different specs composing Web Components: Custom Elements, Templates, Shadow DOM and HTML imports.
  • How to define your own custom elements and install elements created by others using Bower
  • Spend less time writing JavaScript and more time constructing pages
  • Use modern front-end tooling (Yeoman) to scaffold an application using Polymer with generator-polymer
  • How Polymer super changes creating web components.

For example, to install Polymer's Web Component polyfills and the library itself, you can run this one liner:

bower install --save Polymer/platform Polymer/polymer

This adds a bower_components folder and adds the above packages. --save adds them to your app's bower.json file.

Later, if you wanted to install Polymer's accordion element you could run:

bower install --save Polymer/polymer-ui-accordion

and then import it into your application:

<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">

To save time, scaffolding out a new Polymer app with all the dependencies you need, boilerplate code and tooling for optimizing your app can be done with Yeoman with this other one liner:

yo polymer

Bonus walkthrough

I also recorded a 30 minute bonus walkthrough of the Polymer Jukebox app I show in the talk.

Covered in the bonus video:

  • What the “everything is an element” mantra means
  • How to use Bower to install Polymer’s Platform polyfills and elements
  • Scaffolding our Jukebox app with the Yeoman generator and sub-generators
  • Understanding the platform features scaffolded out via boilerplate
  • How I functionally ported over an Angular app over to Polymer.

We also make use of Yeoman sub-generators for scaffolding our new Polymer elements. e.g to create the boilerplate for an element foo we run:

yo polymer:element foo

which will prompt us for whether we would like the element automatically imported, whether a constructor is required and for a few other preferences.

The latest sources for the app shown in both talks are now up on GitHub. I’ve refactored it a little further to be more organized and a little more easy to read.

Preview of the app:

Further reading

In summary, Polymer is a JavaScript library that enables Web Components now in modern web browsers as we wait for them to be implemented natively. Modern tooling can help improve your workflow using them and you might enjoy trying out Yeoman and Bower when developing your own tags.

A few other articles that are worth checking out on the subject:

Chrome Dev Summit: Polymer declarative, encapsulated, reusable components

By Eric Bidelman at

Polymer is one gateway into the amazing future of Web Components. We want to make it easy to consume and build custom elements. For the past year, the team has been working hard on a set of polyfills for the evolving specifications. On top of that, we've created a convenient sugaring library to make building web components easier. Lastly, we're crafting a set of UI and utility elements to reuse in your apps. At the 2013 Chrome Dev Summit, I dove into the different parts of Polymer and the philosophy behind our "Everything is an element" mantra.

Slides: http://html5-demos.appspot.com/static/cds2013/index.html

"Everything is an element" (from <select> to custom elements)

Slides: http://html5-demos.appspot.com/static/cds2013/index.html#6

Building web pages in the 90s was limiting, but powerful. We only had a few elements at our disposal. The powerful part?...everything was declarative. It was remarkably simple to create a page, add form controls, and create an "app" without writing gobs of JavaScript.

Take the humble <select> element. There is a ton of functionality built into the element, simply by declaring it:

  • Customizable through HTML attributes
  • Renders children (e.g. <option>) with a default UI, but configurable via attributes.
  • Useful in other contexts like <form>
  • Has a DOM API: properties and methods
  • Fires events when interesting things happen

Web Components provide the tools to get back to this heyday of web development. One where we can create new elements, reminiscent of <select>, but designed for the use cases of 2014. For example, if AJAX was invented today it would probably be an HTML tag (example):

<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/" 
               params='{"alt":"json"}'></polymer-ajax>

Or responsive elements that data-bind to a queryMatches attribute:

<polymer-media-query query="max-width:640px" queryMatches="{{isPhone}}"></…

This is exactly the approach we're taking in Polymer. Instead of building monolithic JavaScript-based web apps, let's create reusable elements. Over time, an entire app grows out of composing smaller elements together. Heck, and entire app could be an element:

<my-app></my-app>

Building web components with Polymer's special sauce

Slides: http://html5-demos.appspot.com/static/cds2013/index.html#37

Polymer contains a number of conveniences for building web component based applications:

  • Declarative element registration: <polymer-element>
  • Declarative inheritance: <polymer-element extends="...">
  • Declarative two-way data-binding: <input id="input" value="{{foo}}">
  • Declarative event handlers: <button on-click="{{handleClick}}">
  • Published properties: xFoo.bar = 5 <-> <x-foo bar="5">
  • Property observeration: barChanged: function() {...}
  • PointerEvents / PointerGestures by default

Moral of the story is that writing Polymer elements is all about being declarative. The less code you have to write, the better ;)

Web Components: the future of web development

Slides: http://html5-demos.appspot.com/static/cds2013/index.html#26

I would be remissed if I didn't give a shout out to the standards behind Web Components. After all, Polymer is based on these evolving foundational APIs.

We're on the cusp of a very exciting time in web development. Unlike other new features being added to the web platform, the APIs that make up Web Components are not shiny or user-facing. They're purely for developer productivity. Each of the four main APIs is useful by itself, but together magical things happen!

  1. Shadow DOM - style and DOM encapsulation
  2. Custom Elements - define new HTML elements. Give them an API with properties and methods.
  3. HTML Imports is the distribution model for a package of CSS, JS, and HTML.
  4. Templates - proper DOM templating for defining inert chunks of markup to be stamped out later

If you want to learn more about the fundamentals of the APIs, check out ebidel.github.com/webcomponents.