Are Web Components the Betamax of web development?

A presentation at Codemotion in October 2019 in Milan, Metropolitan City of Milan, Italy by Horacio Gonzalez

Slide 1

Slide 1

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

Slide 2

Slide 2

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

Slide 3

Slide 3

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

Slide 4

Slide 4

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

Slide 5

Slide 5

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

Slide 6

Slide 6

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

Slide 7

Slide 7

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

Slide 8

Slide 8

Web Components Web standard W3C #CodemotionMilan19 #WebComponents @LostInBrittany

Slide 9

Slide 9

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

Slide 10

Slide 10

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

Slide 11

Slide 11

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

Slide 12

Slide 12

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

Slide 13

Slide 13

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

Slide 14

Slide 14

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

Slide 15

Slide 15

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

Slide 16

Slide 16

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

Slide 17

Slide 17

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

Slide 18

Slide 18

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

Slide 19

Slide 19

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

Slide 20

Slide 20

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

Slide 21

Slide 21

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

Slide 22

Slide 22

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

Slide 23

Slide 23

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

Slide 24

Slide 24

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

Slide 25

Slide 25

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

Slide 26

Slide 26

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

Slide 27

Slide 27

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

Slide 28

Slide 28

#CodemotionMilan19 #WebComponents @LostInBrittany

Slide 29

Slide 29

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

Slide 30

Slide 30

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

Slide 31

Slide 31

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

Slide 32

Slide 32

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

Slide 33

Slide 33

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

Slide 34

Slide 34

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

Slide 35

Slide 35

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

Slide 36

Slide 36

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

Slide 37

Slide 37

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

Slide 38

Slide 38

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

Slide 39

Slide 39

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

Slide 40

Slide 40

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

Slide 41

Slide 41

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

Slide 42

Slide 42

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

Slide 43

Slide 43

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

Slide 44

Slide 44

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

Slide 45

Slide 45

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

Slide 46

Slide 46

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

Slide 47

Slide 47

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

Slide 48

Slide 48

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

Slide 49

Slide 49

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

Slide 50

Slide 50

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

Slide 51

Slide 51

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

Slide 52

Slide 52

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

Slide 53

Slide 53

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

Slide 54

Slide 54

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

Slide 55

Slide 55

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

Slide 56

Slide 56

Stencil Powering Ionic 4 #CodemotionMilan19 #WebComponents @LostInBrittany

Slide 57

Slide 57

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

Slide 58

Slide 58

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

Slide 59

Slide 59

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

Slide 60

Slide 60

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

Slide 61

Slide 61

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

Slide 62

Slide 62

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

Slide 63

Slide 63

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

Slide 64

Slide 64

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

Slide 65

Slide 65

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

Slide 66

Slide 66

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

Slide 67

Slide 67

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

Slide 68

Slide 68

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

Slide 69

Slide 69

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

Slide 70

Slide 70

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

Slide 71

Slide 71

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

Slide 72

Slide 72

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

Slide 73

Slide 73

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

Slide 74

Slide 74

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

Slide 75

Slide 75

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

Slide 76

Slide 76

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

Slide 77

Slide 77

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

Slide 78

Slide 78

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

Slide 79

Slide 79

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

Slide 80

Slide 80

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

Slide 81

Slide 81

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

Slide 82

Slide 82

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

Slide 83

Slide 83

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

Slide 84

Slide 84

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

Slide 85

Slide 85

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

Slide 86

Slide 86

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

Slide 87

Slide 87

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

Slide 88

Slide 88

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

Slide 89

Slide 89

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

Slide 90

Slide 90

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

Slide 91

Slide 91

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

Slide 92

Slide 92

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

Slide 93

Slide 93

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