Développons une application Web en 2019

Développer une application en JS n'est plus simple...

Ça va trop vite ...

I think I've had milk last longer than some JavaScript frameworks.

— I Am Devloper (@iamdevloper) December 4, 2014

...Interopérabilité ne vient plus gratuitement...

Toute cette complexité doit s'arrêter avec les Web Components

• Spécifier par le World Wide Web Consortium (W3C)

• Débuté en 2012

Les Custom Elements sont la capacité de créer un balise HTML avec ses propres attributs et méthodes

Le Shadow DOM fournit l'encapsulation du DOM et du CSS

Définit un bloc d'HTML réutilisable au moment de l'exécution

class PopUpInfo extends HTMLElement {
	constructor() {
		super();
		// ...
	}
	// ...
}

customElements.define('popup-info', PopUpInfo);

• Supported
• Partial Support
• Not Supported

• Supported
• Partial Support
• Not Supported

StencilJS n'est pas un autre framework

StencilJS c'est un compileur qui génère des web components

import {Component, Prop} from '@stencil/core';

@Component({
    tag: 'my-first-component',
    styleUrl: 'my-first-component.scss'
})
export class MyComponent {
    // Indicate that name should be
    // a public property on the component
    @Prop() name: string;

    render() {
        // JSX
        return (<p>My name is {this.name}</p>);
    }
}

Utilise la bibliothèque de template lit-html

• 4.4k ⭐️ sur github

• Basé sur les templates HTML

• Avec les Template literals de ES2015

import {html, render} from 'lit-html';

// A lit-html template uses
// the `html` template tag:
const sayHello = (name) =>
	html`<h1>Hello ${name}</h1>`;

// It's rendered with the `render()` function:
render(sayHello('World'), document.body);

// And re-renders only update the
// data that changed, without VDOM diffing!
render(sayHello('Everyone'), document.body);

import { LitElement, html, css } from 'https://unpkg.com/lit-element/lit-element.js?module';

class MyElement extends LitElement {
	static get properties() {
		return {
			mood: { type: String }
		}
	}
	static get styles() {
		return css`.mood { color: green; }`;
	}
	render() {
		return html`Web Components are 
			<span class="mood">${this.mood}</span>!`;
	}
}

customElements.define('my-element', MyElement);

import { /* ... */ } from 'lit-element';

@customElement('my-element')
class MyElement extends LitElement {

	@property({ type: String }) mood;

	static get styles() {
		return css`.mood { color: green; }`;
	}

	render() {
		return html`Web Components are 
			<span class="mood">${this.mood}</span>!`;
	}
}

✅ Chrome, Safari, Opera, Firefox

polyfills pour Edge et IE 11