Formation Polymer JS Réf : PJS

Par Cédric Le Gallo

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

Durée :
4 jours
Lieux :
Paris

2 000 € HT (prix conseillé)

Partage :

  • Twitter
  • Facebook
  • E-mail
  • Linkedin
  • Viadeo

Soyez alertés par e-mail des nouvelles sessions : Poser une alerte,

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

A l’issue de cette formation, les participants seront en mesure de :
  • 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

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.

Type

Stage pratique

Méthode pédagogique

Alternance de cours magistraux (50%) et de travaux pratiques sur poste individuel (50%). Un support de cours sera remis à chaque participant au format PDF, ainsi que l’ensemble des exercices et travaux pratiques sous format électronique.

Plan de cours

Programme de la première journée de 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

Programme de la deuxième journée de formation
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

Programme de la troisième journée de formation
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)

Programme de la quatrième journée de formation
Polymer Data System

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

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.



Prochaines sessions

picto Du lundi 12/06 au jeudi 15/06 2017 Paris 2 000 € fleche S’inscrire à la session du lundi 12/06 au mardi 15/06
picto Du lundi 18/09 au jeudi 21/09 2017 Paris 2 000 € fleche S’inscrire à la session du lundi 18/09 au mardi 21/09
picto Du lundi 11/12 au jeudi 14/12 2017 Paris 2 000 € fleche S’inscrire à la session du lundi 11/12 au mardi 14/12
Proposer une session.

Pas de témoignage pour l'instant.

Cher(e) visiteur(euse),
Nous vous remercions pour l'intérêt porté à nos formations. La pré-inscription à une session de formation se fait via le formulaire d'inscription de la page formation.

La Convention de Formation Professionnelle Continue simplifiée vous sera envoyée par mail dans les 72H max. Votre inscription est considérée comme définitive, une fois cette convention signée par votre entreprise ou OPCA. La facture sera émise à l'issue de la formation, comme mentionnée dans nos conditions générales de vente.

A noter que les demandeurs d'emploi peuvent bénéficier d'une remise de 20% sur le prix public.

Pour toute information complémentaire ou demande de devis, n'hésitez pas à nous contacter au 01 53 34 66 10 ou à nous solliciter par mail.

A très bientôt dans l'un de nos centres de formation.
L'équipe Clever-Institut.

Les autres formations « Technologies front-end »  – Voir toutes les formations