Logo Web Components, Stencil et Lit

Formation Web Components, Stencil et Lit

Les Web Components offrent la possibilité de créer ses propres balises en masquant une mise en forme et un comportement. Parfaits pour la création d'un Design System / UI Kit sur mesure, ils sont créé à partir des APIs Web : Custom Elements, Shadow DOM, Slots et Templates et ES Module. A l'issue de cette formation les participants seront capables de créer leurs propres composants basés sur les APIs du navigateurs mais aussi d'accélérer le développement en utilisant des technologies comme Lit ou Stencil.

Objectifs pédagogiques / Compétences visées

  • Manipuler les APIs Custom Elements, Shadow DOM, Slots et Templates et ES Module
  • Utiliser un framework pour accélérer le développement

Pré-requis

  • Avoir une bonne connaissance de JavaScript et des APIs Web
  • Savoir mettre en forme avec CSS

Public

  • Développeurs
  • Chefs de projets

Programme

Jour 1

Introduction

  • Historique des Web Components
  • Compatibilité avec les navigateurs
  • Où trouver des web components ?
  • Rappels sur les modules

Custom Elements

  • Autonomous custom element vs Customized built-in Elements
  • Lifecycle callbacks
  • Synchroniser les propriétés avec les attributs
  • Champs de formulaires custom

Shadow DOM

  • Une encapsulation pour les Web Components
  • Mode ouvert ou fermé
  • Scoped CSS
  • Les sélecteurs CSS spécifiques aux Web Components
  • Custom properties pour personnaliser les composants

HTML Templates and slots

  • Les templates pour simplifier et optimiser le développement
  • Les slots pour projeter du contenu

Jour 2

Stencil

  • Un compilateur de web components
  • Les composants du framework Ionic
  • Props et State
  • Lifecycle
  • Events

Lit

  • Lit, le successeur de Polymer
  • Le tagged template literal lit-html
  • Reactive properties
  • Mettre en forme avec le tagged template literal css
  • Lifecycle
  • Events

Intégration avec les frameworks

  • Encapsuler son code Angular avec Angular Elements
  • Créer des Web Components avec React
  • Alléger son code React avec Preact
  • L'intégration dans Vue.js

Moyens pédagogiques et techniques

  • Formateur validé par nos équipes techniques et pédagogiques
  • Salle de formation informatisée
  • Support de cours numérique

Suivi et appréciation des résultats

  • Questions orales ou écrites (QCM)
  • Exercices pratiques
  • Formulaires d'évaluation
Dernière modification le 21/10/2022