24-25 October, 2019 #CodemotionMilan19 #WebComponents @LostInBrittany
A presentation at Codemotion in October 2019 in Milan, Metropolitan City of Milan, Italy by Horacio Gonzalez
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 Office 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
