Formation Stencil JS
| € HT / personne |
| 3 jours (21 heures) |
Présentation
Stencil est un compilateur simple pour générer des composants Web et des applications Web progressives (PWA). Stencil a été conçu par l’équipe d’Ionic Framework pour sa prochaine génération de composants Web mobiles et desktop performants.
Stencil prend des fonctionnalités telles que :
- DOM virtuel
- Rendu asynchrone (inspiré de React Fiber)
- Liaison de données réactive
- Manuscrit
- JSX
Puis génère des composants Web basés sur des normes avec ces fonctionnalités intégrées.
Étant donné que Stencil génère des composants Web conformes aux normes, ils peuvent fonctionner immédiatement avec de nombreux frameworks populaires et peuvent être utilisés sans framework car ils ne sont que des composants Web.
Comme toutes nos formations, celle-ci vous présentera la dernière version stable en date et ses nouveautés (Stencil JS 3.0 ⚡ à la date de l’article).
Objectifs
- Comprendre le fonctionnement de StencilJS
- Savoir l’intégrer au sein d’un framework
Public visé
Développeurs, Chefs de Projets
Pré-requis
Connaissance de TypeScript (ou JSX), HTML, CSS.
Programme de la formation Stencil JS
Introduction
- Qu’est-ce qu’un web component ?
- Pourquoi les utiliser ?
- Différences entre web component et framework
- Vue d’ensemble de Stencil JS
- Programme du cours et fonctionnement
Web component : Les fondamentaux
- Fonctionnement d’un web component
- Lifecycle
- Event Listeners
- Attributes et Properties
- Le style d’un web component
- Templating Js et HTML
- Les slots
- Le shadow DOM
- Styling et host component
- Le changement d’attribut
Web component : Créer des components complexes
- CSS et events
- Slots et slotChange
- Custom events
Créer des web components intelligemment
- Installation de Stencil
- Premier composant avec Stencil
- Utilisation des props
- Slots et style avec Stencil
- Composant à inclure dans un formulaire
- Composant Formulaire
- Two way binding
- Lifecycle Hooks
- Gestion de listes
- Composants dans des composants
Routing
- Installer le package @Stencil/router
- Les composants fournis
- Configuration des routes
- Navigation
- Data & routing
- Protection des routes
State Tunnel
- Intérêt de l’outil
- Utilisation de props dans une structure
- Échange de donnée entre web component
Service Worker
- PWA & Service Worker
- Utilisation de workbox
- Service Worker Personnalisé
Mise en production
- Stencil config et NPM packages
- Publier avec NPM
Intégration dans un framework
- Web component dans une application Angular
- Web component dans une application React
- Web component dans une application Vue
Conclusion
- Synthèse de la formation
- Remise des documents
- Quelques ressources utiles
Pour aller plus loin
Formation Redux et RxJS
Formation MEAN Stack
Formation D3.js
Formation Angular
Formation Ionic
Formation Firebase avec Angularfire
Langues et Lieux disponibles
Langues
- Français
- Anglais / English
Lieux
-
France entière
- Paris
- Lille
- Reims
- Lyon
- Toulouse
- Bordeaux
- Montpellier
- Nice
- Sophia Antipolis
- Marseille
- Aix-en-Provence
- Nantes
- Rennes
- Strasbourg
- Grenoble
- Dijon
- Tours
- Saint-Étienne
- Toulon
- Angers
-
Belgique
- Bruxelles
- Liège
-
Suisse
- Genève
- Zurich
- Lausanne
-
Luxembourg
Nos Formateurs Référents
Erwan
Freelance en Angular depuis la création du framework (Angular 2+), j’ai travaillé avec de nombreuses entreprises comme Allianz, Amadeus, SETEC ou encore Hertz. Au cours de ces expériences professionnelles, j’ai pu échanger, approfondir et affiner mes connaissances.
Aujourd’hui formateur indépendant, j’ai à cœur de transmettre ma passion pour ce framework et pour le monde du web en général !
Témoignages
Je recommande la formation
vAfficher tous les témoignages
Je recommande la formation
Les + : cantine integrée, local sympa avec tout ce qu’il faut pr la pause (avec beaucoup de choix: fruits, boissons, snacks…)
formateur sympa et dispo
Les + : Accessible et claire
Les – : J’aurais aimé pouvoir approfondir avec des cas concrets liés à notre besoin. Il aurait peut-être fallu aller plus loin dans l’intégration de stencil dans un écho système mixte. Déployer un component sur npm c’est bien mais quand on l’a déjà fait, on aimerait aller plus loin sur le fait de faire cohabité un projet Stencil dans un autre framework mais en développant les 2 dans un même projet (type monorepo ou autre). Peut-être besoin de faire un version “avancée” avec ce sujet… !?
Je souhaite suivre : Aucune pour le moment
En synthèse : Content d’être venu, j’ai appris à utiliser les Web Component sans et avec Stencil c’est cool et j’ai passé de bon moment avec mes collègues de formation.
Les + : Bonne vue d’ensemble. Présentation clair.
Les – : Auditoire hétéroclite, parfois un peu trop lent pour moi.
En synthèse : Merci à toute l’équipe
Noter la formation
| € HT / personne |
| 3 jours (21 heures) |
UNE QUESTION ? UN PROJET ? UN AUDIT DE CODE / D'INFRASTRUCTURE ?
Pour vos besoins d’expertise que vous ne trouvez nulle part ailleurs, n’hésitez pas à nous contacter.
ILS SE SONT FORMÉS CHEZ NOUS
