La quête des Web Components

1998 - 2017

Meetup AixJS

27/09/2017

Lior Chamla  

Développeur et Formateur

@LiiorC

Lior Chamla

Historique
Actualité
Tutorial

Le HTML ...

Revenons à la base de la notion de composant (élément)

<select>

</select>

Les éléments sont déclaratifs 

<select>
    <option value="s">Small</option>
    <option value="m">Medium</option>
    <option value="l">Large</option>
</select>

Les éléments sont "composables" 

<select name="size" multiple>
    <option value="s">Small</option>
    <option value="m">Medium</option>
    <option value="l" selected>Large</option>
</select>

Les éléments sont configurables 

select.onchange = function(){
    const idx = this.selectedIndex;
    const val = this.options[idx].value;
}

Les éléments ont des APIs

Simple, et pourtant ...

<section>, <video>, <article>, 
<nav>, <main>, <aside>, ...

Malgré les améliorations du W3C

Les développeurs n'ont pas pu aller aussi loin qu'ils le souhaitaient

<div class="sidebar">
    <div class="avatar medium">
        <span class="username">...</span>
        <span class="image"><img src="..." /></span>
    </div>
</div>

Pour rester EXPRESSIF

On a utilisé des moyens détournés (ids, classes, data-* ..)

La "Divs Soup" !

Principe

Etendre le langage HTML afin d'avoir des éléments personnalisés et réutilisables !

Améliorer la lisibilité et la sémantique des pages : donner du sens !

<meetup-presentation>

    <meetup-slide>

        <h1>Principe</h1>
        <p>....</p>
        <p>....</p>
        <code>...</code>

    </meetup-slide>

</meetup-presentation>

Interopérabilité : pouvoir les utiliser où on veut sur le net, sans librairie particulière

MS HTML Components 

  • 1998 - IE 5.5
  • Création de directives (attributs) personnalisées
  • Reposant sur JScript ou VBScript
  • Dépendant d'ActiveX
  • Ne fonctionne que sur IE
  • Abandonné en 2011 avec IE 10
  • 2001 - XML Binding Language
  • Enrichissement des éléments HTML existants
  • Composants écrits en XML
  • Ne fonctionne que sur les produits Mozilla (XUL)
  • 2007 - XBL 2
  • Abandonné en 2012

Mozilla XBL

Premiers problèmes

Propriétaires

Ca ne fonctionne que sur IE ou produits Mozilla (et pas entre eux ...)

Incomplets

On ne créé pas d'éléments (balises), mais uniquement des attributs

Angular (2013 -Google)

  • 2013 - AngularJS 
  • 2016 - Angular2
  • 2017 -  Angular4
  • Véritable Framework dédié aux SPA

React (2013 - Facebook)

  • 2013 - React JS
  • 2017 - React 16 (React Fiber)
  • Librairie orientée SPA

Basés sur la notion de composants

Encore des "problèmes"

Sémantique

Au niveau de la page, on ne voit que des balises classiques, la sémantique n'est pas améliorée

Réutilisation

Impossible à utiliser sans inclure les dépendances. Très dur d'utiliser les deux à la fois

Est-il possible d'arriver à un standard ?

  • Des nouveaux éléments HTML
  • Réutilisables
  • Interopérables
  • Natifs et universels 

2012 : Premier "draft" du W3C !

Les Web Components

Créons nous-mêmes le HTML que nous voulons !

C'est quoi ?

Un ensemble de standards récents qui permettent d'étendre HTML 

Pas un framework, pas une librairie, pas de databinding, de Virtual DOM, etc

HTML Templates
Custom Elements
Shadow DOM

HTML Imports

HTML Templates

<script 
    type="text/mustache" 
    id="my-template">

    <img src="">
    <h2></h2>

</script>
<template 
    id="my-template">

    <img src="">
    <h2></h2>

</template>

Avant ...

Maintenant !

HTML Imports

Importer des fichiers HTML

<link rel="import" href="un-fichier.html" />

Custom Elements

  • Pilier du concept WebComponent
     
  • Représente un élément personnalisé
     
  • Géré par une classe JS ES6
class HelloWorldElement 
      extends HTMLElement {

    constructor(){
        super()
        
        this.innerHTML = `
            <h1>Hello les bros !</h1>
        `
    }    

}

window.customElements.define(
                    'hello-world', 
                     HelloWorldElement)

Custom Elements, une API simple !

  • constructor()
  • connectedCallback()
  • disconnectedCallback()
  • attributeChangedCallback()
  • get observedAttributes()
  • adoptedCallback()

class HelloElement extends HTMLElement {

    static get observedAttributes(){}

    constructor(){
        // initialisation
    }
    connectedCallback(){
        // lors de l'ajout au DOM
    }
    disconnectedCallback(){
        // lors du retrait du DOM
    }   
    attributeChangedCallback(name, 
                             oldVal, 
                             newVal){
        // lors du changement 
        // d'un attribut
    }
}

Encapsulation avec le ShadowDOM

// Création du shadowRoot
this.attachShadow({mode: 'open'});
// Utilisation du shadowRoot
this.shadowRoot.innerHTML = 'Hello Bros !';

Le ShadowDOM est une partie du document qui est complètement encapsulée dans notre élément !

Allons y !

Créons un nouvel élément HTML !

<user-card></user-card>
<user-card 
        image="https://avatars.io/twitter/LiiorC" 
        full-name="Lior Chamla">

    <a href="#">🔍 Voir le profil</a>
    <a href="#">📧 Envoyer un mail</a>

</user-card>

A vous !

  • Supporté par Chrome & Opéra !
  • Des polyfills pour les autres 
  • Firefox, Opéra et Edge sont sur le coup ;-)

 

 

 

 

Renseignez vous sur 

webcomponents.org !

Librairies

  • Google Polymer 
  • Ionic Stencil
  • Bosonic
  • etc.

Merci !

Vous, quand vous écrivez des web components ;-)

Made with Slides.com