Logo Web Components, Stencil et Lit

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

Leeroy L.

le 15 novembre 2024

Fabio N.

le 15 novembre 2024

La formation
Quelques noms de variables étaient différent entre ce qui étaient demandés dans les exercices et la version corrigé des codes sources. Sinon dans la globalité, les exemples et les exercices étaient top.

Mathias G.

le 15 novembre 2024

Arona S.

le 15 novembre 2024

Amir S.

le 15 novembre 2024

La formation
La formation était très bien, bien expliqué. Je n'ai pas mis 5 étoiles, car j'ai du mal a rester concentré longtemps, principalement l'après-midi et il y a eu un moment un enchainement de diapos et j'aurais préféré avoir principalement de la pratique après-midi.

Il y a eu pas mal de choses que j'ai appris qui ne sont pas forcément lié à LitJS et ça c'est une bonne chose, j'en ai bien pris note et ça me sera utile dans mes développements perso.

Le formateur
Très bonne présentation, un bon rythme, ni trop rapide, ni trop lent. Une bonne façon de s'exprimer. très bonnes connaissances techniques et c'est bien également d'essayer des choses supplémentaires qui ne sont pas prévu pour voir les différentes possibilités.

Merci beaucoup pour cette formation !

Les +
Salle bien éclairée
Ecran assez grand
Prérequis installés en amont sans problème
Github avec les éléments à disposition

Mickael G.

le 15 novembre 2024

Mathieu E.

le 15 novembre 2024

Nicolas M.

le 15 novembre 2024

Thomas C.

le 13 novembre 2024

La formation
Formation interactive avec travaux pratiques

Antoine M.

le 13 novembre 2024

La formation
Bon équilibre théorie / pratique

Le formateur
Bonne pédagogie

Charly F.

le 13 novembre 2024

Mathis F.

le 13 novembre 2024

Yoann M.

le 13 novembre 2024

La formation
Trés bien !

Le formateur
Dev en live avec le support et le TP. Maitrise son sujet et pédagogie au top :)

Les +
Insonorisation

Luca G.

le 13 novembre 2024

Tor K.

le 13 novembre 2024

La formation
Est-ce que le utilisation de <Slot> est centrale? Peut-etre de mettre en avance

Le formateur
Excellent travail.

Les +
Le adaptation de formation en live, top.

Thomas M.

le 13 novembre 2024

Stéphane F.

le 04 février 2022

Samuel B.

le 04 février 2022

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.

le 04 février 2022

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.

le 04 février 2022

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.

le 04 février 2022

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.

le 04 février 2022

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.

le 04 février 2022

Niklas D.

le 04 février 2022

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

Julien D.

le 04 février 2022
Dernière modification le 26/12/2022