Web components en 2019, on en est où?

A presentation at Touraine Tech in February 2019 in Tours, France by Horacio Gonzalez

Slide 1

Slide 1

Web components en 2019, on en est où ? Horacio Gonzalez @LostInBrittany #WebComponents @TouraineTech @LostInBrittany

Slide 2

Slide 2

Who are we? Introducing myself and introducing OVH #WebComponents @TouraineTech @LostInBrittany

Slide 3

Slide 3

Horacio Gonzalez @LostInBrittany Spaniard lost in Brittany, developer, dreamer and all-around geek #WebComponents @TouraineTech @LostInBrittany

Slide 4

Slide 4

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 @TouraineTech @LostInBrittany

Slide 5

Slide 5

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 @TouraineTech @LostInBrittany

Slide 6

Slide 6

OVH: 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 HubiC Over theBox ▪ Licences Cloud Desktop Securities MS Office Hybrid Cloud Messaging MS solutions #WebComponents @TouraineTech @LostInBrittany

Slide 7

Slide 7

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

Slide 8

Slide 8

On Polymer tour since 2014 #WebComponents @TouraineTech @LostInBrittany

Slide 9

Slide 9

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

Slide 10

Slide 10

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

Slide 11

Slide 11

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

Slide 12

Slide 12

Is it a conspiracy? #WebComponents @TouraineTech @LostInBrittany

Slide 13

Slide 13

Am I only a dreamer? #WebComponents @TouraineTech @LostInBrittany

Slide 14

Slide 14

Well, revolution IS there But it’s a silent one… #WebComponents @TouraineTech @LostInBrittany

Slide 15

Slide 15

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

Slide 16

Slide 16

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

Slide 17

Slide 17

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

Slide 18

Slide 18

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

Slide 19

Slide 19

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

Slide 20

Slide 20

Custom Element To define your own HTML tag

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

Slide 21

Slide 21

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> #WebComponents @TouraineTech @LostInBrittany

Slide 22

Slide 22

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); #WebComponents @TouraineTech @LostInBrittany

Slide 23

Slide 23

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

Slide 24

Slide 24

Why those libs? Why people don’t use vanilla? #WebComponents @TouraineTech @LostInBrittany

Slide 25

Slide 25

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

Slide 26

Slide 26

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

Slide 27

Slide 27

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

Slide 28

Slide 28

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

Slide 29

Slide 29

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

Slide 30

Slide 30

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

Slide 31

Slide 31

Let’s talk libraries What’s new? #WebComponents @TouraineTech @LostInBrittany

Slide 32

Slide 32

Lot’s of players, lot of evolutions LitElement SkateJS It’s JavaScript after all… #WebComponents @TouraineTech @LostInBrittany

Slide 33

Slide 33

Stencil Powering the new Ionic 4! #WebComponents @TouraineTech @LostInBrittany

Slide 34

Slide 34

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

Slide 35

Slide 35

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

Slide 36

Slide 36

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

Slide 37

Slide 37

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

Slide 38

Slide 38

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

Slide 39

Slide 39

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

Slide 40

Slide 40

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

Slide 41

Slide 41

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

Slide 42

Slide 42

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

Slide 43

Slide 43

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

Slide 44

Slide 44

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

Slide 45

Slide 45

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

Slide 46

Slide 46

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 @TouraineTech @LostInBrittany

Slide 47

Slide 47

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

Slide 48

Slide 48

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

Slide 49

Slide 49

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

Slide 50

Slide 50

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

Slide 51

Slide 51

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

Slide 52

Slide 52

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 @TouraineTech @LostInBrittany

Slide 53

Slide 53

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

Slide 54

Slide 54

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

Slide 55

Slide 55

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 @TouraineTech @LostInBrittany

Slide 56

Slide 56

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

Slide 57

Slide 57

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

Slide 58

Slide 58

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

Slide 59

Slide 59

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

Slide 60

Slide 60

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

Slide 61

Slide 61

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

Slide 62

Slide 62

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

Slide 63

Slide 63

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

Slide 64

Slide 64

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

Slide 65

Slide 65

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

Slide 66

Slide 66

Thank you! #WebComponents @TouraineTech @LostInBrittany