Clever Institut

Polymer JS

Par Clever Institut

Objectifs

  • 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

Programme

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.

Pédagogie

50 % théorie / 50 % pratique

Formations de la même catégories (5)

Orsys
ReactJS, programmation avancéePar Orsys

À l'origine simple outil interne de Facebook, React est devenue l'une des principales librairies JavaScript open source. Avec cette formation, vous approfondirez votre maîtrise de React, découvrirez les dernières nouveautés et l'écosystème indispensable pour concevoir des applications web encore plus perfectionnées.

Dawan
Spring MVC + EJB 3Par Dawan

Construire des applications JEE robustes basées sur Spring MVC et EJB 3

Clever Institut
Zend Framework 3, Migration de Zend Framework 2Par Clever Institut

Migrer de Zend Framework 1 à Zend Framework 2 était quasiment impossible. Dans la plupart des cas, les développeurs devaient redévelopper complètement leurs applications. Après la sortie d’une nouvelle version majeure, la migration de Zend Framework 2 vers Zend Framework 3 est possible à moindre coût, et permet de meilleures performances et un faible couplage applicatif. Dans cette formation, vous apprendrez à réaliser dans les meilleures conditions une migration des projets Zend Framework 2 vers Zend Framework 3

ENI SERVICE
Programmation Perl – Niveau 2Par ENI SERVICE

Aller plus loin dans le langage, notamment en ce qui concerne la découverte de la programmation objet en Perl.

Ziggourat
PrestaShop - DéveloppeurPar Ziggourat

Cette formation vous permet de maintenir un serveur hébergeant un site PrestaShop, d'utiliser et modifier des thèmes, d'utiliser et modifier des modules et de développer et distribuer de nouveaux modules et thèmes.