Web components en 2019, on en est où ? Horacio Gonzalez @LostInBrittany #WebComponents #DevFestParis @LostInBrittany
A presentation at DevFest Paris in February 2019 in Paris, France by Horacio Gonzalez
Web components en 2019, on en est où ? Horacio Gonzalez @LostInBrittany #WebComponents #DevFestParis @LostInBrittany
Who are we? Introducing myself and introducing OVH #WebComponents #DevFestParis @LostInBrittany
Horacio Gonzalez @LostInBrittany Spaniard lost in Brittany, developer, dreamer and all-around geek #WebComponents #DevFestParis @LostInBrittany
OVH : Key Figures 1.3M Customers worldwide in 138 Countries 1.5 Billions euros investment over five years 30 Datacenters (growing) 350k Dedicated Servers 200k Private cloud VMs running 650k Public cloud Instances created in a month 15TB bandwidth capacity
OVH: A Global Leader on Cloud 200k Private cloud VMs running 1 Dedicated IaaS Europe 2018 27 Datacenters Own 15 Tbps Hosting capacity : 1.3M Physical Servers 360k Servers already deployed 2020 50 Datacenters Netwok with 35 PoPs
1.3M Customers in 138 Countries #WebComponents #DevFestParis @LostInBrittany
OVH: Our solutions Web Hosting Mobile Hosting Cloud 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 HubiC Over theBox ▪ Licences Cloud Desktop Securities MS Office Hybrid Cloud Messaging MS solutions #WebComponents #DevFestParis @LostInBrittany
Sometimes I feel a bit grumpy The stories of the grumpy old speaker… #WebComponents #DevFestParis @LostInBrittany
On Polymer tour since 2014 #WebComponents #DevFestParis @LostInBrittany
Image: bu.edu Web components == Revolution #WebComponents #DevFestParis @LostInBrittany
Images: BitRebels & Brickset Building a world brick by brick #WebComponents #DevFestParis @LostInBrittany
Is the promise unfulfilled? It’s 2019 now, where is your revolution, dude? #WebComponents #DevFestParis @LostInBrittany
Is it a conspiracy? #WebComponents #DevFestParis @LostInBrittany
Am I only a dreamer? #WebComponents #DevFestParis @LostInBrittany
Well, revolution IS there But it’s a silent one… #WebComponents #DevFestParis @LostInBrittany
They are there, in everyday sites More than you can imagine #WebComponents #DevFestParis @LostInBrittany
The components architecture won Components, components everywhere #WebComponents #DevFestParis @LostInBrittany
Web components ARE platform Truly part of the platform… #WebComponents #DevFestParis @LostInBrittany
The 3 minutes context What the heck are web component? #WebComponents #DevFestParis @LostInBrittany
Web Components #WebComponents #DevFestParis @LostInBrittany
Custom Element
<body> … <script> window.customElements.define(‘my-element’, class extends HTMLElement {…}); </script> <my-element></my-element> </body> #WebComponents #DevFestParis @LostInBrittany
Shadow DOM <button>Hello, world!</button> <script> var host = document.querySelector(‘button’); const shadowRoot = host.attachShadow({mode:’open’}); shadowRoot.textContent = ‘こんにちは、影の世界!’; </script> #WebComponents #DevFestParis @LostInBrittany
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); #WebComponents #DevFestParis @LostInBrittany
But in fact, it’s just an element… ● ● ● ● #WebComponents #DevFestParis @LostInBrittany
Why those libs? Why people don’t use vanilla? #WebComponents #DevFestParis @LostInBrittany
Web component standard is low level At it should be! #WebComponents #DevFestParis @LostInBrittany
Standard == basic bricks Standard exposes an API to: ○ Define elements ○ Encapsulate DOM #WebComponents #DevFestParis @LostInBrittany
Libraries are helpers They give you higher-level primitives #WebComponents #DevFestParis @LostInBrittany
Different high-level primitives Each one tailored to a use #WebComponents #DevFestParis @LostInBrittany
Sharing the same base High-performant, low-level, in-the-platform web components standard #WebComponents #DevFestParis @LostInBrittany
Libraries aren’t a failure of standard They happen by design #WebComponents #DevFestParis @LostInBrittany
Let’s talk libraries What’s new? #WebComponents #DevFestParis @LostInBrittany
Lot’s of players, lot of evolutions LitElement SkateJS It’s JavaScript after all… #WebComponents #DevFestParis @LostInBrittany
Stencil Powering the new Ionic 4! #WebComponents #DevFestParis @LostInBrittany
Not another library A Web Component compiler #WebComponents #DevFestParis @LostInBrittany
Not a beta anymore Ionic 4 released, powered by Stencil! #WebComponents #DevFestParis @LostInBrittany
Polymer Is the old player still alive? #WebComponents #DevFestParis @LostInBrittany
What’s Polymer status today? Well, how could I say… it’s complicated #WebComponents #DevFestParis @LostInBrittany
It seems it’s going to be deprecated… Technically yes… and that means good news! #WebComponents #DevFestParis @LostInBrittany
Let’s try to see clearer Let’s dive into Polymer history… #WebComponents #DevFestParis @LostInBrittany
A tool built for another paradigm No web component support on browsers No React, Angular or Vue innovations #WebComponents #DevFestParis @LostInBrittany
No so well suited for the current one The current platform is way more powerful The state of art has evolved #WebComponents #DevFestParis @LostInBrittany
Let’s learn from its lessons The current platform is way more powerful The state of art has evolved #WebComponents #DevFestParis @LostInBrittany
And let it rest… There will have no Polymer 4… #WebComponents #DevFestParis @LostInBrittany
So Polymer as we know it is dead… But the Polymer Project is indeed alive! #WebComponents #DevFestParis @LostInBrittany
But I have invested so much on it! What to do? #WebComponents #DevFestParis @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! #WebComponents #DevFestParis @LostInBrittany
And without metaphors? Polymer Project != Polymer library Polymer Project well alive Polymer library was only one library #WebComponents #DevFestParis @LostInBrittany
LitElement New kid on the block #WebComponents #DevFestParis @LostInBrittany
Born from the Polymer team For the new web paradigm #WebComponents #DevFestParis @LostInBrittany
Modern lightweight web components For the new web paradigm #WebComponents #DevFestParis @LostInBrittany
Based on lit-html An efficient, expressive, extensible HTML templating library for JavaScript #WebComponents #DevFestParis @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 #WebComponents #DevFestParis
@LostInBrittany
lit-html Templates
let myTemplate = (data) => html<h1>${data.title}</h1> <p>${data.body}</p>;
Lazily rendered Generates a TemplateResult #WebComponents #DevFestParis
@LostInBrittany
It’s a bit like JSX, isn’t it? The good sides of JSX… but in the standard! #WebComponents #DevFestParis @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 #WebComponents #DevFestParis
@LostInBrittany
One more thing…* *Let’s copy from the master #WebComponents #DevFestParis @LostInBrittany
Polymer is not important WebComponents ARE #WebComponents #DevFestParis @LostInBrittany
Use the Platform, Luke… WebComponents ARE native #WebComponents #DevFestParis @LostInBrittany
Do you love your framework? Oh yeah, we all do #WebComponents #DevFestParis @LostInBrittany
Would you marry your framework? Like until death… #WebComponents #DevFestParis @LostInBrittany
How much does cost the divorce? Do you remember when you dropped AngularJS for Angular? #WebComponents #DevFestParis @LostInBrittany
Why recode everything again? Reuse the bricks in your new framework #WebComponents #DevFestParis @LostInBrittany
Lots of web components libraries LitElement SkateJS For different need and sensibilities #WebComponents #DevFestParis @LostInBrittany
And some good news Angular Elements Vue Web Component Wrapper Frameworks begin to understand it #WebComponents #DevFestParis @LostInBrittany
So for your next app Choose a framework, no problem… But please, help your future self Use Web Components! #WebComponents #DevFestParis @LostInBrittany
Thank you! #WebComponents #DevFestParis @LostInBrittany
