Présentation Des Web Components et Polymer au GDG DevFest du 2 Janvier 2016. La présentation reviens particuliérement sur mon expérience chez emploitic. Note: La démo présente quelques widgets mises en place chez emploitic.com. Elle n'est pas accessible sur internet. Néanmoins, je vous invite à voir le github du workshop pour voir un exemple concrêt avec Polymer (https://github.com/acigna/gdg-algiers-2015-devfest-polymer-workshop)

1. WebComponents &
Polymer
Tarik Zakaria Benmerar
Acigna Inc.
GDG Algiers DevFest 2 Janvier 2015

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
 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)


11. LesWeb
Components
 Custom Element.

var CustomElement = document.registerElement('x-custom', {
prototype: Object.create(HTMLElement.prototype, {
createdCallback: function () {
this.innerHTML = “Markup Content.";
}
});
});
<x-custom></x-custom> -> <x-custom>Markup Content.</x-custom>

12. LesWeb
Components
 Shadow DOM.

<script>
// Create shadow DOM
var shadow =
document.querySelector('#hostElement').createShadowRoot();
// 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>

13. LesWeb
Components
 Shadow DOM.

<script>
var CustomElement = document.registerElement('x-custom', {
prototype: Object.create(HTMLElement.prototype, {
createdCallback: function () {
var shadow = this.createShadowRoot();
shadow.innerHTML = “DOM Content";
}
});
});
</script>

14. LesWeb
Components
 HTMLTemplate.
<script>
var CustomElement = document.registerElement('x-custom', {
prototype: Object.create(HTMLElement.prototype, {
createdCallback: function () {
var t = document.querySelector('#template');
var clone = document.importNode(t.content, true);
this.createShadowRoot().appendChild(clone);
}
});
});
</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>

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

16. LesWeb
Components
Le Seul Hic desWeb Components

17. LesWeb
Components
C’est le support.

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

19. 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.


20. Polymer

21. Polymer
<dom-module id=‘x-custom’>
<template>Markup Content <span id=‘name’>
</span>.</template>
<script>
Polymer({
is: 'x-custom',
ready: function() {
this.$.name.textContent = ‘Tarik’;
}
});
</script>
</dom-module>

22. Polymer
<dom-module id=‘x-custom’>
<template>Markup Content. {{firstname}}
{{lastname}} </template>
<script>
Polymer({
is: ‘x-custom‘,
properties: {
firstname: String,
lastname: String
}
});
</script>
</dom-module>
</x-custom firstname=“truc” lastname=“truc2”>
</x-custom>

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