Welcome Polymer 2 (and the Web Components spec v1)

Finally we can think of components as first class citizens on the web.

After almost 2 years that we are working with, and heavily believing in, Web Components and Polymer, they have now reached one of the most important milestones: Polymer 2 is released, and is based on the v1 specification of Web Components!

What’s new with these version numbers?

Web Components v1

Lets start from the specification itself, first of all Web Components gets a shiny new logo and a totally refreshed website!

the new logo

This new website serves as an “app-store” for web components, no matter which library are you using, making easier for developers to share and discover almost any type of components.

The v1 spec is also getting the much deserved love from the browsers, with latest versions of Chrome and Safari fully supporting both the Custom Elements and Shadow DOM specifications, while Firefox is in the works and Microsoft Edge is… considering.

On the code side, now developing a new Web Component is really easy on modern browser:

And it works out of the box! For backward compatibility (read Internet Explorer) you can just transpile this code to ES5 via Babel or similar tools.

For browsers that (still) do not support this specification or part of it, you can include in your page the offical polyfill, now enriched by a dynamic loader which will load only the polyfill that the browser really needs instead of all of them, saving precious bandwith!

Polymer 2

Thanks to huge progress made by the Web Components specification, Polymer is one of the first modern Javascript library that is shrinking in size and features on a new iteration!

Image by carlo

This way Polymer 2 only adds the feature that are not part of the specification like: one-way data binding, properties observers, mixins, DOM helpers plus a set of handy CLI tools.

So how does a new Polymer component code looks like? Not so different from the standard one we have seen before…

As you can see the Javascript definition is almost identical to the “pure specification” we have seen before, Polymer adds its small set of features and, as for v1, the declaration of the template as good-old HTML plus some binding expressions.

Combining Polymer 2, Web Component v1 and the new polyfill results in a very small footprint for the browsers since we are working with real standards!

If you want to learn more about Web Components v1 and Polymer 2 you can check this introduction from the latest Google I/O:

Like what you read? Give Salvatore Laisa a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.