The age of the dinosaur monster web frameworks is ending
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!).
Here are the individual + combined sized of the different Polymer versions together with the Polyfills required in each browser …
|Native Browser Support||Combined size of Polymer & Polyfills (in kb, gzip)|
|Browser||HTMLImports||Custom Elements||ShadowDOM||Other Platform||1.x||2.x
|Safari w/ CEv1||✔︎||✔︎||✔︎||53||26||13|
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)
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!