SlideShare une entreprise Scribd logo
WebComponents &
Polymer
Tarik Zakaria Benmerar
Acigna Inc.
GDG DevFest 3 Décembre 2016
WhoAm I ?
Tarik Zakaria Benmerar.
Entrepreneur et Consultant, Jeune Chercheur
Et Enseignant.
Acigna, Emploitic.com,Toptal.
Expérience
Emploitic &
Widgets
Expérience
Emploitic &
Widgets
Demo
Expérience
Emploitic &
Widgets
Expérience Hawai Airlines (
Lessons Learned In Big App Development, A Hawaiian Airlines Case Study
)
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.”
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.
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>
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.

LesWeb
Components
 Les autres méthodes de :

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)

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>
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>
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>
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>
LesWeb
Components
 HTML Import.
<template>
</template>
<script>
var CustomElement = ….
</script>
element.htmlindex.html
<link rel=‘import’
href=‘element.html’>
LesWeb
Components
Le Seul Hic desWeb Components
LesWeb
Components
C’est le support.
LesWeb
Components
C’est le support.
LesWeb
Components
Il faut donc simuler l’environnementWeb
Components à travers des Polyfills
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.

Polymer
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>
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>
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>

Contenu connexe

Tendances

Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
RadhoueneRouached
 
Cours wpf avancé
Cours wpf avancéCours wpf avancé
Cours wpf avancé
lucas zientek
 
Le futur de AngularJS (2.0)
Le futur de AngularJS (2.0)Le futur de AngularJS (2.0)
Le futur de AngularJS (2.0)
Clément Dubois
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
Laurent Duveau
 
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
 
Angular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTAngular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHT
tayebbousfiha1
 
MVVM de A à Z
MVVM de A à ZMVVM de A à Z
MVVM de A à Z
Microsoft
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
Thibault Martinez
 
Retour d'experience projet AngularJS
Retour d'experience projet AngularJSRetour d'experience projet AngularJS
Retour d'experience projet AngularJS
∞ François CHERPION ∞
 
Hello AngularJS - Back to the future
Hello AngularJS - Back to the futureHello AngularJS - Back to the future
Hello AngularJS - Back to the future
Ouadie LAHDIOUI
 
Test angular 2+
Test angular 2+Test angular 2+
Test angular 2+
Ussef Ben Amor
 
4 asynch task_services_thread
4 asynch task_services_thread4 asynch task_services_thread
4 asynch task_services_thread
Saber LAJILI
 
Introduction à Angular JS
Introduction à Angular JSIntroduction à Angular JS
Introduction à Angular JS
Antoine Rey
 
Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014
Yves-Emmanuel Jutard
 
Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido
SOAT
 
De Google+ à twitter en passant par le Cloud
De Google+ à twitter en passant par le CloudDe Google+ à twitter en passant par le Cloud
De Google+ à twitter en passant par le Cloud
Nicolas FRANCOIS
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
yllieth
 
SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)
Rui Carvalho
 
MVVM par Karim PIerre Maalej
MVVM par Karim PIerre MaalejMVVM par Karim PIerre Maalej
MVVM par Karim PIerre Maalej
CocoaHeads France
 
Cours 2 les composants
Cours 2 les composantsCours 2 les composants
Cours 2 les composants
Aymen Sellaouti
 

Tendances (20)

Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
 
Cours wpf avancé
Cours wpf avancéCours wpf avancé
Cours wpf avancé
 
Le futur de AngularJS (2.0)
Le futur de AngularJS (2.0)Le futur de AngularJS (2.0)
Le futur de AngularJS (2.0)
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
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
 
Angular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTAngular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHT
 
MVVM de A à Z
MVVM de A à ZMVVM de A à Z
MVVM de A à Z
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Retour d'experience projet AngularJS
Retour d'experience projet AngularJSRetour d'experience projet AngularJS
Retour d'experience projet AngularJS
 
Hello AngularJS - Back to the future
Hello AngularJS - Back to the futureHello AngularJS - Back to the future
Hello AngularJS - Back to the future
 
Test angular 2+
Test angular 2+Test angular 2+
Test angular 2+
 
4 asynch task_services_thread
4 asynch task_services_thread4 asynch task_services_thread
4 asynch task_services_thread
 
Introduction à Angular JS
Introduction à Angular JSIntroduction à Angular JS
Introduction à Angular JS
 
Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014
 
Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido
 
De Google+ à twitter en passant par le Cloud
De Google+ à twitter en passant par le CloudDe Google+ à twitter en passant par le Cloud
De Google+ à twitter en passant par le Cloud
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
 
SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)
 
MVVM par Karim PIerre Maalej
MVVM par Karim PIerre MaalejMVVM par Karim PIerre Maalej
MVVM par Karim PIerre Maalej
 
Cours 2 les composants
Cours 2 les composantsCours 2 les composants
Cours 2 les composants
 

En vedette

Integrating Culturally Relevant Teaching into ELA Classrooms Facilitators Guide
Integrating Culturally Relevant Teaching into ELA Classrooms Facilitators GuideIntegrating Culturally Relevant Teaching into ELA Classrooms Facilitators Guide
Integrating Culturally Relevant Teaching into ELA Classrooms Facilitators Guide
Bilon Joseph
 
jQuery vs AJAX Control Toolkit
jQuery vs AJAX Control ToolkitjQuery vs AJAX Control Toolkit
jQuery vs AJAX Control Toolkit
Erik Ralston
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web Components
Rich Bradshaw
 
Top 5 Usability Principles
Top 5 Usability PrinciplesTop 5 Usability Principles
Top 5 Usability Principles
Erik Ralston
 
Polymer vs other libraries (Devfest Ukraine 2015)
Polymer vs other libraries (Devfest Ukraine 2015)Polymer vs other libraries (Devfest Ukraine 2015)
Polymer vs other libraries (Devfest Ukraine 2015)
jskvara
 
jQuery Proven Performance Tips & Tricks
jQuery Proven Performance Tips & TricksjQuery Proven Performance Tips & Tricks
jQuery Proven Performance Tips & Tricks
Addy Osmani
 
jQuery in 15 minutes
jQuery in 15 minutesjQuery in 15 minutes
jQuery in 15 minutes
Simon Willison
 
Google Polymer Framework
Google Polymer FrameworkGoogle Polymer Framework
Google Polymer Framework
Kostas Karolemeas
 
De 0 a Polymer
De 0 a PolymerDe 0 a Polymer
De 0 a Polymer
Israel Blancas
 
Up & Running with Polymer
Up & Running with PolymerUp & Running with Polymer
Up & Running with Polymer
Fiyaz Hasan
 

En vedette (10)

Integrating Culturally Relevant Teaching into ELA Classrooms Facilitators Guide
Integrating Culturally Relevant Teaching into ELA Classrooms Facilitators GuideIntegrating Culturally Relevant Teaching into ELA Classrooms Facilitators Guide
Integrating Culturally Relevant Teaching into ELA Classrooms Facilitators Guide
 
jQuery vs AJAX Control Toolkit
jQuery vs AJAX Control ToolkitjQuery vs AJAX Control Toolkit
jQuery vs AJAX Control Toolkit
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web Components
 
Top 5 Usability Principles
Top 5 Usability PrinciplesTop 5 Usability Principles
Top 5 Usability Principles
 
Polymer vs other libraries (Devfest Ukraine 2015)
Polymer vs other libraries (Devfest Ukraine 2015)Polymer vs other libraries (Devfest Ukraine 2015)
Polymer vs other libraries (Devfest Ukraine 2015)
 
jQuery Proven Performance Tips & Tricks
jQuery Proven Performance Tips & TricksjQuery Proven Performance Tips & Tricks
jQuery Proven Performance Tips & Tricks
 
jQuery in 15 minutes
jQuery in 15 minutesjQuery in 15 minutes
jQuery in 15 minutes
 
Google Polymer Framework
Google Polymer FrameworkGoogle Polymer Framework
Google Polymer Framework
 
De 0 a Polymer
De 0 a PolymerDe 0 a Polymer
De 0 a Polymer
 
Up & Running with Polymer
Up & Running with PolymerUp & Running with Polymer
Up & Running with Polymer
 

Similaire à Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016

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
 
react-fr.pdf
react-fr.pdfreact-fr.pdf
react-fr.pdf
ssuser65180a
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
Nizar MAATOUG -ISET Sidi Bouzid
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
BoubakerMedanas
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
BoubakerMedanas
 
Symposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme MeteorSymposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme Meteor
ArthurMaroulier
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
React-cours.pdf
React-cours.pdfReact-cours.pdf
React-cours.pdf
Jaouad Assabbour
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
Adyax
 
react-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basicreact-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basic
zineblahib2
 
Angluars js
Angluars jsAngluars js
Angluars js
RYMAA
 
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
 
Etendre le Web avec les Web Components
Etendre le Web avec les Web ComponentsEtendre le Web avec les Web Components
Etendre le Web avec les Web Components
cjolif
 
Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)
DNG Consulting
 
Fondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application FlexFondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application Flex
david deraedt
 
Fondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application FlexFondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application Flex
david deraedt
 
Evolutions scub foundation 3.0 = 4.0
Evolutions scub foundation 3.0 =  4.0Evolutions scub foundation 3.0 =  4.0
Evolutions scub foundation 3.0 = 4.0
adrienhautot
 
Migrez vos composants Lightning vers Lightning Web Components
Migrez vos composants Lightning vers Lightning Web ComponentsMigrez vos composants Lightning vers Lightning Web Components
Migrez vos composants Lightning vers Lightning Web Components
Martin Lezer
 

Similaire à Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016 (20)

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
 
react-fr.pdf
react-fr.pdfreact-fr.pdf
react-fr.pdf
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
Symposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme MeteorSymposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme Meteor
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
React-cours.pdf
React-cours.pdfReact-cours.pdf
React-cours.pdf
 
Backbonejs presentation
Backbonejs presentationBackbonejs presentation
Backbonejs presentation
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
react-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basicreact-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basic
 
Angluars js
Angluars jsAngluars js
Angluars js
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
 
Etendre le Web avec les Web Components
Etendre le Web avec les Web ComponentsEtendre le Web avec les Web Components
Etendre le Web avec les Web Components
 
Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)
 
Fondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application FlexFondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application Flex
 
Fondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application FlexFondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application Flex
 
Evolutions scub foundation 3.0 = 4.0
Evolutions scub foundation 3.0 =  4.0Evolutions scub foundation 3.0 =  4.0
Evolutions scub foundation 3.0 = 4.0
 
Migrez vos composants Lightning vers Lightning Web Components
Migrez vos composants Lightning vers Lightning Web ComponentsMigrez vos composants Lightning vers Lightning Web Components
Migrez vos composants Lightning vers Lightning Web Components
 

Plus de Tarik Zakaria Benmerar

Videostreaming et visioconference pour le Web - Evènement GDSC USTHB Tech plus
Videostreaming et visioconference pour le Web - Evènement GDSC USTHB Tech plusVideostreaming et visioconference pour le Web - Evènement GDSC USTHB Tech plus
Videostreaming et visioconference pour le Web - Evènement GDSC USTHB Tech plus
Tarik Zakaria Benmerar
 
Chapitre 8 - les entrées - sorties
Chapitre 8  - les entrées - sortiesChapitre 8  - les entrées - sorties
Chapitre 8 - les entrées - sorties
Tarik Zakaria Benmerar
 
Cyber pink - Time Management
Cyber pink -  Time Management Cyber pink -  Time Management
Cyber pink - Time Management
Tarik Zakaria Benmerar
 
Chapitre 6 - couche transport
Chapitre 6  - couche transportChapitre 6  - couche transport
Chapitre 6 - couche transport
Tarik Zakaria Benmerar
 
Chapitre 5 - couche réseaux
Chapitre 5 - couche réseauxChapitre 5 - couche réseaux
Chapitre 5 - couche réseaux
Tarik Zakaria Benmerar
 
Chapitre 4 - couche liaison
Chapitre 4 - couche liaisonChapitre 4 - couche liaison
Chapitre 4 - couche liaison
Tarik Zakaria Benmerar
 
Chapitre 3 - connecteurs et câbles
Chapitre 3 -   connecteurs et câblesChapitre 3 -   connecteurs et câbles
Chapitre 3 - connecteurs et câbles
Tarik Zakaria Benmerar
 
Chapitre 2 - Transmission
Chapitre 2  - TransmissionChapitre 2  - Transmission
Chapitre 2 - Transmission
Tarik Zakaria Benmerar
 
Chapitre 1 - notions fondamentales
Chapitre 1 -  notions fondamentalesChapitre 1 -  notions fondamentales
Chapitre 1 - notions fondamentales
Tarik Zakaria Benmerar
 
Chapitre 9 - les interruptions
Chapitre 9 -  les interruptionsChapitre 9 -  les interruptions
Chapitre 9 - les interruptions
Tarik Zakaria Benmerar
 
Chapitre 7 - la pile
Chapitre 7 -  la pileChapitre 7 -  la pile
Chapitre 7 - la pile
Tarik Zakaria Benmerar
 
Chapitre 6 - les instructions de chaînes de caractères
Chapitre 6  - les instructions de chaînes de caractèresChapitre 6  - les instructions de chaînes de caractères
Chapitre 6 - les instructions de chaînes de caractères
Tarik Zakaria Benmerar
 
Chapitre 5 - fichiers EXE-COM pour le dos
Chapitre 5 -  fichiers EXE-COM pour le dosChapitre 5 -  fichiers EXE-COM pour le dos
Chapitre 5 - fichiers EXE-COM pour le dos
Tarik Zakaria Benmerar
 
Chapitre 4 - les instructions de saut et conditions
Chapitre 4  - les instructions de saut et conditionsChapitre 4  - les instructions de saut et conditions
Chapitre 4 - les instructions de saut et conditions
Tarik Zakaria Benmerar
 
Chapitre 3 - échanges de données et opérations arithmétiques - binaires
Chapitre 3  - échanges de données et opérations arithmétiques - binairesChapitre 3  - échanges de données et opérations arithmétiques - binaires
Chapitre 3 - échanges de données et opérations arithmétiques - binaires
Tarik Zakaria Benmerar
 
Chapitre 2.2 - architecture d'un microprocesseur - jeux d'instructions et reg...
Chapitre 2.2 - architecture d'un microprocesseur - jeux d'instructions et reg...Chapitre 2.2 - architecture d'un microprocesseur - jeux d'instructions et reg...
Chapitre 2.2 - architecture d'un microprocesseur - jeux d'instructions et reg...
Tarik Zakaria Benmerar
 
Chapitre 2.1 - architecture d'un microprocesseur - bus et communication
Chapitre 2.1 -  architecture d'un microprocesseur - bus et communicationChapitre 2.1 -  architecture d'un microprocesseur - bus et communication
Chapitre 2.1 - architecture d'un microprocesseur - bus et communication
Tarik Zakaria Benmerar
 
Chapitre 1 - représentation numérique des données
Chapitre 1  - représentation numérique des donnéesChapitre 1  - représentation numérique des données
Chapitre 1 - représentation numérique des données
Tarik Zakaria Benmerar
 
Chapitre 3 - Protocole Bus CAN (2020/2021
Chapitre 3 - Protocole Bus CAN (2020/2021Chapitre 3 - Protocole Bus CAN (2020/2021
Chapitre 3 - Protocole Bus CAN (2020/2021
Tarik Zakaria Benmerar
 
Chapitre 2 - Protocole Modbus (2020/2021)
Chapitre 2 - Protocole Modbus (2020/2021)Chapitre 2 - Protocole Modbus (2020/2021)
Chapitre 2 - Protocole Modbus (2020/2021)
Tarik Zakaria Benmerar
 

Plus de Tarik Zakaria Benmerar (20)

Videostreaming et visioconference pour le Web - Evènement GDSC USTHB Tech plus
Videostreaming et visioconference pour le Web - Evènement GDSC USTHB Tech plusVideostreaming et visioconference pour le Web - Evènement GDSC USTHB Tech plus
Videostreaming et visioconference pour le Web - Evènement GDSC USTHB Tech plus
 
Chapitre 8 - les entrées - sorties
Chapitre 8  - les entrées - sortiesChapitre 8  - les entrées - sorties
Chapitre 8 - les entrées - sorties
 
Cyber pink - Time Management
Cyber pink -  Time Management Cyber pink -  Time Management
Cyber pink - Time Management
 
Chapitre 6 - couche transport
Chapitre 6  - couche transportChapitre 6  - couche transport
Chapitre 6 - couche transport
 
Chapitre 5 - couche réseaux
Chapitre 5 - couche réseauxChapitre 5 - couche réseaux
Chapitre 5 - couche réseaux
 
Chapitre 4 - couche liaison
Chapitre 4 - couche liaisonChapitre 4 - couche liaison
Chapitre 4 - couche liaison
 
Chapitre 3 - connecteurs et câbles
Chapitre 3 -   connecteurs et câblesChapitre 3 -   connecteurs et câbles
Chapitre 3 - connecteurs et câbles
 
Chapitre 2 - Transmission
Chapitre 2  - TransmissionChapitre 2  - Transmission
Chapitre 2 - Transmission
 
Chapitre 1 - notions fondamentales
Chapitre 1 -  notions fondamentalesChapitre 1 -  notions fondamentales
Chapitre 1 - notions fondamentales
 
Chapitre 9 - les interruptions
Chapitre 9 -  les interruptionsChapitre 9 -  les interruptions
Chapitre 9 - les interruptions
 
Chapitre 7 - la pile
Chapitre 7 -  la pileChapitre 7 -  la pile
Chapitre 7 - la pile
 
Chapitre 6 - les instructions de chaînes de caractères
Chapitre 6  - les instructions de chaînes de caractèresChapitre 6  - les instructions de chaînes de caractères
Chapitre 6 - les instructions de chaînes de caractères
 
Chapitre 5 - fichiers EXE-COM pour le dos
Chapitre 5 -  fichiers EXE-COM pour le dosChapitre 5 -  fichiers EXE-COM pour le dos
Chapitre 5 - fichiers EXE-COM pour le dos
 
Chapitre 4 - les instructions de saut et conditions
Chapitre 4  - les instructions de saut et conditionsChapitre 4  - les instructions de saut et conditions
Chapitre 4 - les instructions de saut et conditions
 
Chapitre 3 - échanges de données et opérations arithmétiques - binaires
Chapitre 3  - échanges de données et opérations arithmétiques - binairesChapitre 3  - échanges de données et opérations arithmétiques - binaires
Chapitre 3 - échanges de données et opérations arithmétiques - binaires
 
Chapitre 2.2 - architecture d'un microprocesseur - jeux d'instructions et reg...
Chapitre 2.2 - architecture d'un microprocesseur - jeux d'instructions et reg...Chapitre 2.2 - architecture d'un microprocesseur - jeux d'instructions et reg...
Chapitre 2.2 - architecture d'un microprocesseur - jeux d'instructions et reg...
 
Chapitre 2.1 - architecture d'un microprocesseur - bus et communication
Chapitre 2.1 -  architecture d'un microprocesseur - bus et communicationChapitre 2.1 -  architecture d'un microprocesseur - bus et communication
Chapitre 2.1 - architecture d'un microprocesseur - bus et communication
 
Chapitre 1 - représentation numérique des données
Chapitre 1  - représentation numérique des donnéesChapitre 1  - représentation numérique des données
Chapitre 1 - représentation numérique des données
 
Chapitre 3 - Protocole Bus CAN (2020/2021
Chapitre 3 - Protocole Bus CAN (2020/2021Chapitre 3 - Protocole Bus CAN (2020/2021
Chapitre 3 - Protocole Bus CAN (2020/2021
 
Chapitre 2 - Protocole Modbus (2020/2021)
Chapitre 2 - Protocole Modbus (2020/2021)Chapitre 2 - Protocole Modbus (2020/2021)
Chapitre 2 - Protocole Modbus (2020/2021)
 

Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016

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