Formation Web Components

Une formation Web Components de spécialisation pour les développeurs JavaScript qui souhaitent créer des composants web autonomes et réutilisables, sans framework.


Pourquoi une formation Web Components ?

Le concept de composant est devenu central dans le développement front-end, que ce soit pour les sites web ou les applications. C’est le coeur des frameworks majeurs comme Angular 2 ou React. Mais aujourd’hui il n’est plus forcément nécessaire d’utiliser une librairie : le standard Web components devient natif en JavaScript.


Pourquoi notre formation Web Components ?


Web Components : pour qui ?

Cette formation s’adresse à des développeurs/ses expérimenté/e/s en JavaScript.

Les bases des Web Components sont déjà abordées dans notre formation JavaScript ES6 complète. Il s’agit donc d’une formation de spécialisation avancée, c’est pourquoi nous la proposons seulement en intra-entreprise.

Pensez à lire les questions fréquentes pour bien choisir votre formation.


Objectifs de la formation Web Components

  • Découvrir le nouveau standard Web Components
  • Créer des composants web autonomes et réutilisables

Programme de la formation Web Components

La formation Web Components est articulée en deux temps : d’abord, on repasse d’abord pas les fondamentaux modernes, pour partir sur de bonnes bases ; on se consacre ensuite en détail au standard Web Components.

Rappels ES6 / ES2015

On commence par aborder le dernier standard JavaScript, car c’est aujourd’hui la base de travail.

  • let, const, template literals, valeurs par défaut…
  • Arrow functions, déstructuration…

Rappels DOM & AJAX

On repasse ensuite par une utilisation moderne du DOM, des événements et de l’AJAX, qui seront indispensables dans les composants.

  • Manipulation de la page
  • Gestion des interactions et animations
  • AJAX : nouvelle API fetch

Programmation Orientée Objet

Les composants se basent sur la programmation objet de l’ES6.

  • Classes et héritage
  • Gestion du contexte
  • Getters / setters
  • Méthodes statiques
  • Modules ES6

Templates

Première partie du standard Web Components : les templates, qui permettent de différer le chargement d’un fragment de DOM. Indispensables dans les applications.

  • Balise template
  • Import du contenu

Shadow DOM

Seconde partie : le shadow DOM, qui permet d’encapsuler votre HTML et votre CSS dans un fragment de DOM isolé (l’équivalent de la portée locale dans les fonctions).

  • Création d’un Shadow DOM
  • Gestion des styles encapsulés
  • Composition des contenus

Custom elements

Dernière partie, la plus importantes : les custom elements, qui permettent de créer ses propres balises HTML, avec à l’intérieur tout le contenu, tous les styles CSS et tout le comportement JavaScript nécessaires à leur fonctionnement.

  • Création d’un custom element
  • Cycle de vie d’un élément
  • Association d’un Shadow DOM (contenu et styles)
  • Gestion des attributs
  • Gestion des événements
  • Astuces de templating

Mise en prod et compatibilité

Les Web Components sont un standard très récent. Il faudra donc mettre en place des outils pour que cela fonctionne dans tous les navigateurs.

  • Point sur le support actuel des navigateurs
  • Gestion de la compatibilité avec les polyfills
  • Packaging avec rollup
  • Réutilisation autonome ou dans des frameworks (Angular 2, React…)

Cette formation m'intéresse

Formation Web components

Formation Web Components

Public : Développeurs/ses JS

Pré-requis : Bases de JavaScript

Nous pouvons intervenir dans votre entreprise.

Durée : 2 jour(s)

Obtenir à un devis