Google IO 2017: Future, Faster: Unlock the Power of Web Components with Polymer

I have used Polymer extensively in the past.  It is a great library to build web components with, and although I no longer actively use it on a daily basis, I wanted to check on what is coming down the pipe with Polymer 2.0.

Polymer is built on top of the Web Components specs, offering conveniences on top of it.  These conveniences include template based rendering from a chunk of HTML, template binding propagation, binding for event handlers, etc.

Google IO 2017 had a great presentation on Polymer titled Future, Faster: Unlock the Power of Web Components with Polymer, which you can view here if you have the time:

Allow me to summarize what I felt were the important insights below:

Safari is the latest browser to gain support for Shadow DOM v1

Safari supports Shadow DOM v1 with it’s version 10 release.  This means both major mobile browsers now have support for the majority of the Web Component specs.

Web Components Browser Compatibility Table – as seen on https://www.webcomponents.org/

All modern browsers now support ES6 classes and CSS properties, with Chrome and Safari supporting Custom Elements and Shadow DOM.  Any other features not native are supported by Polymer through polyfills.

Polymer 2.0 supports class based inheritance

You can create new element classes by inheriting from Polymer.Element!

As I have used Polymer 1.0 with TypeScript in the past, this is going to be great from a programming perspective.  No longer will you have to pass awkward object literals to the Polymer() function.  I’m looking forward to being able to cast elements to their TypeScript types and work with them in a type-safe manner.

Element inheritance is now supported!

No longer will you have to copy and paste large chunks of code to make a component that functions a little differently than an existing one.  Indeed this was one of the problems with Polymer 1.0, as I remember having to create my own forks of several paper and iron components in order to have them operate just a little differently.

This means we can build on top of simple components in order to achieve more complicated ones. This should be a great performance win for Polymer developers as we are able to forgo the fancy features where not needed and use faster, simpler components.

Smaller library size

 

Thanks to browser vendors shipping more Web Components specs and Polymer’s feature detection-based polyfill, the payload of the polyfill has been greatly reduced across all browsers:

Polyfill Size Reduction – https://youtu.be/cuoZenpQveQ?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy&t=22m13s

Migration from existing Polymer 1.0 projects to Polymer 2.0 is meant to be simple

Polymer 2.0 provides a Legacy API, which requires no immediate code changes. Only minor template changes are required.

Want to learn more?

Visit the Polymer homepage at http://www.polymer-project.org.  Polymer provides 100 already baked components to get you going.  Find all the components at http://www.webcomponents.org.

Leave a Reply

Your email address will not be published. Required fields are marked *