Web components en 2018, on en est où?

Web components en 2018 On en est où ? Horacio Gonzalez @LostInBrittany #webcomponents @LostInBrittany

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

Horacio Gonzalez @LostInBrittany Spaniard lost in Brittany, developer, dreamer and all-around geek #webcomponents @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 @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 @LostInBrittany

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

Sometimes I feel a bit grumpy The stories of the grumpy old speaker... #webcomponents @LostInBrittany

On Polymer tour since 2014 #webcomponents @LostInBrittany

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

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

Is the promise unfulfilled? It's almost 2019, where is your revolution, dude? #webcomponents @LostInBrittany

Is it a conspiracy? #webcomponents @LostInBrittany

Am I only a dreamer? #webcomponents @LostInBrittany

Well, revolution IS there But it's a silent one... #webcomponents @LostInBrittany

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

The components architecture won Components, components everywhere #webcomponents @LostInBrittany

Web Components #webcomponents @LostInBrittany

We want the code! https://github.com/LostInBrittany/web-components-interop #webcomponents @LostInBrittany

A very basic web component class MyElement extends HTMLElement { // This gets called when the HTML parser sees your tag constructor() { super(); // always call super() first in the ctor. this.msg = 'Hello, Bordeaux JUG!'; } // Called when your element is inserted in the DOM or // immediately after the constructor if it’s already in the DOM connectedCallback() { this.innerHTML = <p>${this.msg}</p>; } } customElements.define('my-element', MyElement); #webcomponents @LostInBrittany

Custom Elements: ● Let you define your own HTML tag with bundled JS behavior ● Trigger lifecycle callbacks ● Automatically “upgrade” your tag when inserted in the document #webcomponents @LostInBrittany

Custom Elements don’t: ● Scope CSS styles ○ Shadow DOM ● Scope JavaScript ○ ES2015 ● “Reproject” children into <slot> elements ○ Shadow DOM #webcomponents @LostInBrittany

Adding ShadowDOM class MyElementWithShadowDom extends HTMLElement { // This gets called when the HTML parser sees your tag constructor() { super(); // always call super() first in the ctor. this.msg = 'Hello, Bordeaux JUG!'; this.attachShadow({ mode: 'open' }); } // Called when your element is inserted in the DOM or // immediately after the constructor if it’s already in the DOM connectedCallback() { this.shadowRoot.innerHTML = <p>${this.msg}</p>; } } customElements.define('my-element-with-shadowdom', MyElementWithShadowDom); #webcomponents @LostInBrittany

Adding ShadowDOM #webcomponents @LostInBrittany

Lifecycle callbacks class MyElementLifecycle extends HTMLElement { constructor() { // Called when an instance of the element is created or upgraded super(); // always call super() first in the ctor. } // Tells the element which attributes to observer for changes // This is a feature added by Custom Elements static get observedAttributes() { return []; } connectedCallback() { // Called every time the element is inserted into the DOM } disconnectedCallback() { // Called every time the element is removed from the DOM. } attributeChangedCallback(attrName, oldVal, newVal) { // Called when an attribute was added, removed, or updated } adoptedCallback() { // Called if the element has been moved into a new document } } #webcomponents @LostInBrittany

my-counter custom element class MyCounter extends HTMLElement { constructor() { super(); this._counter = 0; this.attachShadow({ mode: 'open' }); } connectedCallback() { this.render() } static get observedAttributes() { return [ 'counter' ] } attributeChangedCallback(attr, oldVal, newVal) { if (oldVal !== newVal) { this[attr] = newVal; } } #webcomponents @LostInBrittany

my-counter custom element get counter() { return this._counter; } set counter(value) { if (value != this._counter) { this._counter = Number.parseInt(value); this.setAttribute('counter', value); this.display(); } } increment() { this.counter = this.counter + 1; this.dispatchEvent(new CustomEvent( 'increased', {detail: {counter: this.counter}})); } #webcomponents @LostInBrittany

my-counter custom element render() { let button = document.createElement('button'); button.innerHTML = '+'; button.addEventListener('click', this.increment.bind(this)); this.shadowRoot.appendChild(button); this.output = document.createElement('span'); this.shadowRoot.appendChild(this.output); this.style.display = 'block'; this.style.fontSize = '5rem'; button.style.fontSize = '5rem'; button.style.borderRadius = '1rem'; button.style.padding = '0.5rem 2rem'; this.output.style.marginLeft = '2rem'; } display() { this.output.innerHTML = ${this.counter}; } #webcomponents @LostInBrittany

my-counter custom element #webcomponents @LostInBrittany

Polymer Adding syntactic sugar to the standard #webcomponents @LostInBrittany

Polymer has evolved in 2018 Image: © Nintendo Polymer 3 is here! #webcomponents @LostInBrittany

Classes, JavaScript modules... import {html, PolymerElement} from '/node_modules/@polymer/polymer/polymer-element.js'; class MyPolymerCounter extends PolymerElement { static get template() { <style> :host { font-size: 5rem; } button { font-size: 5rem; border-radius: 1rem; padding: 0.5rem 2rem; } </style> <button on-click="increment">+</button> <span>[[counter]]</span> `; } #webcomponents @LostInBrittany

But it's still mostly syntactic sugar static get properties() { return { counter: { type: Number, reflectToAttribute:true, value: 0 } }; } increment() { this.counter = Number.parseInt(this.counter) + 1; this.dispatchEvent(new CustomEvent('increased', {detail: {counter: this.counter}})); } } window.customElements.define('my-polymer-counter', MyPolymerCounter); #webcomponents @LostInBrittany

And they are still custom elements 100% interoperable #webcomponents @LostInBrittany

Interoperation pattern <div class="container"> <my-polymer-counter counter="[[value]]" on-increased="_onCounterChanged"></my-polymer-counter> <my-counter counter="[[value]]" on-increased="_onCounterChanged"></my-counter> </div> <div class="container"> <div class="value">Shared value: [[value]]</div> </div> Attributes for data in Events for data out #webcomponents @LostInBrittany

To infinity and beyond! There is a world outside Polymer #webcomponents @LostInBrittany

Lots of web components libraries For different need and sensibilities #webcomponents @LostInBrittany

Lots of web components libraries Angular Elements Vue Web Component Wrapper And the frameworks work on it too! #webcomponents @LostInBrittany

Slim.js #webcomponents @LostInBrittany

Slim.js #webcomponents @LostInBrittany

Slim.js ● Lightweight web component library ● Extended capabilities for components ○ data binding ● Using es6 native classes and modules ● Without Shadow DOM by default Like a lighter and lesser-featured Polymer #webcomponents @LostInBrittany

Slim.js import {Slim} from '/node_modules/slim-js/Slim.js' let template = <style> ... </style> <div class="container"> <div class="button" slim-id="button" click='increment'> <img src="./img/slim.png"> </div> <div class="value" bind> {{toString(counter)}} </div> </div>; Slim.tag('my-slim-counter', template, class extends Slim { ... }); #webcomponents @LostInBrittany

Slim.js class extends Slim { // native API static get observedAttributes () { return ['counter']; } // bind attributes to properties get autoBoundAttributes() { return ['counter']; } increment() { this.counter = this.counter + 1; this.dispatchEvent(new CustomEvent('increased', {detail: {counter: this.counter}})); } toString(value) { return value.toString(); } }); #webcomponents @LostInBrittany

Skatejs #webcomponents @LostInBrittany

Skatejs #webcomponents @LostInBrittany

Skatejs ● ● ● ● Lightweight web component library Abstracts away attribute / property semantics Very very fast Can use many renderers ○ Basic innerHTML (default) ○ preact ○ lit-html #webcomponents @LostInBrittany

Skatejs import { props, withComponent } from '/node_modules/skatejs/dist/es/index.js'; import withLitHtml from '/node_modules/@skatejs/renderer-lit-html/dist/es/index.js'; import { html } from '/node_modules/lit-html/lit-html.js'; class MySkateCounter extends withComponent(withLitHtml()){ static get props () { return { // By declaring the property an attribute, we can now pass an initial value // for the count as part of the HTML. counter: props.number({ attribute: true }) }; } #webcomponents @LostInBrittany

Skatejs render({ counter }) { return html<style> … <div class="container"> <button class="button" @click="${() => this.increment()}"> <img src="./img/skate.png" alt="Polymer"> </button> <div class="value">${counter}</div> </div>; } increment() { console.log('sdgws', this.counter) this.counter = Number.parseInt(this.counter) + 1; this.dispatchEvent(new CustomEvent('increased', {detail: {counter: this.counter}})); } } window.customElements.define('my-skate-counter', MySkateCounter); #webcomponents @LostInBrittany

Stencil A new breed of Web Components #webcomponents @LostInBrittany

Next generation Ionic Ionic 4 will be fully based on web components using a new toolkit: Stencil @LostInBrittany #webcomponents

New kid on the block Announced during Polymer Summit #webcomponents @LostInBrittany

Not another library A Web Component compiler #webcomponents @LostInBrittany

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

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

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

Hands on Stencil Clone the starter project git clone https://github.com/ionic-team/stencil-app-starter my-app cd my-app git remote rm origin npm install Start a live-reload server npm start #webcomponents @LostInBrittany

Hands on Stencil #webcomponents @LostInBrittany

Hands on Stencil #webcomponents @LostInBrittany

Some concepts render() { return ( <div>Hello {this.name}</div> ) } render() { return ( <div>{this.name ? <p>Hello {this.name}</p> : <p>Hello World</p>}</div> ); } JSX declarative template syntax #webcomponents @LostInBrittany

Some concepts import { Component } from '@stencil/core'; @Component({ tag: 'todo-list', styleUrl: 'todo-list.scss' }) export class TodoList { @Prop() color: string; @Prop() favoriteNumber: number; @Prop() isSelected: boolean; @Prop() myHttpService: MyHttpService; } Decorators #webcomponents @LostInBrittany

Some concepts import { Event, EventEmitter } from '@stencil/core'; ... export class TodoList { @Event() todoCompleted: EventEmitter; someAction(todo: Todo) { this.todoCompleted.emit(todo); } @Listen('todoCompleted') todoCompletedHandler(event: CustomEvent) { console.log('Received the custom todoCompleted event: ', event.detail); } } Events #webcomponents @LostInBrittany

Some concepts @Component({ tag: 'shadow-component', styleUrl: 'shadow-component.scss', shadow: true }) export class ShadowComponent { } Optional Shadow DOM #webcomponents @LostInBrittany

Some concepts stencil.config.js exports.config = { namespace: 'myname', generateDistribution: true, generateWWW: false, ... }; Generate distribution #webcomponents @LostInBrittany

Stencil import { Component, Prop, PropWillChange, State, Event, EventEmitter } from '@stencil/core'; @Component({ tag: 'stencil-counter', styleUrl: 'stencil-counter.scss', shadow: true }) export class StencilCounter { @Prop() counter: number; @State() currentCount: number; @Event() currentCountChanged: EventEmitter; @Watch('counter') counterChanged(newValue: number) { this.currentCount = newValue; } componentWillLoad() { this.currentCount = this.counter; } increase() { this.currentCount++; this.currentCountChanged.emit({ counter: this.currentCount }); } render() { return ( <div class="container"> <div class="button" onClick={() => this.increase()}> <img src="./img/stencil.png" /> </div> <div class="value" > {this.currentCount} </div> </div> ); } } #webcomponents @LostInBrittany

Conclusion That's all folks! #webcomponents @LostInBrittany