SlideShare une entreprise Scribd logo
1  sur  27
Télécharger pour lire hors ligne
W E B C O M P O N E N T S
AV E C G O O G L E P O LY M E R
P r i n c i p e
2
• Petits modules englobant :
- Style
- Structure
- Comportement
• Simple balise HTML
<google-map api-key="12345">
</google-map>
C o m p a t i b i l i t é
Custom Elements
Html Imports
Templates
Shadow DOM (Shady DOM)
3
Reposent sur 4 spécifications duW3C
Utilisation d’un Polyfill
S t r u c t u r e
CSS
Javascript
(Polymer)
HTML
Style
- Contenu dans des balises <style>
- Propre au composant
Comportement
- Contenu dans une balise <script>
- On appelle le constructeur Polymer
Structure
- Contenu dans une balise <template>
- Utilisation de balises personnalisées
4
5
I N S TA L L AT I O N D U P O S T E
D E T R AVA I L
Prérequis:
- Système d’exploitation récent (Afin de pouvoir installer la dernière version de NodeJS)
- Droits d’installation sur le système
- Git doit être installé
- Serveur local (typeWAMP) (Pour tester ses composants)
O u t i l s u t i l i s é s
NPM est le gestionnaire de paquets
de NodeJS. Il nous servira à installer
Bower.
NodeJS / NPM
Bower est un gestionnaire de
dépendances. Grâce à lui, nous
installerons Polymer et le polyfill
WebcomponentJS.
Bower
VS Code est un éditeur de texte
particulièrement adapté au
développement Front-End.
Visual Studio Code
6
I n s t a l l a t i o n
NodeJS / NPM
Télécharger NodeJS depuis le site
http://nodejs.org et l’installer
Dans la console, vérifier que
l’installation s’est bien déroulée en
entrant:
$ node –v
$ npm -v
Bower
Dans le dossier de travail, initialisez un
nouveau projet puis installez Bower et
Polymer:
$ npm init
$ npm i –g bower
$ bower i polymer
Visual Studio Code
VS Code est téléchargeable
gratuitement depuis le site
https://code.visualstudio.com
Les plugins conseillés sont:
- Auto CloseTag (Jun Han)
- Color Highlight(Sergii Naumov)
- HTML Snippets(Mohamed Abusaid)
- Polymer Snippets(chimon2000)
- VSCode Icons(Roberto Huertas)
7
S’assurer que Git est installé avec la commande: $ git --version
8
M I S E E N P R AT I Q U E
S t r u c t u r e m i n i m a l e
9
- Import Polymer
- Dom-module
• Style
• Template
• Script
custom-element.html
S t r u c t u r e c o m p l è t e
10
custom-element.html index.html
P r o p e r t i e s
Type de l’attribut utilisé pour la désérialisation, peut
être Boolean, Date, Number, String, Array ou
Object.
type
Valeur par défaut de l’attribut.
value
(Boolean) Si égal à true, répercute toute modification
de l’attribut dans le code sur l’attribut de la balise
HTML.
reflectToAttribute
(Boolean) Si égal à true, l’attribut ne pourra pas être
modifié par le code après l’initialisation de l’élément.
readOnly
(String) Cette valeur correspond à un nom de fonction
et ses paramètres. Si l’un des paramètres change, la
valeur de l’attribut sera recalculée. => readOnly.
computed
(String) Cette valeur est le nom d’une méthode qui
sera invoqué lorsque l’attribut change.
observer
11
Attributs des propriétés:
P r o p e r t i e s ( s u i t e )
Convention: Le nom des propriétés privées commence par un underscore (ex: _privateProperty).
Un attribut contenant un tiret sera converti en camelcase par Polymer:
12
Data-binding:
- Unidirectionnel [[prop]]
- Bidirectionnel {{prop}}
Cy c l e d e v i e
created
Appelée lorsque l’élément a été créé mais avant que les propriétés n’aient été attribuées
et que le DOM local ne soit initialisé. Peu / pas utilisé.
ready
Appelée après que les propriétés aient été attribuées et le DOM local initialisé. Utilisé pour
la configuration de base du composant.
attached
Appelée après que l’élément ait été attaché au document. Utilisé pour placer des listeners
sur les éléments du document.
detached
Appelée après que l’élément ait été détaché du document. Utilisé pour enlever les
listeners placés avec la méthode attached.
attributeChanged
Appelé lorsque l’un des attributs de l’élément est modifié. Utilisé pour gérer la
modification des attributs non-déclarés.
13
C o m p o r t e m e n t s ( B e h a v i o r s )
14
Partage de code entre plusieurs composants.
(ex: Peut-être utilisé pour l’internationalisation)
myBehavior.html
custom-element.html
S t y l e
15
-Le style d’un composant est définit dans sa balise <style> ou dans un module de style externe
-Il est propre au composant
• Ne déborde pas à l’extérieur
• Le style extérieur déborde dans le composant
-Sélecteurs particuliers :
• :host : Correspond au composant.
• ::content : Correspond à la balise <content> du composant
S t y l e s e x t e r n e s
16
Possibilité de partager des styles
shared-styles.html
1 – Création d’un module de style
2 – Importation du module dans le composant
3 – Insertion grâce à l’attribut include sur la balise style
custom-element.html
B a l i s e s e t a t t r i b u t s
17
Polymer inclut des balises et attributs personnalisés:
- Affichage d’une liste à partir d’un tableau:
- Affichage conditionnel:
- Gestion des évènements:
Méthode _sendRequest invoquée lors du clic sur le bouton
- Masquage d’élément:
Ajout du caractère $ pour les
attributs (En opposition aux propriétés
des composants)
L i b r a i r i e s e x t e r n e s
18
Importation au début du fichier de composant comme dans une page web (Déconseillé)
Création d’un module (Conseillé)
custom-element.html
bootstrap.html
custom-element.html
Cela évite les importations multiples d’une même librairie
C o m p o s a n t e x t e r n e
19
Composant Google pour requête HTTP: Iron-Ajax
1 – Installation:
$ bower install PolymerElements/iron-ajax
2 – Importation:
3 – Utilisation:
Se référer à la documentation de chaque composant
custom-element.html
custom-element.html
20
B O W E R
Publication et mise à jour
P u b l i c a t i o n s u r B o w e r
- Créer une release (un tag) Git avec le numéro de version sous la
forme x.x.x: $ git tag <version>
- Pousser le projet et ses tags sur un repository Github public
Prérequis1
Dans le dossier du projet, entrer la commande:
$ bower init
Initialisation2
Ajoutez les dépendances de votre projet au fichier de configuration
avec la commande:
$ bower install –save <dépendance1> <dépendance2> …
Ajout des dépendances3
Ouvrez le fichier de configuration (bower.json) et complétez-le en
suivant les préconisations décrites sur le site officiel:
https://github.com/bower/spec/blob/master/json.md
Ne pas oublier d’exclure les fichiers à ne pas uploader
Configuration4
Une fois le fichier de configuration correctement complété, la
publication du package se fait avec la commande:
$ bower register <nom_du_package> <url_dépot_git>
Publication5
En cas d’erreur, il est possible de dépublier un package avec la
commande:
$ bower unregister < nom_du_package >
(Il faudra auparavant vous identifier avec ‘bower login’ et vos id Github)
Dépublication6
21
Guide officiel: https://bower.io/docs/creating-packages/
M i s e à j o u r d ’ u n p a c k a g e B o w e r
22
‐ Une fois un package publié, il est possible de l’installer via la commande:
$ bower install < nom_du_package>
- Sa mise à jour comme d épendance d’un autre projet se fait via la commande:
$ bower update < nom_du_package>
ou
$ bower update
Mise à jour du package
Mise à jour de l’ensemble des packages du projet
‐ La mise à jour vers une nouvelle version se fait par l’ajout d’un nouveau « tag » Git sur le commit
correspondant à cette version (Sous la forme x.x.x):
$ git tag <version>
Bower détecte automatiquement la nouvelle version depuis Github
23
C O N C L U S I O N
R é f é r e n c e s
Google Polymer https://www.polymer-project.org/1.0/docs/
WebComponents https://www.webcomponents.org
Google Developers https://www.youtube.com/user/ChromeDevelopers
Polymer Elements https://elements.polymer-project.org/
Documentation AERIS http://composants.aeris-data.fr/doc/
24
Po u r a l l e r p l u s l o i n
Préprocesseurs CSS Linters Gulp Polymer 2
25
Gulp-polymer-sass
Merci
www.aeris-data.fr
Modèle de présentation : ttp://thepopp.com/ - Jun Akizak

Contenu connexe

Tendances

Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirYves Van Goethem
 
Php 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVCPhp 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVCPierre Faure
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantHugo Hamon
 
Introduction à CakePHP
Introduction à CakePHPIntroduction à CakePHP
Introduction à CakePHPPierre MARTIN
 
php2 : formulaire-session-PDO
php2 : formulaire-session-PDOphp2 : formulaire-session-PDO
php2 : formulaire-session-PDOAbdoulaye Dieng
 
Comment se charge WordPress ? Le loading du core.
Comment se charge WordPress ? Le loading du core.Comment se charge WordPress ? Le loading du core.
Comment se charge WordPress ? Le loading du core.Boiteaweb
 
Développement d’extensions WordPress
Développement d’extensions WordPressDéveloppement d’extensions WordPress
Développement d’extensions WordPressChi Nacim
 
Conversion de template HTML en thème WordPress
Conversion de template HTML en thème WordPressConversion de template HTML en thème WordPress
Conversion de template HTML en thème WordPressChi Nacim
 
Cours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partieCours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partiekadzaki
 
Le seo et les redirections d urls
Le seo et les redirections d urlsLe seo et les redirections d urls
Le seo et les redirections d urlsAlexandre Filluzeau
 
Configuration Management avec Drupal 8
Configuration Management avec Drupal 8Configuration Management avec Drupal 8
Configuration Management avec Drupal 8Aurelien Navarre
 
Utilisation optimale et professionnelle de PHP
Utilisation optimale et professionnelle de PHPUtilisation optimale et professionnelle de PHP
Utilisation optimale et professionnelle de PHPJean-Marc Fontaine
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPKristen Le Liboux
 

Tendances (20)

Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
 
Le client FTP de PHP5
Le client FTP de PHP5Le client FTP de PHP5
Le client FTP de PHP5
 
PHP5 et les fichiers
PHP5 et les fichiersPHP5 et les fichiers
PHP5 et les fichiers
 
Php 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVCPhp 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVC
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
 
Introduction à CakePHP
Introduction à CakePHPIntroduction à CakePHP
Introduction à CakePHP
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
 
Javascript et JQuery
Javascript et JQueryJavascript et JQuery
Javascript et JQuery
 
php2 : formulaire-session-PDO
php2 : formulaire-session-PDOphp2 : formulaire-session-PDO
php2 : formulaire-session-PDO
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
 
Comment se charge WordPress ? Le loading du core.
Comment se charge WordPress ? Le loading du core.Comment se charge WordPress ? Le loading du core.
Comment se charge WordPress ? Le loading du core.
 
Php & My Sql
Php & My SqlPhp & My Sql
Php & My Sql
 
Email et PHP5
Email et PHP5Email et PHP5
Email et PHP5
 
Développement d’extensions WordPress
Développement d’extensions WordPressDéveloppement d’extensions WordPress
Développement d’extensions WordPress
 
Conversion de template HTML en thème WordPress
Conversion de template HTML en thème WordPressConversion de template HTML en thème WordPress
Conversion de template HTML en thème WordPress
 
Cours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partieCours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partie
 
Le seo et les redirections d urls
Le seo et les redirections d urlsLe seo et les redirections d urls
Le seo et les redirections d urls
 
Configuration Management avec Drupal 8
Configuration Management avec Drupal 8Configuration Management avec Drupal 8
Configuration Management avec Drupal 8
 
Utilisation optimale et professionnelle de PHP
Utilisation optimale et professionnelle de PHPUtilisation optimale et professionnelle de PHP
Utilisation optimale et professionnelle de PHP
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
 

Similaire à Aeris 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)DNG Consulting
 
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 LadeuPublicis Sapient Engineering
 
Retour d'expérience technique Go, gRPC, Kubernetes
Retour d'expérience technique Go, gRPC, KubernetesRetour d'expérience technique Go, gRPC, Kubernetes
Retour d'expérience technique Go, gRPC, KubernetesVincent Composieux
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniterAtsé François-Xavier KOBON
 
Dévelopement extensions WordPress
Dévelopement extensions WordPressDévelopement extensions WordPress
Dévelopement extensions WordPressIZZA Samir
 
Formation Play! framework
Formation Play! frameworkFormation Play! framework
Formation Play! frameworkBenoît Simard
 
ISCOM::HTML/CSS::session1 (20140930)
ISCOM::HTML/CSS::session1 (20140930)ISCOM::HTML/CSS::session1 (20140930)
ISCOM::HTML/CSS::session1 (20140930)Nicolas Aguenot
 
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 Componentscjolif
 
PHP Composer : Pourquoi ? Comment ? Et plus ...
PHP Composer : Pourquoi ? Comment ? Et plus ...PHP Composer : Pourquoi ? Comment ? Et plus ...
PHP Composer : Pourquoi ? Comment ? Et plus ...Romain Cambien
 
Symfony2: 30 astuces et bonnes pratiques
Symfony2: 30 astuces et bonnes pratiquesSymfony2: 30 astuces et bonnes pratiques
Symfony2: 30 astuces et bonnes pratiquesNoel GUILBERT
 
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
 WordCamp Lyon 2015 - WordPress, Git et l'intégration continue WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
WordCamp Lyon 2015 - WordPress, Git et l'intégration continueStéphane HULARD
 
PostgreSQL sous linux
PostgreSQL sous linuxPostgreSQL sous linux
PostgreSQL sous linuxKhalid ALLILI
 
Paul valery et les Web components
Paul valery et les Web componentsPaul valery et les Web components
Paul valery et les Web componentsFrancois ANDRE
 
FORMATION javascript.pdf
FORMATION javascript.pdfFORMATION javascript.pdf
FORMATION javascript.pdfOualidBelbrik
 
Installation et configuration d'openbravo
Installation et configuration d'openbravoInstallation et configuration d'openbravo
Installation et configuration d'openbravoSoumia Brabije
 

Similaire à Aeris web components (20)

Outils front-end
Outils front-endOutils front-end
Outils front-end
 
Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)
 
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
 
Retour d'expérience technique Go, gRPC, Kubernetes
Retour d'expérience technique Go, gRPC, KubernetesRetour d'expérience technique Go, gRPC, Kubernetes
Retour d'expérience technique Go, gRPC, Kubernetes
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
 
Dévelopement extensions WordPress
Dévelopement extensions WordPressDévelopement extensions WordPress
Dévelopement extensions WordPress
 
Formation Play! framework
Formation Play! frameworkFormation Play! framework
Formation Play! framework
 
ISCOM::HTML/CSS::session1 (20140930)
ISCOM::HTML/CSS::session1 (20140930)ISCOM::HTML/CSS::session1 (20140930)
ISCOM::HTML/CSS::session1 (20140930)
 
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
 
PHP Composer : Pourquoi ? Comment ? Et plus ...
PHP Composer : Pourquoi ? Comment ? Et plus ...PHP Composer : Pourquoi ? Comment ? Et plus ...
PHP Composer : Pourquoi ? Comment ? Et plus ...
 
Symfony2: 30 astuces et bonnes pratiques
Symfony2: 30 astuces et bonnes pratiquesSymfony2: 30 astuces et bonnes pratiques
Symfony2: 30 astuces et bonnes pratiques
 
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
 WordCamp Lyon 2015 - WordPress, Git et l'intégration continue WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
 
PostgreSQL sous linux
PostgreSQL sous linuxPostgreSQL sous linux
PostgreSQL sous linux
 
Paul valery et les Web components
Paul valery et les Web componentsPaul valery et les Web components
Paul valery et les Web components
 
FORMATION javascript.pdf
FORMATION javascript.pdfFORMATION javascript.pdf
FORMATION javascript.pdf
 
Catalogue PFE 2019
Catalogue PFE 2019Catalogue PFE 2019
Catalogue PFE 2019
 
Introduction aspnet
Introduction aspnetIntroduction aspnet
Introduction aspnet
 
Installation et configuration d'openbravo
Installation et configuration d'openbravoInstallation et configuration d'openbravo
Installation et configuration d'openbravo
 
Workshop - Lightning Web Components
Workshop - Lightning Web ComponentsWorkshop - Lightning Web Components
Workshop - Lightning Web Components
 
Workshop Lightning Web Components
Workshop Lightning Web ComponentsWorkshop Lightning Web Components
Workshop Lightning Web Components
 

Plus de Francois ANDRE

Travailler avec git et eclipse
Travailler avec git et eclipseTravailler avec git et eclipse
Travailler avec git et eclipseFrancois ANDRE
 
Introduction aux web components
Introduction aux web componentsIntroduction aux web components
Introduction aux web componentsFrancois ANDRE
 
Panorama citation des donnees
Panorama citation des donneesPanorama citation des donnees
Panorama citation des donneesFrancois ANDRE
 
Cas d'utilisation de la citation de données
Cas d'utilisation de la citation de donnéesCas d'utilisation de la citation de données
Cas d'utilisation de la citation de donnéesFrancois ANDRE
 
Recommandations rda sur la citation des données
Recommandations rda sur la citation des donnéesRecommandations rda sur la citation des données
Recommandations rda sur la citation des donnéesFrancois ANDRE
 
Service WEB de type REST avec Java
Service WEB de type REST avec JavaService WEB de type REST avec Java
Service WEB de type REST avec JavaFrancois ANDRE
 
Présentation normes OGC
Présentation normes OGCPrésentation normes OGC
Présentation normes OGCFrancois ANDRE
 

Plus de Francois ANDRE (10)

Travailler avec git et eclipse
Travailler avec git et eclipseTravailler avec git et eclipse
Travailler avec git et eclipse
 
Introduction aux web components
Introduction aux web componentsIntroduction aux web components
Introduction aux web components
 
Tutoriel GIT
Tutoriel GITTutoriel GIT
Tutoriel GIT
 
Panorama citation des donnees
Panorama citation des donneesPanorama citation des donnees
Panorama citation des donnees
 
Cas d'utilisation de la citation de données
Cas d'utilisation de la citation de donnéesCas d'utilisation de la citation de données
Cas d'utilisation de la citation de données
 
Recommandations rda sur la citation des données
Recommandations rda sur la citation des donnéesRecommandations rda sur la citation des données
Recommandations rda sur la citation des données
 
TP GWT JDEV 2015
TP GWT JDEV 2015TP GWT JDEV 2015
TP GWT JDEV 2015
 
Service WEB de type REST avec Java
Service WEB de type REST avec JavaService WEB de type REST avec Java
Service WEB de type REST avec Java
 
Présentation normes OGC
Présentation normes OGCPrésentation normes OGC
Présentation normes OGC
 
Formation gwt
Formation gwtFormation gwt
Formation gwt
 

Aeris web components

  • 1. W E B C O M P O N E N T S AV E C G O O G L E P O LY M E R
  • 2. P r i n c i p e 2 • Petits modules englobant : - Style - Structure - Comportement • Simple balise HTML <google-map api-key="12345"> </google-map>
  • 3. C o m p a t i b i l i t é Custom Elements Html Imports Templates Shadow DOM (Shady DOM) 3 Reposent sur 4 spécifications duW3C Utilisation d’un Polyfill
  • 4. S t r u c t u r e CSS Javascript (Polymer) HTML Style - Contenu dans des balises <style> - Propre au composant Comportement - Contenu dans une balise <script> - On appelle le constructeur Polymer Structure - Contenu dans une balise <template> - Utilisation de balises personnalisées 4
  • 5. 5 I N S TA L L AT I O N D U P O S T E D E T R AVA I L Prérequis: - Système d’exploitation récent (Afin de pouvoir installer la dernière version de NodeJS) - Droits d’installation sur le système - Git doit être installé - Serveur local (typeWAMP) (Pour tester ses composants)
  • 6. O u t i l s u t i l i s é s NPM est le gestionnaire de paquets de NodeJS. Il nous servira à installer Bower. NodeJS / NPM Bower est un gestionnaire de dépendances. Grâce à lui, nous installerons Polymer et le polyfill WebcomponentJS. Bower VS Code est un éditeur de texte particulièrement adapté au développement Front-End. Visual Studio Code 6
  • 7. I n s t a l l a t i o n NodeJS / NPM Télécharger NodeJS depuis le site http://nodejs.org et l’installer Dans la console, vérifier que l’installation s’est bien déroulée en entrant: $ node –v $ npm -v Bower Dans le dossier de travail, initialisez un nouveau projet puis installez Bower et Polymer: $ npm init $ npm i –g bower $ bower i polymer Visual Studio Code VS Code est téléchargeable gratuitement depuis le site https://code.visualstudio.com Les plugins conseillés sont: - Auto CloseTag (Jun Han) - Color Highlight(Sergii Naumov) - HTML Snippets(Mohamed Abusaid) - Polymer Snippets(chimon2000) - VSCode Icons(Roberto Huertas) 7 S’assurer que Git est installé avec la commande: $ git --version
  • 8. 8 M I S E E N P R AT I Q U E
  • 9. S t r u c t u r e m i n i m a l e 9 - Import Polymer - Dom-module • Style • Template • Script custom-element.html
  • 10. S t r u c t u r e c o m p l è t e 10 custom-element.html index.html
  • 11. P r o p e r t i e s Type de l’attribut utilisé pour la désérialisation, peut être Boolean, Date, Number, String, Array ou Object. type Valeur par défaut de l’attribut. value (Boolean) Si égal à true, répercute toute modification de l’attribut dans le code sur l’attribut de la balise HTML. reflectToAttribute (Boolean) Si égal à true, l’attribut ne pourra pas être modifié par le code après l’initialisation de l’élément. readOnly (String) Cette valeur correspond à un nom de fonction et ses paramètres. Si l’un des paramètres change, la valeur de l’attribut sera recalculée. => readOnly. computed (String) Cette valeur est le nom d’une méthode qui sera invoqué lorsque l’attribut change. observer 11 Attributs des propriétés:
  • 12. P r o p e r t i e s ( s u i t e ) Convention: Le nom des propriétés privées commence par un underscore (ex: _privateProperty). Un attribut contenant un tiret sera converti en camelcase par Polymer: 12 Data-binding: - Unidirectionnel [[prop]] - Bidirectionnel {{prop}}
  • 13. Cy c l e d e v i e created Appelée lorsque l’élément a été créé mais avant que les propriétés n’aient été attribuées et que le DOM local ne soit initialisé. Peu / pas utilisé. ready Appelée après que les propriétés aient été attribuées et le DOM local initialisé. Utilisé pour la configuration de base du composant. attached Appelée après que l’élément ait été attaché au document. Utilisé pour placer des listeners sur les éléments du document. detached Appelée après que l’élément ait été détaché du document. Utilisé pour enlever les listeners placés avec la méthode attached. attributeChanged Appelé lorsque l’un des attributs de l’élément est modifié. Utilisé pour gérer la modification des attributs non-déclarés. 13
  • 14. C o m p o r t e m e n t s ( B e h a v i o r s ) 14 Partage de code entre plusieurs composants. (ex: Peut-être utilisé pour l’internationalisation) myBehavior.html custom-element.html
  • 15. S t y l e 15 -Le style d’un composant est définit dans sa balise <style> ou dans un module de style externe -Il est propre au composant • Ne déborde pas à l’extérieur • Le style extérieur déborde dans le composant -Sélecteurs particuliers : • :host : Correspond au composant. • ::content : Correspond à la balise <content> du composant
  • 16. S t y l e s e x t e r n e s 16 Possibilité de partager des styles shared-styles.html 1 – Création d’un module de style 2 – Importation du module dans le composant 3 – Insertion grâce à l’attribut include sur la balise style custom-element.html
  • 17. B a l i s e s e t a t t r i b u t s 17 Polymer inclut des balises et attributs personnalisés: - Affichage d’une liste à partir d’un tableau: - Affichage conditionnel: - Gestion des évènements: Méthode _sendRequest invoquée lors du clic sur le bouton - Masquage d’élément: Ajout du caractère $ pour les attributs (En opposition aux propriétés des composants)
  • 18. L i b r a i r i e s e x t e r n e s 18 Importation au début du fichier de composant comme dans une page web (Déconseillé) Création d’un module (Conseillé) custom-element.html bootstrap.html custom-element.html Cela évite les importations multiples d’une même librairie
  • 19. C o m p o s a n t e x t e r n e 19 Composant Google pour requête HTTP: Iron-Ajax 1 – Installation: $ bower install PolymerElements/iron-ajax 2 – Importation: 3 – Utilisation: Se référer à la documentation de chaque composant custom-element.html custom-element.html
  • 20. 20 B O W E R Publication et mise à jour
  • 21. P u b l i c a t i o n s u r B o w e r - Créer une release (un tag) Git avec le numéro de version sous la forme x.x.x: $ git tag <version> - Pousser le projet et ses tags sur un repository Github public Prérequis1 Dans le dossier du projet, entrer la commande: $ bower init Initialisation2 Ajoutez les dépendances de votre projet au fichier de configuration avec la commande: $ bower install –save <dépendance1> <dépendance2> … Ajout des dépendances3 Ouvrez le fichier de configuration (bower.json) et complétez-le en suivant les préconisations décrites sur le site officiel: https://github.com/bower/spec/blob/master/json.md Ne pas oublier d’exclure les fichiers à ne pas uploader Configuration4 Une fois le fichier de configuration correctement complété, la publication du package se fait avec la commande: $ bower register <nom_du_package> <url_dépot_git> Publication5 En cas d’erreur, il est possible de dépublier un package avec la commande: $ bower unregister < nom_du_package > (Il faudra auparavant vous identifier avec ‘bower login’ et vos id Github) Dépublication6 21 Guide officiel: https://bower.io/docs/creating-packages/
  • 22. M i s e à j o u r d ’ u n p a c k a g e B o w e r 22 ‐ Une fois un package publié, il est possible de l’installer via la commande: $ bower install < nom_du_package> - Sa mise à jour comme d épendance d’un autre projet se fait via la commande: $ bower update < nom_du_package> ou $ bower update Mise à jour du package Mise à jour de l’ensemble des packages du projet ‐ La mise à jour vers une nouvelle version se fait par l’ajout d’un nouveau « tag » Git sur le commit correspondant à cette version (Sous la forme x.x.x): $ git tag <version> Bower détecte automatiquement la nouvelle version depuis Github
  • 23. 23 C O N C L U S I O N
  • 24. R é f é r e n c e s Google Polymer https://www.polymer-project.org/1.0/docs/ WebComponents https://www.webcomponents.org Google Developers https://www.youtube.com/user/ChromeDevelopers Polymer Elements https://elements.polymer-project.org/ Documentation AERIS http://composants.aeris-data.fr/doc/ 24
  • 25. Po u r a l l e r p l u s l o i n Préprocesseurs CSS Linters Gulp Polymer 2 25 Gulp-polymer-sass
  • 26.
  • 27. Merci www.aeris-data.fr Modèle de présentation : ttp://thepopp.com/ - Jun Akizak