Ma présentation sur les Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre, organisé à l'ESI.

1. WebComponents &
Polymer
Tarik Zakaria Benmerar
Acigna Inc.
GDG DevFest 3 Décembre 2016

2. WhoAm I ?
Tarik Zakaria Benmerar.
Entrepreneur et Consultant, Jeune Chercheur
Et Enseignant.
Acigna, Emploitic.com,Toptal.

3. Expérience
Emploitic &
Widgets

4. Expérience
Emploitic &
Widgets
Demo

5. Expérience
Emploitic &
Widgets
Expérience Hawai Airlines (
Lessons Learned In Big App Development, A Hawaiian Airlines Case Study
)

6. Expérience
Emploitic &
Widgets
Expérience Hawai Airlines (
Lessons Learned In Big App Development, A Hawaiian Airlines Case Study
)
“When we decided to roll our own form controls, we took on
the burden of reinventing the wheel and supporting all of the
requirements above.
We ended up with a solution that uses AngularJS to hide the
native HTML of select dropdowns, checkboxes and radio
buttons, and replaces them with alternate markup for which we
had full control over styling.
While this approach gave us OCD-level control over every pixel, it
ended up causing all kinds of obscure bugs and accessibility
issues in complex situations, which we spent countless hours
patching.”

7. Expérience
Emploitic &
Widgets
Fonctionnement Des Widgets
1- Déclaration Du Widget Par Le Développeur :
<input data-widget=‘text-field’ data-param=‘param1’ />
2- Insertion du nouveau élément stylisé et Dissimulation de
l’élément inséré par le développeur
<div …. </div> <input data-widget … style=‘display:
hidden’ />
3- Gestion de l’interaction et synchronisation avec l’élément
caché.
4- Interaction de l’utilisation visuellement ou du développeur
avec l’API JS du widget.

8. Expérience
Emploitic &
Widgets
Sémentique Des Widgets Et Accessibilité
La partie visuelle doit avoir un sens pour les screen viewers
pour que les personnes non voyantes puisse interagir.
Aussi, il faut prendre en compte aussi l’interaction clavier.
<div aria-role=‘checkbox’>
…….
</div>

9. LesWeb
Components
 LesWeb Components permettent de résoudre
certaines problématiques liées au développement de
composants personnalisés.
 Séparation du composant dans un module séparé.
 Encapsulation du composant dans le DOM.


10. LesWeb
Components
 Les autres méthodes de :


11. LesWeb
Components
 LesWeb Components c’est 4 technologies.
 Custom Element : Déclaration d’un nouveau élément
HTML.
 Shadow DOM : Encapsulation d’un élément du DOM.
 HTML Imports : Modularisation Des Composants
HTML.
 HTMLTemplates : Nouvelle balise HTML pour contenir
le template d’un composant qui ne doit pas être
affiché (Elle remplace l’utilisation des balises script
non sémantique)


12. LesWeb
Components
 Custom Element.

class CustomElement extends HTMLElement
{
connectedCallback: function () {
this.innerHTML = “Markup Content.";
}
}
customElements.define(‘x-custom’, CustomElement);
<x-custom></x-custom> -> <x-custom>Markup Content.</x-custom>

13. LesWeb
Components
 Shadow DOM.

<script>
// Create shadow DOM
var shadow =
document.querySelector('#hostElement').attachShadow({mode:
‘open’});
// Add some text to shadow DOM
shadow.innerHTML = '<p>Here is some new text</p>';
// Add some CSS to make the text red
shadow.innerHTML += '<style>p { color: red };</style>';
</script>

14. LesWeb
Components
 Shadow DOM.

<script>
class CustomElement extends HTMLElement
{
connectedCallback: function () {
var shadow = this.attachShadow({mode: ‘open’});
shadow.innerHTML = “DOM Content";
}
}
customElements.define(‘x-custom’, CustomElement);
</script>

15. LesWeb
Components
 HTMLTemplate.
<script>
class CustomElement extends HTMLElement
{
connectedCallback: function () {
var t = document.querySelector('#template');
var clone = document.importNode(t.content, true);
this.attachShadow({mode: ‘open’}).appendChild(clone);
}
}
customElements.define(‘x-custom’, CustomElement);
</script>
<template id=‘template’>
<style>
p { color: orange; }
</style>
<p>I'm in Shadow DOM. My markup was stamped
from a &lt;template&gt;.</p>
</template>

16. LesWeb
Components
 HTML Import.
<template>
</template>
<script>
var CustomElement = ….
</script>
element.htmlindex.html
<link rel=‘import’
href=‘element.html’>

17. LesWeb
Components
Le Seul Hic desWeb Components

18. LesWeb
Components
C’est le support.

19. LesWeb
Components
C’est le support.

20. LesWeb
Components
Il faut donc simuler l’environnementWeb
Components à travers des Polyfills

21. Polymer
 Inclut un PolyfillWeb ComponentTiers.
 Framework pour lesWeb Components.
 Gestion du Cycle DeVie Du Composant.
 Déclaration Des Propriétés De l’élément.
 Manipulation Du DOM etTemplating (Léger pour éviter
l’utilisation de jQuery ou un Framework JS).
 Gestion Des Styles etTheming.
 Gestion Des Evènements (Léger pour éviter l’utilisation des
évenements jQuery).
 Comportement Réutilisable (Behaviors).
 Un ensemble de Composants Prêts à être utilisés.


22. Polymer

23. Polymer
<dom-module id=‘x-custom’>
<template>Markup Content <span id=‘name’>
</span>.</template>
<script>
class CustomElement extends Polymer.Element
{
static get is() {
return ‘x-custom’;
}
connectedCallback: function () {
this.$.name.textContent = ‘Tarik’;
}
}
customElements.define( CustomElement.is, CustomElement );
</script>
</dom-module>

24. Polymer
<dom-module id=‘x-custom’>
<template>Markup Content. {{firstname}} {{lastname}}
</template>
<script>
class CustomElement extends Polymer.Element
{
static get is() {
return ‘x-custom’;
}
static get config() {
return {
properties: {
firstname: String,
lastname: String
}
};
}
}
customElements.define( CustomElement.is, CustomElement );
</script>
</dom-module>
</x-custom firstname=“truc” lastname=“truc2”>
</x-custom>

25. Polymer
<dom-module id=‘x-custom’>
<template>Markup Content. <span id=“taphere”>
</taphere> </template>
<script> });
class CustomElement extends Polymer.Element
{
static get is() {
return ‘x-custom’;
}
static get config() {
return {
listeners: {
‘taphere.tap’: ‘tapMe’
}
};
}
tapMe () {
alert(‘tapped’);
this.fire(‘tappedMe', {tappedMe: true});
}
}
customElements.define( CustomElement.is, CustomElement );
</script>
</dom-module>
<script>
document.querySelector('x-custom')
.addEventListener(‘tappedMe',
function (e) { console.log(e.detail.tappedMe); });
</script>