Formation Stencil JS
| 1490€ HT / personne |
| 2 jours (14 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
⭐⭐⭐⭐⭐ 4,8/5 sur Google My Business. Vous aussi, partagez votre expérience !
vAfficher tous les témoignages
⭐⭐⭐⭐⭐ 4,8/5 sur Google My Business. Vous aussi, partagez votre expérience !
Noter la formation
| 1490€ HT / personne |
| 2 jours (14 heures) |
