Are Web Components the Betamax of web development?

24-25 October, 2019 #CodemotionMilan19 #WebComponents @LostInBrittany

24-25 October, 2019 Are Web Components the Betamax of web development? Horacio Gonzalez @LostInBrittany #CodemotionMilan19 #WebComponents @LostInBrittany

Who are we? Introducing myself and introducing OVHcloud #CodemotionMilan19 #WebComponents @LostInBrittany

Horacio Gonzalez @LostInBrittany Spaniard lost in Brittany. Developer, speaker, dreamer, geek Flutter #CodemotionMilan19 #WebComponents @LostInBrittany

OVHcloud: A Global Leader 200k Private cloud VMs running 1 Dedicated IaaS Europe 30 Datacenters Own 20Tbps Hosting capacity : 1.3M Physical Servers 360k Servers already deployed Netwok with 35 PoPs

1.3M Customers in 138 Countries #CodemotionMilan19 #WebComponents @LostInBrittany

OVHcloud: Our solutions Cloud Web Hosting Mobile Hosting Telecom VPS Containers ▪ Dedicated Server Domain names VoIP Public Cloud Compute ▪ Data Storage Email SMS/Fax Private Cloud ▪ Network and Database CDN Virtual desktop Serveur dédié Security Object Storage Web hosting Cloud Storage Over the Box ▪ Licences Cloud Desktop Securities MS Oﬃce Hybrid Cloud Messaging MS solutions #CodemotionMilan19 #WebComponents @LostInBrittany

The 3 minutes context What the heck are web component? #CodemotionMilan19 #WebComponents @LostInBrittany

Web Components Web standard W3C #CodemotionMilan19 #WebComponents @LostInBrittany

Web Components Available in all modern browsers: Firefox, Safari, Chrome #CodemotionMilan19 #WebComponents @LostInBrittany

Web Components Create your own HTML tags Encapsulating look and behavior #CodemotionMilan19 #WebComponents @LostInBrittany

Web Components Fully interoperable With other web components, with any framework #CodemotionMilan19 #WebComponents @LostInBrittany

Web Components CUSTOM ELEMENTS SHADOW DOM #CodemotionMilan19 #WebComponents TEMPLATES @LostInBrittany

Custom Element To define your own HTML tag

<body> … <script> window.customElements.define(‘my-element’, class extends HTMLElement {…}); </script> <my-element></my-element> </body> #CodemotionMilan19 #WebComponents @LostInBrittany

Shadow DOM To encapsulate subtree and style in an element <button>Hello, world!</button> <script> var host = document.querySelector(‘button’); const shadowRoot = host.attachShadow({mode:’open’}); shadowRoot.textContent = ‘こんにちは、影の世界!’; </script> #CodemotionMilan19 #WebComponents @LostInBrittany

Template To have clonable document template <template id=”mytemplate”> <img src=”” alt=”great image”> <div class=”comment”></div> </template> var t = document.querySelector(‘#mytemplate’); // Populate the src at runtime. t.content.querySelector(‘img’).src = ‘logo.png’; var clone = document.importNode(t.content, true); document.body.appendChild(clone); #CodemotionMilan19 #WebComponents @LostInBrittany

But in fact, it’s just an element… ● ● ● ● Attributes Properties Methods Events #CodemotionMilan19 #WebComponents @LostInBrittany

Sometimes I feel a bit grumpy The stories of the grumpy old speaker… #CodemotionMilan19 #WebComponents @LostInBrittany

On Web Components tour since 2014 #CodemotionMilan19 #WebComponents @LostInBrittany

Image: bu.edu Web components == Revolution #CodemotionMilan19 #WebComponents @LostInBrittany

Images: BitRebels & Brickset Building a world brick by brick #CodemotionMilan19 #WebComponents @LostInBrittany

Is the promise unfulfilled? It’s 2019 now, where is your revolution, dude? #CodemotionMilan19 #WebComponents @LostInBrittany

And, even worse, several months ago Hey, dude, your Web Components thing is like Betamax Even if it was a better solution, market has already chosen, React has won, as VHS did… #CodemotionMilan19 #WebComponents @LostInBrittany

Hey, old man, WTF is a Betamax? A videocassette guide for Millenials #CodemotionMilan19 #WebComponents @LostInBrittany

At the beginning there was the TV And public saw it was good… #CodemotionMilan19 #WebComponents @LostInBrittany

But how to keep your favorite show forever? Sony VTR CV-2000 - Image credit LabGuy’s World The VTR was born, somewhere in the 1960s #CodemotionMilan19 #WebComponents @LostInBrittany

From videotape to videocassette… Sony U-matic - Image credit MKH Electronics U-matic cassette - Image credit PSAP And then to mass market, sometime in the 1970s #CodemotionMilan19 #WebComponents @LostInBrittany

Each vendor proposed their solution Sony’s Betamax - Image credit PSAP JVC’s VHS - Image credit PSAP Cassettes aren’t so different from JS frameworks after all… #CodemotionMilan19 #WebComponents @LostInBrittany

#CodemotionMilan19 #WebComponents @LostInBrittany

There was a format war So fierce that it has its own Wikipedia page #CodemotionMilan19 #WebComponents @LostInBrittany

Betamax was a superior format Higher quality recorders, better resolution, slightly superior sound, and more stable image #CodemotionMilan19 #WebComponents @LostInBrittany

But the market decided otherwise And Betamax, even if superior, failed… #CodemotionMilan19 #WebComponents @LostInBrittany

As usual, the winner took it all Until a new arrival entered in scene, the DVD… But that’s another story for another talk #CodemotionMilan19 #WebComponents @LostInBrittany

Why did Betamax failed? Spoiler: it isn’t so simple… #CodemotionMilan19 #WebComponents @LostInBrittany

Betamax was believed to be superior In the minds of the public and press #CodemotionMilan19 #WebComponents @LostInBrittany

But consumers wanted an affordable VCR Betamax costed hundreds of dollars more #CodemotionMilan19 #WebComponents @LostInBrittany

They also wanted to record a full movie Originally Betamax cassettes only recorded 1 hour #CodemotionMilan19 #WebComponents @LostInBrittany

And compatibility weighted on VHS side Many licencees offered VHS VCRs #CodemotionMilan19 #WebComponents @LostInBrittany

Are Web Components like Betamax? A perceived superior alternative destined to fail? #CodemotionMilan19 #WebComponents @LostInBrittany

It could be even the opposite… Web components are maybe the VHS of JS #CodemotionMilan19 #WebComponents @LostInBrittany

Compatibility is on Web Components side Web Components everywhere, baby! #CodemotionMilan19 #WebComponents @LostInBrittany

Do you remember AngularJS? And all the code put in the trash bin when Angular arrived… #CodemotionMilan19 #WebComponents @LostInBrittany

The pain of switching frameworks? Rewriting once again your code… #CodemotionMilan19 #WebComponents @LostInBrittany

The impossibility of sharing UI code? Between apps written with different frameworks #CodemotionMilan19 #WebComponents @LostInBrittany

Web Components change that In a clean and standard way #CodemotionMilan19 #WebComponents @LostInBrittany

They are indeed a revolution But it’s a silent one… #CodemotionMilan19 #WebComponents @LostInBrittany

They are there, in everyday sites More than you can imagine #CodemotionMilan19 #WebComponents @LostInBrittany

The components architecture won Components, components everywhere #CodemotionMilan19 #WebComponents @LostInBrittany

Web components ARE platform Truly part of the platform… #CodemotionMilan19 #WebComponents @LostInBrittany

Aren’t the multiple Web Components libs a sign of failure? If the standard worked, people would use Vanilla, wouldn’t them? #CodemotionMilan19 #WebComponents @LostInBrittany

Web component standard is low level At it should be! #CodemotionMilan19 #WebComponents @LostInBrittany

Standard == basic bricks Standard exposes an API to: ○ Define elements ○ Encapsulate DOM #CodemotionMilan19 #WebComponents @LostInBrittany

Libraries are helpers They give you higher-level primitives #CodemotionMilan19 #WebComponents @LostInBrittany

Different high-level primitives Each one tailored to a use #CodemotionMilan19 #WebComponents @LostInBrittany

Sharing the same base High-performant, low-level, in-the-platform web components standard #CodemotionMilan19 #WebComponents @LostInBrittany

Libraries aren’t a failure of standard They happen by design #CodemotionMilan19 #WebComponents @LostInBrittany

Stencil Powering Ionic 4 #CodemotionMilan19 #WebComponents @LostInBrittany

Not another library A Web Component compiler #CodemotionMilan19 #WebComponents @LostInBrittany

Not a beta anymore Ionic 4 released, powered by Stencil! #CodemotionMilan19 #WebComponents @LostInBrittany

A build time tool To generate standard web components #CodemotionMilan19 #WebComponents @LostInBrittany

Fully featured ● Virtual DOM ● Async rendering ● Reactive data-binding ● TypeScript ● JSX #CodemotionMilan19 #WebComponents @LostInBrittany

And the cherry on the cake Server-Side Rendering #CodemotionMilan19 #WebComponents @LostInBrittany

Polymer Is the old player still alive? #CodemotionMilan19 #WebComponents @LostInBrittany

Polymer evolved again in 2018 Image: © Nintendo Polymer 3 was here! #CodemotionMilan19 #WebComponents @LostInBrittany

What’s Polymer status today? Well, how could I say… it’s complicated #CodemotionMilan19 #WebComponents @LostInBrittany

It seems it’s going to be deprecated… Technically yes… and that means good news! #CodemotionMilan19 #WebComponents @LostInBrittany

Let’s try to see clearer Let’s dive into Polymer history… #CodemotionMilan19 #WebComponents @LostInBrittany

A tool built for another paradigm No web component support on browsers No React, Angular or Vue innovations #CodemotionMilan19 #WebComponents @LostInBrittany

No so well suited for the current one The current platform is way more powerful The state of art has evolved #CodemotionMilan19 #WebComponents @LostInBrittany

Let’s learn from its lessons The current platform is way more powerful The state of art has evolved #CodemotionMilan19 #WebComponents @LostInBrittany

And let it rest… There will have no Polymer 4… #CodemotionMilan19 #WebComponents @LostInBrittany

So Polymer as we know it is dead… But the Polymer Project is indeed alive! #CodemotionMilan19 #WebComponents @LostInBrittany

But I have invested so much on it! What to do? #CodemotionMilan19 #WebComponents @LostInBrittany

That’s why web components are top You can keep using all your Polymer components and create the new ones with a new library… And it simply works! #CodemotionMilan19 #WebComponents @LostInBrittany

And without metaphors? Polymer Project != Polymer library Polymer Project well alive Polymer library was only one library #CodemotionMilan19 #WebComponents @LostInBrittany

LitElement New kid on the block #CodemotionMilan19 #WebComponents @LostInBrittany

Born from the Polymer team For the new web paradigm #CodemotionMilan19 #WebComponents @LostInBrittany

Modern lightweight web components For the new web paradigm #CodemotionMilan19 #WebComponents @LostInBrittany

Based on lit-html An efficient, expressive, extensible HTML templating library for JavaScript #CodemotionMilan19 #WebComponents @LostInBrittany

Do you know tagged templates? function uppercaseExpression(strings, …expressionValues) { var finalString = ” for ( let i = 0; i < strings.length; i++ ) { if (i > 0) { finalString += expressionValues[i - 1].toUpperCase() } finalString += strings[i] } return finalString } const expressions = [ ‘Tours’, ‘Touraine Tech’, ‘Thank you’]; console.log( uppercaseExpressionI am so happy to be in ${expressions[0]} for ${expressions[1]} again! ${expressions[2]}, ${expressions[1]}! ) Little known functionality of template literals #CodemotionMilan19 #WebComponents @LostInBrittany

lit-html Templates let myTemplate = (data) => html<h1>${data.title}</h1> <p>${data.body}</p>; Lazily rendered Generates a TemplateResult #CodemotionMilan19 #WebComponents @LostInBrittany

It’s a bit like JSX, isn’t it? The good sides of JSX… but in the standard! #CodemotionMilan19 #WebComponents @LostInBrittany

LitElement import { LitElement, html } from ‘lit-element’; // Create your custom component class CustomGreeting extends LitElement { // Declare properties static get properties() { return { name: { type: String } }; } // Initialize properties constructor() { super(); this.name = ‘World’; } // Define a template render() { return html<p>Hello, ${this.name}!</p>; } } // Register the element with the browser customElements.define(‘custom-greeting’, CustomGreeting); Lightweight web-components using lit-html #CodemotionMilan19 #WebComponents @LostInBrittany

One more thing…* Let’s copy from the master #CodemotionMilan19 #WebComponents @LostInBrittany

Polymer is not important WebComponents ARE #CodemotionMilan19 #WebComponents @LostInBrittany

Use the Platform, Luke… WebComponents ARE native #CodemotionMilan19 #WebComponents @LostInBrittany

Do you love your framework? Oh yeah, we all do #CodemotionMilan19 #WebComponents @LostInBrittany

Would you marry your framework? Like until death… #CodemotionMilan19 #WebComponents @LostInBrittany

How much does cost the divorce? Do you remember when you dropped AngularJS for Angular? #CodemotionMilan19 #WebComponents @LostInBrittany

Why recode everything again? Reuse the bricks in your new framework #CodemotionMilan19 #WebComponents @LostInBrittany

Lots of web components libraries LitElement SkateJS For different need and sensibilities #CodemotionMilan19 #WebComponents @LostInBrittany

And some good news Angular Elements Vue Web Component Wrapper Frameworks begin to understand it #CodemotionMilan19 #WebComponents @LostInBrittany

So for your next app Choose a framework, no problem… But please, help your future self Use Web Components! #CodemotionMilan19 #WebComponents @LostInBrittany

Conclusion That’s all, folks! #CodemotionMilan19 #WebComponents @LostInBrittany