Votre partenaire formation 100% digital

Polymer JS

Créez et combinez des « Web Components » avec Polymer JS pour réaliser des applications web de nouvelle génération

  • Formateur(s)

    Cédric LE GALLO
  • Référence

    PJS01

  • Durée

    4 jours (28h)

  • Prix unitaire HT

    1950 €

Prochaines sessions

Sur demande

Description

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 pédagogiques

  • 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

Public cible

Architectes techniques, Chefs de projet Web, Développeurs, Experts front-end, Intégrateurs.

Pré-requis

Connaissance de base en HTML, CSS, JavaScript et concepts objet

Modalités d’évaluation

L’évaluation des acquis se fait tout au long de la session au travers d’ateliers de mise en pratique des notions et concepts abordés pendant la formation.

Méthodes pédagogiques

50 % théorie / 50 % pratique

Programme de la formation

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.