Formation Web Components, Stencil et Lit
Les Web Components sont un ensemble de spécifications proposées par le World Wide Web Consortium (W3C) qui visent à fournir une manière standardisée de créer des composants réutilisables pour les applications web. Ils permettent aux développeurs de créer des éléments HTML personnalisés qui peuvent être utilisés dans n'importe quelle application web, indépendamment du framework ou du système de gestion de contenu (CMS) utilisé. Les Web Components comprennent plusieurs spécifications qui travaillent ensemble pour permettre la création de composants personnalisés : • Custom Elements : une spécification qui permet de créer de nouveaux éléments HTML personnalisés. • Shadow DOM : une spécification qui permet de créer un arbre de DOM (Document Object Model) séparé pour chaque composant, ce qui permet de masquer le code du composant aux autres éléments de l'application. • Slots et HTML Templates : une spécification qui permet de définir des modèles de contenu qui peuvent être réutilisés dans différents composants. Les Web Components désormais supportés par tous les navigateurs. 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
- 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
Méthodes mobilisées
- Un formateur validé par nos équipes techniques et pédagogiques sera présent pendant toute la durée de la formation
- Pour les formations en présentiel, une salle de formation sera mise à disposition et équipée d'ordinateurs portables, d'un accès Wi-Fi, d'un projecteur et d'un tableau blanc. En distanciel la session sera suivie sur Zoom ou autre outil de visioconférence sur demande (Teams, Webex, Google Meet...).
- Un support de cours en version numérique sera remis à chaque participant
Modalités d’évaluation
- Questions orales ou écrites (QCM)
- Exercices pratiques
- Auto-positionnement en amont et aval de la formation
Accessibilité aux personnes handicapées
Nous nous engageons à rendre notre formation Web Components, Stencil et Lit accessible aux personnes en situation de handicap. Merci de nous contacter afin que nous puissions réaliser les adaptations nécessaires en amont de la formation.Avis
Stéphane F.
Samuel B.
La formation
I found it quite difficult to follow along during the individual work due to the time limitations and the number of new concepts that were introduced.
Les +
It was interesting getting an introduction to various web concepts that I had hardly known anything about previously.
Samuel H.
La formation
Good overview for many topics.
Would have been good to have access to the course materials and exercises before the course started, to prepare and maybe also prepare questions etc.
Kostianty K.
La formation
Maybe adjust materials a bit for the purpose. For example, to show cache functionality to create a tiny editor application, and show that it doesn't work before the additions with cache, and then show how to make it offline by adding cache.
Les +
I enjoyed to see how still immature is Web and JS as a development platform after 25 years of evolution. Even development tools, like VS Code, are incredibly primitive, for example, it is not clear on how to debug JS code directly from VS Code.
It was very useful for me to see Chrome Development Tools in action. I would gladly see more about it, maybe even 1-2 days course dedicated to it.
I also liked the live examples, especially when code is created by the teacher only. I was trying to follow it, repeating the actions locally, and it was very useful for me.
Erik L.
La formation
I'm not too experienced with JavaScript, so while it was reasonable easy to follow what I did, I'm overall too slow when it comes to write JavaScript
Les +
Nice to see many new technologies and what you think about them
Stéphane G.
Les +
Availability, mastering of the trainer. Romain is really mastering the subject and is able to pass his knowledge to the audience. Moreover, he gives any resources that can help to dig into different subjects. I recommend to follow training with him.
Emil H.
Niklas D.
La formation
Some exercises could have a premade solution that could be viewed, would have helped me alot maybe in a readme format so it could be read when I got stuck on some small issues
Les +
calm and very knowledgeable trainer, Thanks Romain