Polymer JS

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

Quelques concepts importants

• L’application web monopage ou SPA
• L’application web progressive ou PWA
• Le paradigme Composant
• La structure des données JSON
• Le protocole et les verbes HTTP
• L’architecture REST
• Le Polyfill

Retour aux bases HTML5

• Le langage HTML, les styles CSS et la programmation en langage JavaScript
• Le DOM (Document Object Model) : structure des pages HTML
• Brefs rappels sur la Programmation Orientée Objet (POO)
• API HTML5
• Communication avec XMLHttpRequest
• Notions de Layout et RWD (Responsive Web Design)
• Présentation de `Material Design`

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

Découverte de l’architecture d’un projet Polymer JS

• Le fichier `index.html`
• Le fichier `elements.html`
• Exploration des répertoires du projet

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

Découverte du Catalogue Polymer JS

• Paper Elements
• IronElements
• Google Web Components
• Gold Elements
• NeonElements
• Platinum Elements
• Molecules
• App Elements
• Découverte du site https://customelements.io/ qui offre un ensemble de composants Open Source tiers

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 element
• Custom Events
• Gestion de la gesture pour les applications tactiles
• Les comportements (behaviors)
• Le styling
• Tester un `Web Component`

Ajax et Polymer

• Iron-Ajax et Iron-Request
• Méthode d’appel automatique et programmée
• Gestion du header pour le `cross domain` et la sécurité
• Utilisation de JWT (JSON Web Token)

Polymer Data System

• Concepts
• Objets et Tableaux
• Complex observer
• Data Binding
• Mediator Pattern
• Gestion uni-directionnelle / bi-directionnelle
• Exemple concret

Les animations

• Animation Behaviors
• Iron-Selector
• Neon

Le routing en Polymer

• Le fichier ` routing.html `
• Utilisation de Page.js

Mettre en production une application Polymer

• Utilisation de Platinum-sw, le service worker en Polymer
• PRPL Pattern
• Vulcanize
• Lazy load elements

OFFLINE

• Utiliser un service sorker en Polymer

Les alternatives & Polymer 2.0

• X-Tag de Mozilla
• Bosonic
• SkateJS
• Evolutions des spécifications
• Evolutions de Polymer
• Passage sur `yarn`

Conclusion

• Synthèse de la formation
• Remise des documents
• Quelques ressources utiles

Travaux pratiques : Réalisation en fil rouge d’une application type bibliothèque en ligne.