Formation Polymer JS v1

1/ Introduction

• Retour sur les bases HTML5, CSS3 et JavaScript

• Communication Ajax et structure des données JSON

• Notions de Layout et RWD (Responsive Web Design)

• Présentation de `Material Design`

2/ Présentation de Polymer JS

• Intérêts d’un framework JavaScript dans le développement web

• Les « Web components »

• Vue d’ensemble de Polymer JS

• Parcours du site Polymer Project

3/ 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

4/ Installation des composants et démarrage

• Installer Node.js et les gestionnaires de packages NPM et Bower

• Structurer les dossiers

• Installer le serveur Gulp et gulpfile.js

• Installer Polymer

• Optimiser la compatibilité avec Polyfills

5/ 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

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

• Le fichier `index.html`

• Le fichier `elements.html`

• Exploration des répertoires du projet

7/ Utilisation des Web Components

• Créer un composant web

• Importer avec HTML Import

• Appeler des méthodes dans un élément

• Appeler des méthodes externes et passages de paramètres

8/ 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

9/ Présentation des éléments de Polymer JS

• Éléments Iron

• Éléments Paper et le material design de Google

• Éléments Gold pour le e-commerce

• Élément Neon d’animation des composants web Polymer

• Éléments Platinum pour améliorer les capacités de votre application web

• Éléments Molecules pour intégrer des librairies JavaScript externes

• Élément Carbon

• Les composants web Google

10/ 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

11/ Création d’éléments avec Polymer JS

• Enregistrer un nouvel élément

• Paramétrer le cycle de vie d’un élément

• Manipuler le Local DOM (Document Objet Model)

• Comprendre les particularités du Shadow DOM

• Dynamiser les éléments avec le data binding et le property binding

• Communiquer des propriétés d’un élément avec le DOM

• Gérer les inputs : événements (events) et écouteurs (listeners)

• Gérer les propriétés, styles et templates des éléments

• Ajouter des propriétés CSS customisées

12/ Création d’une application avec Polymer Starter Kit

• Créer un menu de navigation

• Ajouter du contenu

• Routage du trafic

• Déployer l’application avec Firebase

13/ 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)

14/ Polymer Data System

• Concepts

• Objets et Tableaux

• Complex observer

• Data Binding

• Mediator Pattern

• Gestion uni-directionnelle / bi-directionnelle

• Exemple concrêt

15/ Les animations

• Animation Behaviors

• Iron-Selector

• Neon

16/ Le routing en Polymer

• Le fichier `routing.html`

• Utilisation de Page.js

17/ Mettre en production une application Polymer

• Utilisation de Platinum-sw, le service worker en Polymer

• PRPL Pattern

• Vulcanize

• Lazy load elements

18/ OFFLINE

• Utiliser un service sorker en Polymer

19/ Les alternatives & Polymer 2.0

• X-Tag de Mozilla

• Bosonic

• SkateJS

• Evolutions des spécifications

• Evolutions de Polymer

• Passage sur `yarn`