A presentation at JFokus in in Stockholm, Sweden by Horacio Gonzalez
Are Web Components the Betamax of web development? Horacio Gonzalez @LostInBrittany
Who are we? Introducing myself and introducing OVH OVHcloud
Horacio Gonzalez @LostInBrittany Spaniard lost in Brittany, developer, dreamer and all-around geek Flutter
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
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
Sometimes I feel a bit grumpy The stories of the grumpy old speaker…
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
On Web Components tour since 2014
Image: bu.edu Web components == Revolution
Images: BitRebels & Brickset Building a world brick by brick
Is the promise unfulfilled? It’s 2019 now, where is your revolution, dude?
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…
The 3 minutes context What the heck are web component?
Web Components Web standard W3C
Web Components Available in all modern browsers: Firefox, Safari, Chrome
Web Components Create your own HTML tags Encapsulating look and behavior
Web Components Fully interoperable With other web components, with any framework
Web Components CUSTOM ELEMENTS SHADOW DOM TEMPLATES
Custom Element To define your own HTML tag <body> … <script> window.customElements.define(‘my-element’, class extends HTMLElement {…}); </script> <my-element></my-element> </body>
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>
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);
But in fact, it’s just an element… ● ● ● ● Attributes Properties Methods Events
Hey, old man, WTF is a Betamax? A videocassette guide for Millenials
At the beginning there was the TV And public saw it was good…
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
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
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…
There was a format war So fierce that it has its own Wikipedia page
Betamax was a superior format Higher quality recorders, better resolution, slightly superior sound, and more stable image
But the market decided otherwise And Betamax, even if superior, failed…
As usual, the winner took it all Until a new arrival entered in scene, the DVD… But that’s another story for another talk
Why did Betamax failed? Spoiler: it isn’t so simple…
Betamax was believed to be superior In the minds of the public and press
But consumers wanted an affordable VCR Betamax costed hundreds of dollars more
They also wanted to record a full movie Originally Betamax cassettes only recorded 1 hour
And compatibility weighted on VHS side Many licencees offered VHS VCRs
Are Web Components like Betamax? A perceived superior alternative destined to fail?
It could be even the opposite… Web components are maybe the VHS of JS
Compatibility is on Web Components side Web Components everywhere, baby!
Do you remember AngularJS? And all the code put in the trash bin when Angular arrived…
The pain of switching frameworks? Rewriting once again your code…
The impossibility of sharing UI code? Between apps written with different frameworks
Web Components change that In a clean and standard way
They are indeed a revolution But it’s a silent one…
They are there, in everyday sites More than you can imagine
The components architecture won Components, components everywhere
Web components ARE platform Truly part of the platform…
Aren’t the multiple Web Components libs a sign of failure? If the standard worked, people would use Vanilla, wouldn’t them?
Web component standard is low level At it should be!
Standard == basic bricks Standard exposes an API to: ○ Define elements ○ Encapsulate DOM
Libraries are helpers They give you higher-level primitives
Different high-level primitives Each one tailored to a use
Sharing the same base High-performant, low-level, in-the-platform web components standard
Libraries aren’t a failure of standard They happen by design
Stencil Powering Ionic 4+
Not another library A Web Component toolchain
A mature technology Ionic 4 released on year ago, powered by Stencil!
Built by the Ionic team Tired of putting good code in the trash bin…
A build time tool To generate standard web components
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
And the cherry on the cake Server-Side Rendering
Stencil leverages the web platform Working with the web, not against it
Polymer Is the old player still alive?
Polymer evolved again in 2018 Image: © Nintendo Polymer 3 was here!
What’s Polymer status today? Well, how could I say… it’s complicated
It seems it’s going to be deprecated… Technically yes… and that means good news!
Let’s try to see clearer Let’s dive into Polymer history…
A tool built for another paradigm No web component support on browsers No React, Angular or Vue innovations
No so well suited for the current one The current platform is way more powerful The state of art has evolved
Let’s learn from its lessons The current platform is way more powerful The state of art has evolved
And let it rest… There will have no Polymer 4…
So Polymer as we know it is dead… But the Polymer Project is indeed alive!
But I have invested so much on it! What to do?
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!
And without metaphors? Polymer Project != Polymer library Polymer Project well alive Polymer library was only one library
LitElement New kid on the block
Born from the Polymer team For the new web paradigm
Modern lightweight web components For the new web paradigm
Based on lit-html An efficient, expressive, extensible HTML templating library for JavaScript
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
lit-html Templates
let myTemplate = (data) => html<h1>${data.title}</h1> <p>${data.body}</p>;
Lazily rendered Generates a TemplateResult
It’s a bit like JSX, isn’t it? The good sides of JSX… but in the standard!
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
One more thing…* Let’s copy from the master
Polymer is not important WebComponents ARE
Use the Platform, Luke… WebComponents ARE native
Do you love your framework? Oh yeah, we all do
Would you marry your framework? Like until death…
How much does cost the divorce? Do you remember when you dropped AngularJS for Angular?
Why recode everything again? Reuse the bricks in your new framework
Lots of web components libraries LitElement SkateJS For different need and sensibilities
And some good news Angular Elements Vue Web Component Wrapper Frameworks begin to understand it
So for your next app Choose a framework, no problem… But please, help your future self Use Web Components!
Conclusion That’s all, folks!
I have been speaking and writing about web components for years, and last year in a conference somebody asked me a question that hurt: “After all this time, do you still believe in Web Components? React has won, man, and your Web Components will go down the way of Betamax…”.
In this talk we will see that in 2020 Web Components are far from dead, they are part of the platform, used everywhere. The revolution has already come, but it’s a silent one. Let’s look at it together!
Here’s what was said about this presentation on social media.
