Formation Polymer JS

Polymer JS est un Framework JavaScript créé par Google. Composé d’un ensemble d’éléments découplés (séparation du code HTML, CSS et JavaScript) et réutilisables de façon autonome, il répond aux nouveaux standards du développement Web. Polymer JS permet de créer des applications Web ou Mobile qui offrant les même possibilités qu’un client riche, et de réutiliser les composants développés pour d’autres applications. Cette formation pratique donne une vision complète du Framework, depuis son architecture jusqu’à sa mise en œuvre complète dans le cadre d'une application Web.

Objectifs

Cette formation vous permettra d'acquérir les compétences nécessaires pour utiliser Polymer pour la réalisation d'Application Web Progressive ou Single Page. A l'issue de la formation, vous serez en mesure :

  • Comprendre comment architecturer un projet Polymer
  • Comprendre les spécifications Web Component
  • Connaître le catalogue de Polymer
  • Ecrire ses propres Web Components en Polymer

Infos pratiques

Développeurs web, Architectes logiciel 3 jours 55% pratique, 45% théorique Connaissance de base en HTML, CSS, JavaScript et concepts objet. 2400 €*

Contenu pédagogique

  • Introduction et généralités :
    • 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

  • concepts importants :
    • L’application web monopage ou SPA
    • L’application web progressive ou PWA
    • Le paradigme Composant
    • Le Polyfill

  • 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)

  • environnement de travail :
    • 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

  • 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

  • Catalogue Polymer JS :
    • Paper Elements
    • IronElements
    • Google Web Components
    • Gold Elements
    • NeonElements
    • Platinum Elements
    • Molecules
    • App Elements
  • 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

  • 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

  • Polymer Data System :
    • Concepts
    • Objets et Tableaux
    • Complex observer
    • Data Binding
    • Mediator Pattern
    • Gestion uni-directionnelle / bi-directionnelle
    • Exemple concrêt

  • 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 formation
    • Ressources utiles