Polymer 3 is coming and it’s finally time for ES6 Modules and NPM (Yarn to be more specific) passing through SSR of Web Components, bye bye Bower and 2010 trends.

Before the start of the Polymer Summit 2017 @ Lokomotivværkstedet (Copenhagen)

This was a really great 2017 summit: awesome Copenhagen, awesome location and of course, awesome conference. This year’s conf gave us at Contactlab lots of confirmations about our stack and the decisions made last year: dismiss Bower. We took the right decision, of course, together with the rest of the JavaScript community.

The new home of Polymer: NPM.

Credits: Fred Schott. From the Polymer Summit 2017 slides of his talk

To be more specific, the new real home for Polymer is Yarn. That’s because only Yarn could achieve what Bower and NPM can realize together.

Credits: Fred Schott. From the Polymer Summit 2017 slides of his talk

This is an extremely good news. Here’re some reasons:

Furthermore this is the right choice to start being a real React-like libraries competitor, pursuing the Web Components road and avoiding the Virtual Dom.

That’s not all: in the coming months we will be able to remove polyfills at all. Well, maybe not in all the browsers, but we can see that the interest in implementing such beautiful and useful specs is high. I’m talking about Custom Elements, Shadow DOM and of course JS Modules.

Credits: Fred Schott. From the Polymer Summit 2017 slides of his talk

Browsers’ developers and companies are trying to go in the same direction, and it seems that we can finally achieve more consistency between all major browsers pursuing this road (IE11 IS NOT included in major browsers).

A brand new templating system.

And the day of Webpack is here. We are finally able to use Webpack as “normal people” importing Polymer and its .js files forgetting about the old .html implementation.

In fact Polymer 3 will bring us its pure JavaScript version. Starting enabling literal templates embedded within the class. True story. Here is the real game changer.

The new lit-html templating system developed by the Polymer team will be the real “plugin” able to bring Polymer to the next level, really close to the React developer experience.

Credits: Justin Fagnani. From the Polymer Summit 2017 slides of his talk

But lit-html is not built-in within the Polymer core, indeed, the core exposes the possibility to use a static getter on the template().

Credits: Justin Fagnani. From the Polymer Summit 2017 slides of his talk

What’s next? Interoperability between components library.

To be more specific interoperability between Custom Elements and every library on the JS marketplace.

Rob Dodson and some other awesome guys gave us a new and fresh vision, comprehensive of a test suite, about (for now) the four main libraries on the field: Angular, React, Preact and Vue. I think the results are pretty nice, and, as Rob said, the problems can be easily fixed.

Checkout the custom-elements-everywhere website to learn more about it.

Waiting for this shared compatibility to be achieved, the current vision of what concern the future of Web Components is shining gold, and this aspect wasn’t so clear before this regenerating Polymer Summit 2017.

SSR (SEO problems) and Rendertron.

Among the topics of the second day, there are two that caught our attention as were almost considered as an utopia during the last few years of Web Components spreading. We are talking about Server Side Rendering Web Components and how to solve the SEO problems that are killing the PWAs around the web making them not crawlable by all the search engine’s (and not) bots.

This is because, right now, we are not rendering at all our web applications, it’s all about JavaScript loading and DOM (or VDOM) changes, that are impossibile to get for these bots which can’t run JavaScript at all.

The only one, right now, is the googlebot, recently upgraded to Chrome 41. It can really run JavaScript when scraping your web app and get the correct page content, but this is not true for ALL the other bots.

Libraries like React or Vue are trying to solve this problem using Universal JavaScript and Server Side Rendering the VDOM.

The biggest problem of SSR for Web Components is the Shadow DOM. The beautiful standard that solved our problems of scoping CSS is actually a problem on the Server Side.

Sam Li came out with an awesome solution for it: Rendertron.

Credits: Sam Li. From the Polymer Summit 2017 slides of his talk

Check out Sam Li’s keynote to learn more: Solving SEO with Headless Chrome.

A beautiful place: Copenhagen.