Polymer 2 - the 10Kb Web Framework

Contents

• Introduction

Introduction

I saw this data from a Polymer product manager buried in a GitHub issue comment and thought it was worth highlighting to show just how amazing Polymer 2.0 is when it comes to framework-size. Many JS frameworks have made grand promises about the small size of their apps but it’s usually only after an inordinate amount of work and effort that you even get close to the promised values, if at all (my Angular 2 app was never anything buy huge).

Polymer is very different to many of the JS-first frameworks in that it builds on the web platform instead of trying to reproduce and replace so much it - because browsers are actually very good at parsing HTML and rendering it quickly if only you let them get on with it (yeah, who knew!).

So instead of trying to offer as many features as possible (does anyone really need “dependency injection” for a JavaScript web app?) it instead tries to add as little as possible, deferring to the functionality already built into the platform whenever possible. The result is a light sprinkling of features on top of what the browser does and does fast, adding data-binding, dealing with cross-browser compatibility when needed etc… and more recently, handling compatibility between v1 and v2 of Polymer and v0 and v1 of web-components.

Here are the individual + combined sized of the different Polymer versions together with the Polyfills required in each browser …

The thing to note is that currently Chrome supports all the features natively so it doesn’t require any polyfills at all. The 53Kb Polymer 1 becomes 23Kb in Polymer 2.0 Hybrid mode (that can run 2.0 and still support the 1.0 syntax for compatibility - what a great upgrade story!) but if you are on pure 2.0 Polymer your framework is down to just 10kb!

As more browsers ship support for web-components natively then the polyfill size for those will continue to shrink too. Safari 10.1 for instance just shipped support for ShadowDom so you immediately save nearly 15kb of polyfills. If you’re using the supplied webcomponents-loader.js which feature-detects and polyfills just what’s needed then your users will already automatically be benefitting as the browsers update - exactly how polyfills should work.

If you want to learn more about the ethos behind Polymer 2.0, this talk at last year’s Google IO is a good introduction. It’s also worth checking out the projects:

WebComponentsJS (v1 spec polyfills)

Polymer-Project 2.0

WebComponents have been a bit of a slow-train-coming but they are finally here, they are fast and usable today. The train is ready, get on board!