Formation Polymer JS v1


  • RÉALISER DES APPLICATIONS WEB DE NOUVELLE GÉNÉRATION AVEC POLYMER JS
REFERENCE
 
 
PJS1
DUREE
 
 
4 jours
TARIFS
 
 
1950 € HT
Niveau : Intermédiaire
Cours à distance: Possible
OBJECTIFS :
 

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.
A l’issue de cette formation, vous serez capables 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 V1
PRÉ-REQUIS :
 

Afin de suivre cette formation, il est recommandé d'avoir des connaissances de base en HTML, CSS, JavaScript et concepts objet.

PUBLIC :
 

Cette formation s'adresse aux architectes techniques, chefs de projet web, développeurs, experts front-end et intégrateurs.

PROGRAMME :
 

Introduction et généralités à Polymer JS V1

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 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 :
 

La formation est constitué de cours magistraux et de travaux pratiques sur poste individuel.
Travaux pratiques : réalisation en fil rouge d'une application type bibliothèque en ligne.

S'INSCRIRE À CETTE
FORMATION POLYMER JS V1
Cliquez sur une date pour vous inscrire
Information pratiques sur
LA FORMATION
Lieu de la formation Paris - LA DEFENSE
Nous contacter 01 43 34 90 94
CETTE FORMATION SUR-MESURE Ce cours est réalisable en intra-entreprise, dans vos locaux ou nos salles de cours CONTACTER NOTRE SERVICE INTRA
D'autres formations
SUR LE MÊME THÈME

3 j

 

Web - Digital

Polymer JS v2
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...

3 j

 

Web - Digital

Polymer JS v3
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...

3 j

 

Web - Digital

Sass et Compass
Grâce à Sass et à son framework CSS3 Compass, les intégrateurs et développeurs web professionnels confrontés à des impératifs de...

1 j

 

Web - Digital

LESS et SASS
CSS est un bon moyen de séparer le design du code HTML. Cependant, certaines contraintes liées au langage font que l'évolution, la réutilisation et la maintenance des feuilles de style CSS se...
Plus de formations sur le même thème

Des questions ?

ON VOUS RAPPELLE

 

0

Formations
Informatique
et Management
en ligne à ce jour

+ 0

Stagiaires dans nos
salles de cours sur
l'année

0%

De participants
satisfaits ou très
satisfaits de nos
formations

0

Formateurs experts
validés PLB