Créer de nouveaux composants HTML5 JavaScript réutilisables et les mettre en œuvre avec Polymer
Programme
Introduction et généralités
- Qu’est-ce qu’un Framework de développement et l’intérêt d’un Framework
- Généralités sur la spécification `Web Components` du W3C
- Vue d’ensemble de Polymer JS : historique et présentation de Polymer JS 1.0
- Parcours du site Polymer Project
- Le paradigme Composant
L’environnement de travail de Polymer JS
- Les outils du développeur
- Ecrire un premier `Web Component` sans Polymer
- `HTML imports`
- Le `Template Element`
- Les `Custom Elements`
- Le `Shadow DOM`
- Ecrire un premier `Web Component` avec Polymer
- Polymer Cli
- Premiers pas avec Polymer JS au travers de l’application Démo de Polymer CLI
Utilisation d’un ` WebComponent `
- Inscription `standard` et `à la volée` d’un élément
- Les imports HTML
- Passage de paramètres
- Appel de méthodes à l’intérieur et à l’extérieur d’un élément
Langage de Templating Polymer
- Le templating
- 1-way binding
- 2-way binding
- Compound bindings
- Computed bindings
- Computed Properties
- Les méthodes (publiques et privées)
- Single prop observer
- Affichage conditionnel
- Le templaterepeater
Les Concepts Polymer
- Polymer.Base API
- Enregistrement et cycle de vie d’un élément
- Declared Properties
- Manipulation du local DOM
- Particularités du Shadow DOM : observation avec l’outil Chrome dev
- Built-in methods
- Bonnes pratiques
Création d’un premier élément Polymer
- Méthodes de création d’un web élément
- Custom Events
- Gestion de la gesture pour les applications tactiles
- Les comportements (behaviors)
- Le styling
- Tester un `Web Component`
Polymer Data System
- Concepts
- Objets et Tableaux
- Complex observer
- Data Binding
- Mediator Pattern
- Gestion uni-directionnelle / bi-directionnelle
- Exemple concret
Conclusion
- Synthèse de la formation
- Remise des documents
- Quelques ressources utiles
