Switching from native webcomponents to polymer 2: A story about tradeoff
So I got into web development at the time polymer was still in 0.5, the web components specs were only supported in chrome and it seemed risky to me to jump on the next “hype train”. I had no idea what a polyfill was and I thought, “hey I’ll just use jQuery”. But soon I realized, that most of what jQuery offered was already in browsers. So I took the one site I maintained at that time and just replaced my $(‘#…’) code with document.querySelector and all that good stuff. And everything was kind of fine…
Fast forward to the release of the web components V1 specs
Finally all browsers (except IE) agreed on how web components would be written in the future. So I gave it a try and built a small app out of vanilla v1 web components. It’s just a simple quiz app for students to practise for exams. At first I wrote my own nodeJS backend but quickly realized, that firebase works great with web components. I could just have a list component and entry components and everything was automatically in sync across multiple browsers without hand writing web sockets myself.
(Anyone interested have a look at the app Studiquiz.at)
At this point I was totally in love with native web components and I didn’t see the point of polymer as a library. For me it was just another dependency that would cost me half a megabyte in download size and didn’t add much benefit.
This summer I worked on a quite large website with lots of components (all vanilla) and started to code with regular expressions and vs-code templates.
I was writing my html templates, copied it into another file, filtered out the IDs, generated all the this._<variable> = this.shadowRoot.querySelector(‘#<variable>’) code and added event listeners for a ton of inputs / components. All using regular expressions as much as possible to keep productivity high.
But it was a lot of work and a lot of code to maintain. So I started thinking about using polymer. It would probably speed up the development process a lot. At this time the Polymer Summit in Copenhagen was announced and I decided, this would be a great opportunity for me to get a new impression of Polymer and web components in general.
Polymer Summit
It was a great event and I met a lot of interesting people using Polymer.
So I reevaluated Polymer as a library and found out that Polymer.Element is just 12k. So I took one of my vanilla components and quickly transformed it into a polymer element and compared the file sizes. Using polymer saved 1kbyte (minified) or 50 lines of javascript code in just one component. This made me realize:
Using Polymer isn’t a download size tradeoff like many other frameworks. When you use it for more than two components it will make your app smaller.
I guess my napkin-math is going to be questioned and we can have a chat about this on twitter (Stefan Gussner). I also haven’t considered the JS parsing time on the frontend etc. so maybe I’ll follow up on this with a more in-depth comparison. Let me know if you would like that.
Conclusions
From now on we will use Polymer for our Projects and since Polymer can interoperate with native components we will use a hybrid approach (Polymer and native V1 components) the app we are building right now.
