Are Web Components the Betamax of web development?

A presentation at JFokus in February 2020 in Stockholm, Sweden by Horacio Gonzalez

Slide 1

Are Web Components the Betamax of web development? Horacio Gonzalez @LostInBrittany

Slide 2

Who are we? Introducing myself and introducing OVH OVHcloud

Slide 3

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

Slide 4

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

Slide 5

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 Oﬃce Hybrid Cloud Messaging MS solutions

Slide 6

Sometimes I feel a bit grumpy The stories of the grumpy old speaker…

Slide 7

The one to blame… Matt Raible - @mraible The guy who made me want to become a speaker… and to dare to give talks about frontend

Slide 8

On Web Components tour since 2014

Slide 9

Image: bu.edu Web components == Revolution

Slide 10

Images: BitRebels & Brickset Building a world brick by brick

Slide 11

Is the promise unfulfilled? It’s 2019 now, where is your revolution, dude?

Slide 12

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…

Slide 13

The 3 minutes context What the heck are web component?

Slide 14

Web Components Web standard W3C

Slide 15

Web Components Available in all modern browsers: Firefox, Safari, Chrome

Slide 16

Web Components Create your own HTML tags Encapsulating look and behavior

Slide 17

Web Components Fully interoperable With other web components, with any framework

Slide 18

Web Components CUSTOM ELEMENTS SHADOW DOM TEMPLATES

Slide 19

Custom Element To define your own HTML tag <body> … <script> window.customElements.define(‘my-element’, class extends HTMLElement {…}); </script> <my-element></my-element> </body>

Slide 20

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>

Slide 21

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);

Slide 22

But in fact, it’s just an element… ● ● ● ● Attributes Properties Methods Events

Slide 23

Hey, old man, WTF is a Betamax? A videocassette guide for Millenials

Slide 24

At the beginning there was the TV And public saw it was good…

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

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

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…

Slide 28

Slide 29

There was a format war So fierce that it has its own Wikipedia page

Slide 30

Betamax was a superior format Higher quality recorders, better resolution, slightly superior sound, and more stable image

Slide 31

But the market decided otherwise And Betamax, even if superior, failed…

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

Slide 33

Why did Betamax failed? Spoiler: it isn’t so simple…

Slide 34

Betamax was believed to be superior In the minds of the public and press

Slide 35

But consumers wanted an affordable VCR Betamax costed hundreds of dollars more

Slide 36

They also wanted to record a full movie Originally Betamax cassettes only recorded 1 hour

Slide 37

And compatibility weighted on VHS side Many licencees offered VHS VCRs

Slide 38

Are Web Components like Betamax? A perceived superior alternative destined to fail?

Slide 39

It could be even the opposite… Web components are maybe the VHS of JS

Slide 40

Compatibility is on Web Components side Web Components everywhere, baby!

Slide 41

Do you remember AngularJS? And all the code put in the trash bin when Angular arrived…

Slide 42

The pain of switching frameworks? Rewriting once again your code…

Slide 43

The impossibility of sharing UI code? Between apps written with different frameworks

Slide 44

Web Components change that In a clean and standard way

Slide 45

They are indeed a revolution But it’s a silent one…

Slide 46

They are there, in everyday sites More than you can imagine

Slide 47

The components architecture won Components, components everywhere

Slide 48

Web components ARE platform Truly part of the platform…

Slide 49

Aren’t the multiple Web Components libs a sign of failure? If the standard worked, people would use Vanilla, wouldn’t them?

Slide 50

Web component standard is low level At it should be!

Slide 51

Standard == basic bricks Standard exposes an API to: ○ Define elements ○ Encapsulate DOM

Slide 52

Libraries are helpers They give you higher-level primitives

Slide 53

Different high-level primitives Each one tailored to a use

Slide 54

Sharing the same base High-performant, low-level, in-the-platform web components standard

Slide 55

Libraries aren’t a failure of standard They happen by design

Slide 56

Stencil Powering Ionic 4+

Slide 57

Not another library A Web Component toolchain

Slide 58

A mature technology Ionic 4 released on year ago, powered by Stencil!

Slide 59

Built by the Ionic team Tired of putting good code in the trash bin…

Slide 60

A build time tool To generate standard web components

Slide 61

Fully featured ● Web Component-based ● Component pre-rendering ● Asynchronous rendering pipeline ● Simple component lazy-loading ● TypeScript support ● JSX support ● One-way Data Binding ● Dependency-free components

Slide 62

And the cherry on the cake Server-Side Rendering

Slide 63

Stencil leverages the web platform Working with the web, not against it

Slide 64

Polymer Is the old player still alive?

Slide 65

Polymer evolved again in 2018 Image: © Nintendo Polymer 3 was here!

Slide 66

What’s Polymer status today? Well, how could I say… it’s complicated

Slide 67

It seems it’s going to be deprecated… Technically yes… and that means good news!

Slide 68

Let’s try to see clearer Let’s dive into Polymer history…

Slide 69

A tool built for another paradigm No web component support on browsers No React, Angular or Vue innovations

Slide 70

No so well suited for the current one The current platform is way more powerful The state of art has evolved

Slide 71

Let’s learn from its lessons The current platform is way more powerful The state of art has evolved

Slide 72

And let it rest… There will have no Polymer 4…

Slide 73

So Polymer as we know it is dead… But the Polymer Project is indeed alive!

Slide 74

But I have invested so much on it! What to do?

Slide 75

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!

Slide 76

And without metaphors? Polymer Project != Polymer library Polymer Project well alive Polymer library was only one library

Slide 77

LitElement New kid on the block

Slide 78

Born from the Polymer team For the new web paradigm

Slide 79

Modern lightweight web components For the new web paradigm

Slide 80

Based on lit-html An efficient, expressive, extensible HTML templating library for JavaScript

Slide 81

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 = [ ‘Milan’, ‘Codemotion Milan’, ‘Thank you’]; console.log( uppercaseExpressionI am so happy to be in ${expressions[0]} for ${expressions[1]} ! ${expressions[2]}, ${expressions[1]}! ) Little known functionality of template literals

Slide 82

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

Slide 83

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

Slide 84

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