Polymer, fight for performance

It's no secret to anyone, although not everyone knows that web components are our future. This future has not yet come, but now it is just about. One way to bring this future closer is the Polymer library from a little-known Google corporation. One of the reasons why the future does not come is compatibility with browsers and a drop in performance caused by the lack of this compatibility. Sometimes it is insignificant, and sometimes critical.

The Polymer library, I will say with prejudice, is good, the code is beautiful and clean, but the performance drop in the still popular Firefox browser is what will not make it popular in the near term, in my opinion. For who needs to tinker with it, if there are other, more working things, and searches on these your Internet solutions do not give.
However, can something still be done? Yes sir. Can!

If you have read this far and have not lost interest, then most likely you are aware of what Polymer is in its current second version and how exactly it declares dependencies and polyfiles. The <link rel = "import"> tag, which is used for this, is the root of the problem, it is not supported and will never be supported in Firefox .

After the page is loaded, the content is pulled up by links, the content is parsed and executed, only after that the components become available and begin to be displayed, as a result, depending on the connection speed from half a second, the application is completely or partially inaccessible, which is simply ugly.
')
What to do with it, you ask? Maybe there are some assembly tools? Maybe the team of a little-known corporation has already tried?
There is an assembly tool, but as a result, we have not several, but one <link rel = "import">, in which there is an assortment of html and script tags.
Wait, what about the build in one js? No way! Or is it somehow?

The next news from the development team was about preparing the third version.

Imports use ES6 import syntax, not <link rel = "import">.
Templates are defined as a string — not the <dom-module> and <template> elements.

Pure JS, in short. And now let's see how it is made. After all, we can always rewrite our components, but what to do with vendor iron and paper, for example.
First, let's see what our friends did to them.
iron-icon
iron-form
They simply automatically converted the components to pure javascript.
Transfer the templates from the tag to the property of the object and wrap the components in the automatic add function.
Well, anyone can, so let's try it yourself.

To begin with, we will collect the files with the components into one regular polymer build, and then we will set the gulp on the result and try to get js.

let cheerio = require('gulp-cheerio'); ... .pipe(cheerio( { run: function ($) { $('body > div > *').each(function () { if (this.tagName === 'script') { return; } let $this = $(this); if (this.tagName === 'dom-module') { let script = $this.children('script').html(); let template = $this.children('template').html(); if (template && script) { script = script.replace('Polymer({', "Polymer({_template:`" + template + '`,'); script = script.replace('static get is()', 'static get template(){return `' + template + '`}static get is()'); $this.after($('<script>' + script + '</script>')); $this.remove(); return; } } $this.after($('<script>Polymer.addToHead(`' + $.html(this) + '`);</script>')); $this.remove(); }); }, parserOptions: {decodeEntities: false} })) 

where is the code

 Polymer.addToHead = (code) => { let a = document.createElement('div'); a.style.display = 'none;'; a.innerHTML = code; document.head.appendChild(a); }; 

Must be connected right after <link rel = "import" href = "../../ libraries / polymer / polymer.html" />, well, or whatever you think of yourself.
As a result, we get html consisting exclusively of <script> tags, which is already much closer to the desired result.

  .pipe(splitJsCss({ type: ['js'] })) .pipe(gzip()) 

And here we have already compressed js on the output, which can be connected like any other js, as is customary in your project.
Suddenly, all of a sudden (tm) the delay disappears in Firefox. There is no overhead for reloading and parsing, everything is executed synchronously. And cached according to the general policies of the site.

I can not say that all this is as elegant as the switch functions in ES6, but the Polymer library can be used much more than literally an hour before reading this article.

PS Are there any disadvantages? Well, if you are particularly cleverly loaded components on demand, you now have to independently monitor the double performance, unless of course you had it.

PPS Why fight, because before writing my own collector, I tried to suggest the developers to transfer the templates themselves to javascript, but I could not find a common language. A library that allows you to write beautiful code and the developers who choke with their own hands the very possibility of its wide use today.