Polymer

At their IO 2013 conference, Google officially launched Polymer, a new library for front-end development. It might seem odd that Google are launching another library, after all, they already have Angular, GWT, Dart Web UI and Closure, why create yet another one?

However, Polymer is a bit of a different proposition that those libraries, and others like jQuery, Dojo, Knockout and Ember. Rather than creating a new API from scratch, Polymer is a collection of polyfills that attempt to implement upcoming standards, particularly those that come under the banner of Web Components. I’ve been following web components for quite a while, as it’s a technology I’m very excited about. I even created a Github project, Are We Componentized Yet? to track the gradual implementation within Chrome/Webkit. As excited as I was, the pace of their implementation within Chrome made me worry it would be a long time before they were available to use, particularly across browsers.

Google appears to have had similar concerns, and Polymer is their response. By polyfilling the necessary features, it means Web Components can be used now in modern browsers. This will help to flush out design problems with the specs, and build a groundswell of developer support that will hopefully encourage the other browsers to implement the specs.

The idea is, while other libraries grow larger and larger, Polymer should actually shrink over time, as browsers implement features that are currently polyfilled. Eventually, they will be available everywhere, and they will simply be the web platform, not a library anymore. It’s a cool idea, and I’m very hopeful it will come to fruition.

Right now, Polymer is some way off being production ready. Compared to the other library I’ve been using a lot lately, Angular, it lacks a few features, and isn’t particularly well documented. I certainly won’t be using it for any “real” projects just now, but it’s stable enough to start experimenting with.

My First Polymer Component: Fake Latin

To that end, I have created my very first web component, using the Polymer Library, called Fake Latin. It’s a custom element that generates latin placeholder text, like the “Lorem ipsum…” you often see in mock-ups and prototypes. You can download it and get full instructions on its GitHub page, but the basic idea is that, one you’ve imported the component, you simply drop a <fake-latin> tag anywhere in your HTML, and when you view the page it will insert a random latin sentence.

[code lang=”html”]

<fake-latin></fake-latin>

[/code]

It can do more that just insert sentences. You can configure it using a “type” attribute to output paragraphs, lists, even entire structured articles. Check the docs for more info.

Although Polymer is still a little rough around the edges, creating Fake Latin really was a joy, similarly to the first time I used Knockout or Angular. It just feels right, like the library/platform is working with you, rather than against you, which was what the web platform felt like for a long time. If this is the future of web development, it’s a good one.

Unfortunately, the path to native Web Components nirvana is by no means certain. The specs are still far from finalised, and the size and complexity of the features involved means it will be a long time before they are fully implemented across all browsers, if they ever are. Webkit, for example, just removed their implementation of Shadow DOM (it was developed by Google, and had no maintainer after they left the project to create Blink). Enough interest from developers and additional implementations by Mozilla (in progress) and Microsoft (possible) might hopefully encourage the Webkit contributors to start a new implementation of Web Components, but time will tell.

However, worries about browser implementations shouldn’t stop people checking out Polymer and experimenting with it. If nothing else, it will give your hope for just how good the web platform could be.