SlideShare uma empresa Scribd logo
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
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>
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>
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
Source http://webcomponents.org/
• Chrome: implémenté
• Opera: implémenté
• Firefox: implémenté
• Safari: implémenté
• IE: en cours de considération
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>
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
<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
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
• Chrome: implémenté
• Opera: implémenté
• Firefox: non implémenté.
• Safari: non implémenté
• IE: en cours de considération
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
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
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
<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>
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>
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));
};
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
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

Mais conteúdo relacionado

Mais procurados

Les dessous du framework spring
Les dessous du framework springLes dessous du framework spring
Les dessous du framework spring
Antoine Rey
 
ENIB cours CAI Web - Séance 3 - JSP/Servlet - Cours
ENIB cours CAI Web - Séance 3 - JSP/Servlet - CoursENIB cours CAI Web - Séance 3 - JSP/Servlet - Cours
ENIB cours CAI Web - Séance 3 - JSP/Servlet - CoursHoracio Gonzalez
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
ENSET, Université Hassan II Casablanca
 
Workshop Spring - Session 5 - Spring Integration
Workshop Spring - Session 5 - Spring IntegrationWorkshop Spring - Session 5 - Spring Integration
Workshop Spring - Session 5 - Spring Integration
Antoine Rey
 
Bean Validation - Cours v 1.1
Bean Validation - Cours v 1.1Bean Validation - Cours v 1.1
Bean Validation - Cours v 1.1
Laurent Guérin
 
Support programmation orientée aspect mohamed youssfi (aop)
Support programmation orientée aspect mohamed youssfi (aop)Support programmation orientée aspect mohamed youssfi (aop)
Support programmation orientée aspect mohamed youssfi (aop)
ENSET, Université Hassan II Casablanca
 
Support programmation orientée objet c# .net version f8
Support programmation orientée objet c#  .net version f8Support programmation orientée objet c#  .net version f8
Support programmation orientée objet c# .net version f8
ENSET, Université Hassan II Casablanca
 
Introduction à ajax
Introduction à ajaxIntroduction à ajax
Introduction à ajax
Abdoulaye Dieng
 
Rapport tp3 j2ee
Rapport tp3 j2eeRapport tp3 j2ee
Rapport tp3 j2ee
Soukaina Boujadi
 
Rapport tp2 j2ee
Rapport tp2 j2eeRapport tp2 j2ee
Rapport tp2 j2ee
Soukaina Boujadi
 
Support de cours entrepise java beans ejb m.youssfi
Support de cours entrepise java beans ejb m.youssfiSupport de cours entrepise java beans ejb m.youssfi
Support de cours entrepise java beans ejb m.youssfi
ENSET, Université Hassan II Casablanca
 
Tester unitairement une application java
Tester unitairement une application javaTester unitairement une application java
Tester unitairement une application java
Antoine Rey
 
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
ENSET, Université Hassan II Casablanca
 
Bbl microservices avec vert.x cdi elastic search
Bbl microservices avec vert.x cdi elastic searchBbl microservices avec vert.x cdi elastic search
Bbl microservices avec vert.x cdi elastic search
Idriss Neumann
 
Cours design pattern m youssfi partie 6 proxy
Cours design pattern m youssfi partie 6 proxyCours design pattern m youssfi partie 6 proxy
Cours design pattern m youssfi partie 6 proxy
ENSET, Université Hassan II Casablanca
 
Tp java ee.pptx
Tp java ee.pptxTp java ee.pptx
Tp java ee.pptx
Eric Bourdet
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
ENSET, Université Hassan II Casablanca
 
Aspect avec AspectJ
Aspect avec AspectJAspect avec AspectJ
Aspect avec AspectJ
simeon
 
Maven et industrialisation du logiciel
Maven et industrialisation du logicielMaven et industrialisation du logiciel
Maven et industrialisation du logiciel
ENSET, Université Hassan II Casablanca
 
Architecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesArchitecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependances
ENSET, Université Hassan II Casablanca
 

Mais procurados (20)

Les dessous du framework spring
Les dessous du framework springLes dessous du framework spring
Les dessous du framework spring
 
ENIB cours CAI Web - Séance 3 - JSP/Servlet - Cours
ENIB cours CAI Web - Séance 3 - JSP/Servlet - CoursENIB cours CAI Web - Séance 3 - JSP/Servlet - Cours
ENIB cours CAI Web - Séance 3 - JSP/Servlet - Cours
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
 
Workshop Spring - Session 5 - Spring Integration
Workshop Spring - Session 5 - Spring IntegrationWorkshop Spring - Session 5 - Spring Integration
Workshop Spring - Session 5 - Spring Integration
 
Bean Validation - Cours v 1.1
Bean Validation - Cours v 1.1Bean Validation - Cours v 1.1
Bean Validation - Cours v 1.1
 
Support programmation orientée aspect mohamed youssfi (aop)
Support programmation orientée aspect mohamed youssfi (aop)Support programmation orientée aspect mohamed youssfi (aop)
Support programmation orientée aspect mohamed youssfi (aop)
 
Support programmation orientée objet c# .net version f8
Support programmation orientée objet c#  .net version f8Support programmation orientée objet c#  .net version f8
Support programmation orientée objet c# .net version f8
 
Introduction à ajax
Introduction à ajaxIntroduction à ajax
Introduction à ajax
 
Rapport tp3 j2ee
Rapport tp3 j2eeRapport tp3 j2ee
Rapport tp3 j2ee
 
Rapport tp2 j2ee
Rapport tp2 j2eeRapport tp2 j2ee
Rapport tp2 j2ee
 
Support de cours entrepise java beans ejb m.youssfi
Support de cours entrepise java beans ejb m.youssfiSupport de cours entrepise java beans ejb m.youssfi
Support de cours entrepise java beans ejb m.youssfi
 
Tester unitairement une application java
Tester unitairement une application javaTester unitairement une application java
Tester unitairement une application java
 
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
 
Bbl microservices avec vert.x cdi elastic search
Bbl microservices avec vert.x cdi elastic searchBbl microservices avec vert.x cdi elastic search
Bbl microservices avec vert.x cdi elastic search
 
Cours design pattern m youssfi partie 6 proxy
Cours design pattern m youssfi partie 6 proxyCours design pattern m youssfi partie 6 proxy
Cours design pattern m youssfi partie 6 proxy
 
Tp java ee.pptx
Tp java ee.pptxTp java ee.pptx
Tp java ee.pptx
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
 
Aspect avec AspectJ
Aspect avec AspectJAspect avec AspectJ
Aspect avec AspectJ
 
Maven et industrialisation du logiciel
Maven et industrialisation du logicielMaven et industrialisation du logiciel
Maven et industrialisation du logiciel
 
Architecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesArchitecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependances
 

Destaque

Introductions
IntroductionsIntroductions
Introductions
Alistair Croll
 
Albert t. clay a hebrew deluge story in cuneiform, and other epic fragments...
Albert t. clay   a hebrew deluge story in cuneiform, and other epic fragments...Albert t. clay   a hebrew deluge story in cuneiform, and other epic fragments...
Albert t. clay a hebrew deluge story in cuneiform, and other epic fragments...
Elisabeth Curiel
 
Energy and Power
Energy and PowerEnergy and Power
Energy and Power
Ed Stermer
 
Graphical methods for 2 d heat transfer
Graphical methods for 2 d heat transfer Graphical methods for 2 d heat transfer
Graphical methods for 2 d heat transfer
Arun Sarasan
 
Cabildo abierto distrital sobre educacion tecnica industrial bogota
Cabildo abierto distrital sobre educacion tecnica industrial bogotaCabildo abierto distrital sobre educacion tecnica industrial bogota
Cabildo abierto distrital sobre educacion tecnica industrial bogota
Jose Mecanico
 
درمان دیابت نوع یک و دو با خام گیاهخواری
درمان دیابت نوع یک و دو با خام گیاهخواریدرمان دیابت نوع یک و دو با خام گیاهخواری
درمان دیابت نوع یک و دو با خام گیاهخواری
Farid Kamali
 
Illinois Petroleum
Illinois PetroleumIllinois Petroleum
Illinois Petroleum
Ed Stermer
 
[Harry edmar]hydrodynamics concepts and experiments
[Harry edmar]hydrodynamics concepts and experiments[Harry edmar]hydrodynamics concepts and experiments
[Harry edmar]hydrodynamics concepts and experiments
Enrique Buenaonda
 
Aminoasit
AminoasitAminoasit
Aminoasit
Saeed Gholami
 
STEP BY STEP USING SPACE GASS DESIGN PLATFORM
STEP BY STEP USING SPACE GASS DESIGN PLATFORMSTEP BY STEP USING SPACE GASS DESIGN PLATFORM
STEP BY STEP USING SPACE GASS DESIGN PLATFORM
Aluhisadin La Ode
 
üDs sg16 dnm snv
üDs sg16 dnm snvüDs sg16 dnm snv
üDs sg16 dnm snvgkmilao7
 
بیشعوری دکتر خاویر کرمنت
بیشعوری   دکتر خاویر کرمنتبیشعوری   دکتر خاویر کرمنت
بیشعوری دکتر خاویر کرمنت
Farid Kamali
 
Tabelas conexoes
Tabelas conexoesTabelas conexoes
Tabelas conexoes
Glauber Rodrigues
 
SENI RUPA TERAPAN
SENI RUPA TERAPANSENI RUPA TERAPAN
SENI RUPA TERAPAN
Wahyudi Arsyad
 
2350475 globalization-diets-and-ncd-who-2002
2350475 globalization-diets-and-ncd-who-20022350475 globalization-diets-and-ncd-who-2002
2350475 globalization-diets-and-ncd-who-2002
Elisabeth Curiel
 
Transhumanist Declaration
Transhumanist Declaration Transhumanist Declaration
Transhumanist Declaration
MJSL 2050
 
Human Enhancement - A Reasoned Pro Approach
Human Enhancement - A Reasoned Pro ApproachHuman Enhancement - A Reasoned Pro Approach
Human Enhancement - A Reasoned Pro Approach
University of Salford, Manchester
 
Mechanics scheme
Mechanics schemeMechanics scheme
Mechanics scheme
marco garofanello
 
ما خدا رو گم کرده ایم
ما خدا رو گم کرده ایم  ما خدا رو گم کرده ایم
ما خدا رو گم کرده ایم
Farid Kamali
 
260353823_Technical Paper 1 final draft
260353823_Technical Paper 1 final draft260353823_Technical Paper 1 final draft
260353823_Technical Paper 1 final draft
Michael Garibaldi
 

Destaque (20)

Introductions
IntroductionsIntroductions
Introductions
 
Albert t. clay a hebrew deluge story in cuneiform, and other epic fragments...
Albert t. clay   a hebrew deluge story in cuneiform, and other epic fragments...Albert t. clay   a hebrew deluge story in cuneiform, and other epic fragments...
Albert t. clay a hebrew deluge story in cuneiform, and other epic fragments...
 
Energy and Power
Energy and PowerEnergy and Power
Energy and Power
 
Graphical methods for 2 d heat transfer
Graphical methods for 2 d heat transfer Graphical methods for 2 d heat transfer
Graphical methods for 2 d heat transfer
 
Cabildo abierto distrital sobre educacion tecnica industrial bogota
Cabildo abierto distrital sobre educacion tecnica industrial bogotaCabildo abierto distrital sobre educacion tecnica industrial bogota
Cabildo abierto distrital sobre educacion tecnica industrial bogota
 
درمان دیابت نوع یک و دو با خام گیاهخواری
درمان دیابت نوع یک و دو با خام گیاهخواریدرمان دیابت نوع یک و دو با خام گیاهخواری
درمان دیابت نوع یک و دو با خام گیاهخواری
 
Illinois Petroleum
Illinois PetroleumIllinois Petroleum
Illinois Petroleum
 
[Harry edmar]hydrodynamics concepts and experiments
[Harry edmar]hydrodynamics concepts and experiments[Harry edmar]hydrodynamics concepts and experiments
[Harry edmar]hydrodynamics concepts and experiments
 
Aminoasit
AminoasitAminoasit
Aminoasit
 
STEP BY STEP USING SPACE GASS DESIGN PLATFORM
STEP BY STEP USING SPACE GASS DESIGN PLATFORMSTEP BY STEP USING SPACE GASS DESIGN PLATFORM
STEP BY STEP USING SPACE GASS DESIGN PLATFORM
 
üDs sg16 dnm snv
üDs sg16 dnm snvüDs sg16 dnm snv
üDs sg16 dnm snv
 
بیشعوری دکتر خاویر کرمنت
بیشعوری   دکتر خاویر کرمنتبیشعوری   دکتر خاویر کرمنت
بیشعوری دکتر خاویر کرمنت
 
Tabelas conexoes
Tabelas conexoesTabelas conexoes
Tabelas conexoes
 
SENI RUPA TERAPAN
SENI RUPA TERAPANSENI RUPA TERAPAN
SENI RUPA TERAPAN
 
2350475 globalization-diets-and-ncd-who-2002
2350475 globalization-diets-and-ncd-who-20022350475 globalization-diets-and-ncd-who-2002
2350475 globalization-diets-and-ncd-who-2002
 
Transhumanist Declaration
Transhumanist Declaration Transhumanist Declaration
Transhumanist Declaration
 
Human Enhancement - A Reasoned Pro Approach
Human Enhancement - A Reasoned Pro ApproachHuman Enhancement - A Reasoned Pro Approach
Human Enhancement - A Reasoned Pro Approach
 
Mechanics scheme
Mechanics schemeMechanics scheme
Mechanics scheme
 
ما خدا رو گم کرده ایم
ما خدا رو گم کرده ایم  ما خدا رو گم کرده ایم
ما خدا رو گم کرده ایم
 
260353823_Technical Paper 1 final draft
260353823_Technical Paper 1 final draft260353823_Technical Paper 1 final draft
260353823_Technical Paper 1 final draft
 

Semelhante a Introduction aux Web components (DNG Consulting)

Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
Hugo Hamon
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
laabid1
 
Aeris web components
Aeris web componentsAeris web components
Aeris web components
Francois ANDRE
 
C5 Javascript French
C5 Javascript FrenchC5 Javascript French
C5 Javascript FrenchVlad Posea
 
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Tarik Zakaria Benmerar
 
A la découverte de vue.js
A la découverte de vue.jsA la découverte de vue.js
A la découverte de vue.js
Bruno Bonnin
 
Automatisez vos tâches répétitives avec Grunt (Blend 2013)
Automatisez vos tâches répétitives avec Grunt (Blend 2013)Automatisez vos tâches répétitives avec Grunt (Blend 2013)
Automatisez vos tâches répétitives avec Grunt (Blend 2013)
Corinne Schillinger
 
Comment créer un moteur de recherche
Comment créer un moteur de rechercheComment créer un moteur de recherche
Comment créer un moteur de rechercheekofficiel
 
FORMATION javascript.pdf
FORMATION javascript.pdfFORMATION javascript.pdf
FORMATION javascript.pdf
OualidBelbrik
 
Johnny-Five : Robotique et IoT en JavaScript
Johnny-Five : Robotique et IoT en JavaScriptJohnny-Five : Robotique et IoT en JavaScript
Johnny-Five : Robotique et IoT en JavaScript
ECAM Brussels Engineering School
 
Document Object Model ( DOM)
Document Object Model ( DOM)Document Object Model ( DOM)
Document Object Model ( DOM)
Abdelouahed Abdou
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
jverrecchia
 
Pratique de javascript KOUAMI DJOMO
Pratique de javascript KOUAMI DJOMOPratique de javascript KOUAMI DJOMO
Pratique de javascript KOUAMI DJOMO
Julio Djomo
 
Outils front-end
Outils front-endOutils front-end
Outils front-end
Thomas Bodin
 
Atelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPressAtelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPress
IZZA Samir
 
JQuery
JQueryJQuery
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic LadeuXebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
Publicis Sapient Engineering
 
HTML5
HTML5HTML5
HTML5
Neovov
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2dhugomallet
 

Semelhante a Introduction aux Web components (DNG Consulting) (20)

Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
 
Aeris web components
Aeris web componentsAeris web components
Aeris web components
 
C5 Javascript
C5 JavascriptC5 Javascript
C5 Javascript
 
C5 Javascript French
C5 Javascript FrenchC5 Javascript French
C5 Javascript French
 
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
 
A la découverte de vue.js
A la découverte de vue.jsA la découverte de vue.js
A la découverte de vue.js
 
Automatisez vos tâches répétitives avec Grunt (Blend 2013)
Automatisez vos tâches répétitives avec Grunt (Blend 2013)Automatisez vos tâches répétitives avec Grunt (Blend 2013)
Automatisez vos tâches répétitives avec Grunt (Blend 2013)
 
Comment créer un moteur de recherche
Comment créer un moteur de rechercheComment créer un moteur de recherche
Comment créer un moteur de recherche
 
FORMATION javascript.pdf
FORMATION javascript.pdfFORMATION javascript.pdf
FORMATION javascript.pdf
 
Johnny-Five : Robotique et IoT en JavaScript
Johnny-Five : Robotique et IoT en JavaScriptJohnny-Five : Robotique et IoT en JavaScript
Johnny-Five : Robotique et IoT en JavaScript
 
Document Object Model ( DOM)
Document Object Model ( DOM)Document Object Model ( DOM)
Document Object Model ( DOM)
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
 
Pratique de javascript KOUAMI DJOMO
Pratique de javascript KOUAMI DJOMOPratique de javascript KOUAMI DJOMO
Pratique de javascript KOUAMI DJOMO
 
Outils front-end
Outils front-endOutils front-end
Outils front-end
 
Atelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPressAtelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPress
 
JQuery
JQueryJQuery
JQuery
 
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic LadeuXebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
 
HTML5
HTML5HTML5
HTML5
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
 

Mais de DNG Consulting

Présentation DevoxxFR 2015 sur GWT
Présentation DevoxxFR 2015 sur GWTPrésentation DevoxxFR 2015 sur GWT
Présentation DevoxxFR 2015 sur GWT
DNG Consulting
 
GWT Introduction for Eclipse Day
GWT Introduction for Eclipse Day GWT Introduction for Eclipse Day
GWT Introduction for Eclipse Day
DNG Consulting
 
Session GWT Devoxx France 2012 Cobra
Session GWT Devoxx France 2012 CobraSession GWT Devoxx France 2012 Cobra
Session GWT Devoxx France 2012 Cobra
DNG Consulting
 
Linq et Entity framework
Linq et Entity frameworkLinq et Entity framework
Linq et Entity framework
DNG Consulting
 
Introduction au Domain Driven Design
Introduction au Domain Driven DesignIntroduction au Domain Driven Design
Introduction au Domain Driven Design
DNG Consulting
 
Resource Oriented Architecture
Resource Oriented ArchitectureResource Oriented Architecture
Resource Oriented Architecture
DNG Consulting
 

Mais de DNG Consulting (7)

Présentation DevoxxFR 2015 sur GWT
Présentation DevoxxFR 2015 sur GWTPrésentation DevoxxFR 2015 sur GWT
Présentation DevoxxFR 2015 sur GWT
 
Devoxx fr
Devoxx frDevoxx fr
Devoxx fr
 
GWT Introduction for Eclipse Day
GWT Introduction for Eclipse Day GWT Introduction for Eclipse Day
GWT Introduction for Eclipse Day
 
Session GWT Devoxx France 2012 Cobra
Session GWT Devoxx France 2012 CobraSession GWT Devoxx France 2012 Cobra
Session GWT Devoxx France 2012 Cobra
 
Linq et Entity framework
Linq et Entity frameworkLinq et Entity framework
Linq et Entity framework
 
Introduction au Domain Driven Design
Introduction au Domain Driven DesignIntroduction au Domain Driven Design
Introduction au Domain Driven Design
 
Resource Oriented Architecture
Resource Oriented ArchitectureResource Oriented Architecture
Resource Oriented Architecture
 

Último

PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptxPRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
AlbertSmithTambwe
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
UNITECBordeaux
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Laurent Speyser
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
Université de Franche-Comté
 
Les écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptxLes écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptx
abderrahimbourimi
 
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
Horgix
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
OCTO Technology
 

Último (7)

PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptxPRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
 
Les écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptxLes écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptx
 
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
 

Introduction aux Web components (DNG Consulting)

  • 1. Web Components Révolutionnez votre HTML avec les web components DNG Consulting http://www.dng-consulting.com V2.5
  • 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. 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 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
  • 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 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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 <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. 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. 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. 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. 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. Object.observe() – Principe  Exemple d’événements 25 Modification Logs de la console:
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  • 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