Introduction aux Web components (DNG Consulting)

Web Components Révolutionnez votre HTML avec les web components

DNG Consulting http://www.dng-consulting.com

V2.5

Introduction

Intérêt

Enrichir le Web avec de nouveaux tags

- Le standard HTML compte une centaine de balises seulement

Aider à la réutilisation de code – éviter le copier-coller

Principes

Créer de nouvelles balises

Encapsuler le code afin de masquer et isoler sa complexité

Pouvoir importer et déclarer les balises dans d’autres projets/pages

2

Introduction - Historique

Initié par Google depuis 2010 avec le projet Polymer,

relayé par Mozilla et d’autres acteurs du web

Basé sur des standards en cours au W3C

Chrome 36 premier navigateur compatible

La technologie « Polyfill » pour les navigateurs plus

anciens

Librairie webcomponents.js remplaçant platform.js (depuis fin 2014,

avec le transfert de la librairie de Polymer vers WebComponents.org)

3

4 normes à la base de WebComponent

4

Ecosystème HTML5

Custom element

HTML Template

Shadow DOM

HTML import

Polyfill

importer webcomponents.js

Framework facilitant la création de

Web Component

Polymer

X-Tag

Bosonic

DÉFINIR UN WEB COMPONENT

5

Introduction

Qu’est-ce qu’un Web Component ?

Identifier les technologies permettant leur création

Il faut pouvoir

définir de nouvelles balises

ajouter du contenu

encapsuler sa définition

réutiliser les composants

6

7

Source http://webcomponents.org/

• Chrome: implémenté

• Opera: implémenté

• Firefox: en cours de dev.

• Safari: non implémenté

• IE: en cours de considération

Spécification Custom Elements

Custom Element - principes

Permet de définir nos propres balises HTML

Peut avoir un rendu ou non

Contient du code et/ou du contenu HTML

Pour le créer:

tag-name est le nom de la balise. Doit contenir au moins un ‘-’

options sont principalement le prototype et extend

retourne le constructeur qui permet d’instancier la balise

Et <element></element> ?

La spécification n’a jamais aboutie et semble être délaissée depuis août

2013 8

var constructor = document.registerElement(tag-name, options);

Custom Element – Déclaration

Instancier un Custom Element

De manière déclarative – la plus élégante

Dans le code via le constructeur

Dans le code via document.createElement() – la plus classique en JS

9

var MyComponent = document.registerElement(‘mon-composant');

var dom = new MyComponent();

document.body.appendChild(dom);

<script> document.registerElement(‘mon-composant'); </script>

<mon-composant></mon-composant>

document.registerElement(‘mon-composant');

var dom = document.createElement(‘mon-composant');

document.body.appendChild(dom);

Custom Element – Comportement

Ajouter des comportements

Utilisation de l’argument options

Créer un prototype dérivant de HTMLElement

Définir les nouveaux comportements à partir de ce prototype

- Attributs

- fonctions

10

document.registerElement(tag-name, options);

Custom Element – Comportement

Exemple de code:

11

var proto = Object.create(HTMLElement.prototype);

proto.nom = ‘Mon Composant';

proto.afficheNom = function() {

console.log(‘Nom de la balise : ' + this.nom);

};

document.registerElement(‘mon-composant', {prototype: proto });

var dom = document.createElement(‘mon-composant’);

Custom Element – Héritage

Hériter d’une balise HTML existante

déclarer dans options de registerElement() avec mot clé extends

dériver du prototype de l’élément HTML hérité

Utilisation

12

document.registerElement(‘mon-champs-saisie', {

extends: 'input',

prototype: Object.create(HTMLInputElement.prototype)

});

Doivent correspondre

<input is=“mon-champs-saisie”></input>

Custom Element – Cycle de vie

Des callbacks sur prototype pour nous aider à définir

notre Custom Element

createdCallback() appelé après la creation de l’élément

attachedCallback() appelé lors de l’attachement au DOM

detachedCallback() appelé lors du détachement au DOM

attributeChangedCallback() appelé lors d’un changement attribut

Exemple

13


proto.createdCallback = function() {

var div = document.createElement('div');

div.textContent = ‘Le contenu de mon composant';

this.appendChild(div);

};

document.registerElement(‘mon-composant', {prototype: proto)});

<mon-composant>

<div>Le contenu de mon composant</div>

</mon-composant>

Custom Element – Exemple

14



this.innerHTML = "<style>.outer { border: 2px solid #347fac; border-radius: 1em; background: #347fac; font-size: 20pt;

width: 12em; height: 7em; text-align: center;}.title {color: white; font-family: sans-serif; padding: 0.5em;}.name {color:

black; background: white; font-size: 45pt; padding-top: 0.2em;} </style><b>Je suis un badge DNG</b><div

class='outer'><div class='title'></div><div class='name'></div></div>";

};

proto.attachedCallback = function(){

var self = this;

var b= document.querySelector("b");

b.addEventListener('click', function(ev) {

var event = new CustomEvent(‘click-title', { 'detail': ev });

self.dispatchEvent(event);

});

var titleDiv= document.querySelector(".title");

titleDiv.innerHTML = this.getAttribute("label");

var nameDiv= document.querySelector(".name");

nameDiv.innerHTML = this.getAttribute("nom");

};

document.registerElement(‘dng-badge', {prototype: proto});

<dng-badge label="Badge de:" nom="ZOE"/>

<script>

var dom = document.querySelector('dng-badge');

dom.addEventListener(‘click-title', function(e) {

alert('Clique sur le titre');

});

</script>

Custom Element – Conclusion

Custom Element permet de créer ses propres balises

HTML

Mixer des balises HTML dans des chaînes de caractères

(innerHTML) n’est pas une solution très viable pour des

interfaces complexes

15

HTML Template pour aider à la

création d’interface

16




• Firefox: implémenté

• Safari: implémenté


HTML Template - Principe

Avoir un format prédéfini réutilisable

Ne pas avoir à recréer le même cadre à chaque fois

Concept existant dans le web, mais côté serveur comme

Apache Velocity en Java

Django en Python

Smarty en PHP

Et bien d’autres…

Peu de solutions côté client (exécuté dans le navigateur)

17

HTML Template - Principe

Une déclaration simple en utilisant les balises

<template>…</template>

Caractéristiques de cet élément

Son contenu n’est pas visible par le moteur de rendu du navigateur

Les scripts ne s’exécutent pas, les images ne sont pas chargées, …

Le contenu n’est pas considéré comme attaché au DOM

(document.getElementById() ou querySelector() ne fonctionnent pas)

Il peut être placé n’importe où dans la page HTML

Activer un template

18

var t = document.querySelector(‘template’);

var clone = document.importNode(t.content, true);

document.body.appendChild(clone);

HTML Template – exemple

19

<template id="badgeTemplate">

<link href="templateBadge.css" rel="stylesheet">

<b>Je suis un badge DNG</b>

<div class='outer'>

<div class='title'></div>

<div class='name'></div>

</div>

<script>



alert("clique sur le titre !");

});

alert("Template actif");

</script>

</template>

<script>

var content = document.querySelector('#badgeTemplate').content;

content.querySelector(".title").innerHTML = "Badge de:";

content.querySelector(".name").innerHTML = "ZOE";

document.body.appendChild(document.importNode(content, true));

</script>

templateBadge.css

.outer {

border: 2px solid #347fac;

border-radius: 1em;

background: #347fac;

font-size: 20pt;

width: 12em;

height: 7em;

text-align: center;

}

.title {

color: white;

font-family: sans-serif;

padding: 0.5em;

}

.name {

color: black;

background: white;

font-size: 45pt;

padding-top: 0.2em;

}

Exemple de script en utilisant la spécification Template

20

<script>




this.appendChild(document.importNode(content, true));

};

proto.attachedCallback = function(){

var self = this;



var event = new CustomEvent(‘click-title', { 'detail': ev });

self.dispatchEvent(event);

});

var titleDiv= document.querySelector(".title");

titleDiv.innerHTML = this.getAttribute("label");

var nameDiv= document.querySelector(".name");

nameDiv.innerHTML = this.getAttribute("nom");

};

document.registerElement(‘dng-badge', {prototype: proto});

<script>

<dng-badge label="Badge de:" nom="ZOE"/>

<script>

var dom = document.querySelector('dng-badge');

dom.addEventListener(‘click-title', function(e) {

alert('Click sur le titre');

});

</script>

HTML Template – Custom Element

Script modifié pour

une utilisation via les

Web Component

HTML Template – Conclusion

HTMLTemplate facilite la création graphique des Custom

Element

Déclaration à l’aide de balise simple à lire et à maintenir

les ressources déclarées dans le template sont inactives tant qu’on ne

l’instancie pas.

Comment s’assurer que ce que l’on déclare dans le

template s’affichera comme il a été défini?

Concurrence des styles CSS, …

Peut-on aller plus loin dans la séparation présentation et

données ?

Peut-on imaginer du databinding ?

21

Object.observe() pour le

databinding

22



• Firefox: non implémenté.



Object.observe() pour le databinding

Principe: être notifié nativement lors d’un changement

sur un objet JavaScript

Standard prévu pour ECMAScript 7

20 à 40 fois plus rapide qu’une bibliothèque tierce

Benchmark AngularJS en 2012, 40 ms pour une mise à jour alors que

Object.observe() met 1-2 ms pour la même.

Intérêts:

Séparation des couches Modèle et Vue

Les notifications sont asynchrones

23

Object.observe() – Principe

Ajouter un handler pour tous les changements d’un objet

Considérons l’exemple suivant

On a un modèle, on définit un handler et on lie le handler aux

changements du modèle avec Object.observe()

Pour arrêter l’écoute: 24

var model = {name: ‘ZOE’, sex: ‘Female’, color: ‘blue’}

function handler(changes){

changes.forEach(function(change, i) {

console.log('propriété modifiée: ' + change.name);

console.log('nature du changement: ' + change.type);

console.log(‘nouvelle valeur: ' + change.object[change.name]); });

}

Object.observe(model, handler);

Object.observe(model_a_observer, observer);

Object.unobserve(model_a_observer, observer);

Object.observe() – Principe

Exemple d’événements

25

Modification

Logs de la console:

Object.observe() – Et encore plus…

Possibilité d’observer les Tableau

Obtenir les changements en cours tout de suite

Créer ses propres notifications groupées

Ne pas être notifié unitairement mais pour un ensemble défini.

Utile pour les modèles avec énormément de données (cas de grosses

applications)

- Type_creer: le nom du type de changement qui sera notifié (et à écouter)

- Action: une fonction contenant les actions de modifications faites avant la

notification. Peut renvoyer un objet dont les champs seront ajoutés à l’objet

change

26

Object.getNotifier(model).performChange(type_creer, action);

Array. observe(model_a_observer, observer);

Object.deliverChangeRecords(observer);

Shadow DOM pour

l’encapsulation

27







Shadow DOM - Principes

Shadow DOM permet de séparer le contenu de la

présentation tout en éliminant les conflits de noms

Permet de cacher toute la cuisine interne d’un composant

Permet d’encapsuler les styles naturellement

Principe

Créer un shadow DOM sur un élément HTML comme un Div

Ajouter du contenu

28

<style> p { color: Green; } </style>

<p>Du texte dans ma page html</p>

<div id="element"></div>

<script>

var foo = document.getElementById('element');

foo.createShadowRoot();

var p = document.createElement('p');

foo.shadowRoot.appendChild(p);

p.textContent = 'Du texte dans le shadow DOM';

</script>

Shadow DOM - Content

La présentation est masquée dans le Shadow DOM

Il faut pouvoir définir et insérer du contenu

La balise <content> permet d’identifier des points d’insertion

Le texte mis entre les balises sera inséré en lieu et place de <content>

29



<div id="element">ZOE</div>

<script>





p.innerHTML = ‘Mon nom est : <content/>';

</script>

Shadow DOM – Content – plus loin

Possibilité de différentier les contenus

Les balises content peuvent être différenciées avec l’attribut select

select correspond au nom d’une balise, un ID ou même la classe CSS

Pas d’attribut select correspond au texte par défaut (sans balise)

Si plusieurs content identiques, seule la première est utilisée

Plusieurs balises identiques, leurs contenus seront ajoutés l’un après

l’autre à la place du content correspondant

30



<div id="element">ZOE <nom>Hochedez</nom> Cindy</div>

<script>





p.innerHTML = ‘’Mon nom est : <content select=‘nom’/><content/>’’;

</script>

Shadow DOM pour les Web Components

Quel intérêt pour nos Web Components ?

Utilisé directement sur le Custom Element, il permet de masquer la

complexité du composant

Les styles de la nouvelle balise ne seront pas en conflit avec d’autres

utilisations de Template

En reprenant l’exemple vu dans le chapitre Template

Le code commenté est la version précédente

31


//var content = document.querySelector('#badgeTemplate').content;

//this.appendChild(document.importNode(content, true));

var shadow = this.createShadowRoot();


shadow.appendChild(document.importNode(content, true));

};

HTML Import pour réutiliser ses

Web Components

32







HTML import - Introduction

Custom Element, HTML Template et Shadow DOM

permettent de créer des Web Components, comment les

réutiliser?

On peut actuellement charger les éléments JS, CSS et

HTML séparément

Imaginez la complexité si vous importez des Web

Components qui utilisent eux aussi d’autres Web

Components

Ou utiliser une iframe, ou encore du code JS… Pas très

élégant

33

HTML import - Principe

Nouvelle définition de la balise link

Permet d’importer le contenu de monComposant

href contient le chemin vers le fichier html

HTML import va charger le document HTML, résoudre le

chargement des sous-ressources et exécuter le code

JavaScript.

Le contenu n’est pas affiché automatiquement à l’endroit de l’import

Du code doit être écrit pour réaliser cet affichage

Les balises de rendu ne sont pas ajoutées au DOM, mais les balises

style, script, link sont bien exécutées.

34

<link rel=‘import’ href=‘monComposant.html’>

HTML import - règles

Le fichier HTML importé

peut charger des ressources comme des scripts, css, images…

peut ne pas déclarer de balises html, head, body, doctype.

Plusieurs import HTML faisant référence à la même URL

ne sera importé et exécuté qu’une seule fois

Les restrictions Cross-domain s’appliquent

voir CORS (Cross Origin Resource Sharing) si besoin

Possibilité de gérer les erreurs de chargements

35

<link rel=‘import’ href=‘monComposant.html’

onload=‘handleLoad(event)’

onerror=‘handleError(event)’>

Conclusion

Web Component s’appuie sur des standards HTML

Custom Element

HTML Template

Shadow DOM

HTML Import

Tous les navigateurs ne les implémentent pas, mais

webcomponent.js permet de palier en grande partie à ces

manques

Reste tout de même beaucoup de code à écrire pour

simplement déclarer nos Web Component

Des Frameworks peuvent nous aider à gagner en

efficacité 36

LES FRAMEWORKS

37

Framework existants

Polymer

Projet créé par Google en 2010, à l’origine du projet webcomponent.js

(polyfill)

Bibliothèque de composant Elements, la plus riche

Syntaxe déclarative, databinding, gesture

X-Tags : projet initié par la fondation Mozilla officialisé en

Janvier 2013

Aucune syntaxe déclarative

Propose une bibliothèque de composants (Brick)

Moins riche fonctionnellement que Element de Polymer

Bosonic

Publié en 2014, un seul contributeur, supporte IE 9, Approche

différente de Polymer et X-Tags, utilise un compilateur/traducteur 38

DEMO POLYMER

39

Introduction aux Web components (DNG Consulting)

Technology

Transcript of Introduction aux Web components (DNG Consulting)