Formation Web Components

Une formation Web Components pour les développeurs JavaScript qui souhaitent créer des composants web réutilisables dans n’importe quel projet.


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 comme Angular, React ou Vue.

Mais jusqu’à maintenant, il n’y avait aucune interopérabilité. Aujourd’hui, il est possible de faire des composants réutilisables dans n’importe quel projet avec le standard Web components.


Pourquoi notre formation Web Components ?


Web Components : pour qui ?

Cette formation s’adresse à des développeurs web. Il s’agit d’une formation de spécialisation, c’est pourquoi nous la proposons seulement en intra-entreprise.

Pour une session inter-entreprise, les fondamentaux des Web Components sont abordés dans notre formation JavaScript.

A noter : les Web Components fonctionnent avec des navigateurs modernes, à partir de IE11.

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

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, React, Vue…)
  • Publication sur un registre comme npm

Stencil ou LitElement / Polymer

Le standard des Web Components suffit pour créer des composants réutilisables, mais il s’agit pour l’instant d’une API bas niveau, qui peut être assez limitée sur certains aspects, notamment le templating.

Il existe aujourd’hui des librairies comme Stencil ou LitElement / Polymer qui vous aident à créer des Web Components. S’agissant d’un programme personnalisable, nous pourrons choisir d’aborder l’un ou l’autre de ces outils.

N’hésitez pas à vous référer :

Cette formation m'intéresse

Formation Web components

Formation Web Components

Public : Développeurs JS

Pré-requis : Bases de JavaScript

Nous pouvons intervenir dans votre entreprise.

Durée : 2 ou 3 jours

Obtenir à un devis