Polymer JS

• Appréhender l’architecture du Framework,
• Comprendre le fonctionnement des éléments pour les utiliser,
• Créer de nouveaux éléments web réutilisables,
• Développer une application Web complète avec 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.

50 % théorie / 50 % pratique