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!
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!
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…
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: