Stencil, les web components
Apprenez à maîtriser Stencil.js et créez des composants Web réutilisables, performants et interopérables avec tous les frameworks modernes. De la configuration au déploiement, cette formation vous guidera pour devenir un expert en composants agnostiques.
Description
Stencil.js est un framework moderne conçu pour créer des Web Components agnostiques, performants et interopérables avec tout type de projet ou de langage.
Dans cette formation complète, 'Stencil.js, création de composants agnostiques', vous apprendrez à maîtriser tous les aspects de Stencil.js, y compris la gestion des API, des propriétés, des événements, ainsi que des concepts avancés comme la génération statique, l'optimisation des performances, et la création de composants pour des design systems évolutifs.
À la fin de ce cours, vous serez capable de créer, optimiser, et déployer des Web Components compatibles avec n'importe quelle plateforme.
Publics visés
- Développeurs front-end souhaitant créer des Web Components agnostiques.
- Développeurs React, Angular, ou Vue cherchant à partager des composants entre plusieurs projets.
- Architectes logiciels intéressés par la création de design systems évolutifs.
- Freelances ou indépendants voulant publier des bibliothèques de composants universels.
- Développeurs web explorant les Web Components et l'interopérabilité sans framework.
Pré-requis
- Connaissance du HTML, CSS et JavaScript.
- Expérience avec les composants dans des frameworks comme React, Angular, ou Vue.
- Connaissance de la gestion des événements et de l'état dans des applications web.
- Notions de base sur les outils de build (npm, etc.).
- Envie de créer des composants réutilisables et compatibles avec plusieurs environnements.
Compétences
Maîtriser les API Stencil.js, y compris les composants fonctionnels et les méthodes du cycle de vie.
Gérer les propriétés, événements et données réactives dans Stencil.js.
Intégrer des composants Stencil dans React, Angular, Vue ou des applications sans framework.
Optimiser et styliser les composants Stencil pour des performances accrues et un design modulaire.
Utiliser les plugins, générer des applications statiques et configurer les output targets pour différents environnements.
Créer des composants liés aux formulaires (Form-Associated Components) pour des applications interactives.
Mettre en place un design system basé sur Stencil.js et l'intégrer dans plusieurs projets.
Utiliser Stencil Store pour gérer les données réactives globales.
Publier des composants sous forme de bibliothèque et gérer les versions avec npm.
Tester, déboguer et déployer vos Web Components pour des environnements de production.
Contenu du cours
Découvrez Stencil.js et les Web Components.
Introduction à Stencil.js et ses usages.
Pourquoi utiliser Stencil.js pour des composants universels.
Installation et configuration de Stencil.js.
Comprenez l'architecture de projet Stencil.js.
Comparaison de Stencil.js avec les autres frameworks.
Créez des composants modulaires avec Stencil.js.
Créer un composant avec Stencil.js.
Utilisation de JSX dans Stencil.js.
Définir et utiliser des propriétés dans Stencil.js.
Gérer les événements dans Stencil.js.
Maîtriser le cycle de vie des composants.
Utilisation des hooks dans le cycle de vie.
Gérer l'état réactif
Gérer le rendu conditionnel dans Stencil.js.
Utiliser l’élément `Host` dans les composants.
Intégrez vos composants dans n'importe quel framework.
Utilisation de composants Stencil dans React.
Utilisation de composants Stencil dans Angular.
Utilisation de Stencil.js dans Vue.js.
Utilisation de Stencil.js sans framework.
Gérer les output targets dans Stencil.js pour Angular, React, Vue
Découvrez des techniques avancées avec Stencil.js.
Apprenez à utiliser le Shadow DOM.
Gérer les assets et styles dans vos composants.
Créer des composants associés aux formulaires.
Apprenez à générer des composants statiques avec Stencil.js.
Utilisez les Service Workers pour les Progressive Web Apps.
Améliorez les performances avec les Web Workers.
Gérer l'état global avec Stencil Store.
Créez un design system modulaire avec Stencil.js.
Testez et déployez vos Web Components.
Utilisation de Jest pour tester les composants Stencil.
Utilisez Puppeteer pour les tests E2E.
Utilisez VS Code pour déboguer vos composants.
Optimisez et publiez vos composants.
Déployez vos composants sur des plateformes cloud.
Enseignant
Julien Moulin
Fondateur & Formateur Js/Ts
Julien Moulin est un expert en développement full stack (JS/TS) et un leader technique reconnu. Il excelle dans l'adoption de technologies innovantes tout en répondant aux besoins clients. Son approche allie pragmatisme et innovation, avec une expertise couvrant les plateformes e-commerce, les applications métiers et la modernisation des architectures existantes. En mentor passionné, il partage ses connaissances avec pédagogie, encourage l’apprentissage continu, et inspire ses équipes à relever des défis ambitieux.
Vous aimerez aussi
Découvrez de fabuleux cours dans les mêmes sujets
