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
A...
Introduction - Historique
 Initié par Google depuis 2010 avec le projet Polymer,
relayé par Mozilla et d’autres acteurs d...
4 normes à la base de WebComponent
4
 Ecosystème HTML5
Custom element
HTML Template
Shadow DOM
HTML import
 Polyfill
imp...
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é...
7
Source http://webcomponents.org/
• Chrome: implémenté
• Opera: implémenté
• Firefox: en cours de dev.
• Safari: non impl...
Custom Element - principes
 Permet de définir nos propres balises HTML
 Peut avoir un rendu ou non
 Contient du code et...
Custom Element – Déclaration
 Instancier un Custom Element
De manière déclarative – la plus élégante
Dans le code via le ...
Custom Element – Comportement
 Ajouter des comportements
Utilisation de l’argument options
Créer un prototype dérivant de...
Custom Element – Comportement
 Exemple de code:
11
var proto = Object.create(HTMLElement.prototype);
proto.nom = ‘Mon Com...
Custom Element – Héritage
 Hériter d’une balise HTML existante
déclarer dans options de registerElement() avec mot clé ex...
Custom Element – Cycle de vie
 Des callbacks sur prototype pour nous aider à définir
notre Custom Element
createdCallback...
Custom Element – Exemple
14
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
this.in...
Custom Element – Conclusion
 Custom Element permet de créer ses propres balises
HTML
 Mixer des balises HTML dans des ch...
HTML Template pour aider à la
création d’interface
16
Source http://webcomponents.org/
• Chrome: implémenté
• Opera: implé...
HTML Template - Principe
 Avoir un format prédéfini réutilisable
 Ne pas avoir à recréer le même cadre à chaque fois
 C...
HTML Template - Principe
 Une déclaration simple en utilisant les balises
<template>…</template>
 Caractéristiques de ce...
HTML Template – exemple
19
<template id="badgeTemplate">
<link href="templateBadge.css" rel="stylesheet">
<b>Je suis un ba...
20
<script>
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
var content = document....
HTML Template – Conclusion
 HTMLTemplate facilite la création graphique des Custom
Element
Déclaration à l’aide de balise...
Object.observe() pour le
databinding
22
• Chrome: implémenté
• Opera: implémenté
• Firefox: non implémenté.
• Safari: non ...
Object.observe() pour le databinding
 Principe: être notifié nativement lors d’un changement
sur un objet JavaScript
 St...
Object.observe() – Principe
 Ajouter un handler pour tous les changements d’un objet
 Considérons l’exemple suivant
On a...
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
...
Shadow DOM pour
l’encapsulation
27
Source http://webcomponents.org/
• Chrome: implémenté
• Opera: implémenté
• Firefox: en...
Shadow DOM - Principes
 Shadow DOM permet de séparer le contenu de la
présentation tout en éliminant les conflits de noms...
Shadow DOM - Content
 La présentation est masquée dans le Shadow DOM
 Il faut pouvoir définir et insérer du contenu
La b...
Shadow DOM – Content – plus loin
 Possibilité de différentier les contenus
Les balises content peuvent être différenciées...
Shadow DOM pour les Web Components
 Quel intérêt pour nos Web Components ?
Utilisé directement sur le Custom Element, il ...
HTML Import pour réutiliser ses
Web Components
32
Source http://webcomponents.org/
• Chrome: implémenté
• Opera: implément...
HTML import - Introduction
 Custom Element, HTML Template et Shadow DOM
permettent de créer des Web Components, comment l...
HTML import - Principe
 Nouvelle définition de la balise link
 Permet d’importer le contenu de monComposant
href contien...
HTML import - règles
 Le fichier HTML importé
peut charger des ressources comme des scripts, css, images…
peut ne pas déc...
Conclusion
 Web Component s’appuie sur des standards HTML
Custom Element
HTML Template
Shadow DOM
HTML Import
 Tous les ...
LES FRAMEWORKS
37
Framework existants
 Polymer
Projet créé par Google en 2010, à l’origine du projet webcomponent.js
(polyfill)
Bibliothèqu...
DEMO POLYMER
39
Prochain SlideShare
Chargement dans…5
×

Introduction aux Web components (DNG Consulting)

741 vues

Publié le

Slides sur les WebComponents animée lors de Voxxed Algiers

Publié dans : Technologie
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
741
Sur SlideShare
0
Issues des intégrations
0
Intégrations
57
Actions
Partages
0
Téléchargements
15
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Introduction aux Web components (DNG Consulting)

  1. 1. Web Components Révolutionnez votre HTML avec les web components DNG Consulting http://www.dng-consulting.com V2.5
  2. 2. 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
  3. 3. 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. 4. 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
  5. 5. DÉFINIR UN WEB COMPONENT 5
  6. 6. 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. 7. 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
  8. 8. 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);
  9. 9. 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);
  10. 10. 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);
  11. 11. 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’);
  12. 12. 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>
  13. 13. 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 var proto = Object.create(HTMLElement.prototype); 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>
  14. 14. Custom Element – Exemple 14 var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function() { 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>
  15. 15. 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
  16. 16. HTML Template pour aider à la création d’interface 16 Source http://webcomponents.org/ • Chrome: implémenté • Opera: implémenté • Firefox: implémenté • Safari: implémenté • IE: en cours de considération
  17. 17. 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
  18. 18. 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);
  19. 19. 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> var b= document.querySelector("b"); b.addEventListener('click', function(ev) { 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. 20. 20 <script> var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function() { var content = document.querySelector('#badgeTemplate').content; this.appendChild(document.importNode(content, true)); }; 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}); <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
  21. 21. 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
  22. 22. Object.observe() pour le databinding 22 • Chrome: implémenté • Opera: implémenté • Firefox: non implémenté. • Safari: non implémenté • IE: en cours de considération
  23. 23. 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
  24. 24. 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);
  25. 25. Object.observe() – Principe  Exemple d’événements 25 Modification Logs de la console:
  26. 26. 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);
  27. 27. Shadow DOM pour l’encapsulation 27 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
  28. 28. 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>
  29. 29. 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 <style> p { color: Green; } </style> <p>Du texte dans ma page html</p> <div id="element">ZOE</div> <script> var foo = document.getElementById('element'); foo.createShadowRoot(); var p = document.createElement('p'); foo.shadowRoot.appendChild(p); p.innerHTML = ‘Mon nom est : <content/>'; </script>
  30. 30. 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 <style> p { color: Green; } </style> <p>Du texte dans ma page html</p> <div id="element">ZOE <nom>Hochedez</nom> Cindy</div> <script> var foo = document.getElementById('element'); foo.createShadowRoot(); var p = document.createElement('p'); foo.shadowRoot.appendChild(p); p.innerHTML = ‘’Mon nom est : <content select=‘nom’/><content/>’’; </script>
  31. 31. 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 proto.createdCallback = function() { //var content = document.querySelector('#badgeTemplate').content; //this.appendChild(document.importNode(content, true)); var shadow = this.createShadowRoot(); var content = document.querySelector('#badgeTemplate').content; shadow.appendChild(document.importNode(content, true)); };
  32. 32. HTML Import pour réutiliser ses Web Components 32 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
  33. 33. 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
  34. 34. 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’>
  35. 35. 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)’>
  36. 36. 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
  37. 37. LES FRAMEWORKS 37
  38. 38. 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
  39. 39. DEMO POLYMER 39

×