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

  • 2 500 Employees in 19 countries 18 Years of Innovation 35 Points of presence 4TB Anti DDoS capacity Hosting capacity : 1.3M Physical Servers #WebComponents #DevFestParis @LostInBrittany

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