Formation Stencil

Introduction à la formation Stencil

Retour général sur le développement web
Nouveautés ECMAScript 6, TypeScript et POO (Programmation Orientée Objet)
Qu’est-ce qu’un Web Component ?
Intérêt pour les développeurs et cas d’utilisation
Historique, positionnement et raison d’être de Stencil

Les Web Components

Concepts fondamentaux et spécifications W3C
Utiliser les templates
Importer du code HTML
Travailler avec le Shadow DOM (encapsulation)
Créer des Custom Elements
Les limites des Custom Elements : support des navigateurs (polyfills), temps de compilation, syntaxe…

Présentation de Stencil

Qu’est-ce que Stencil ? Qu’est-ce que Stencil n’est pas ?
Fonctionnement et concepts fondamentaux
Bénéfices : performance, stabilité, interopérabilité et familiarité
Différences et avantages par rapport à Angular, React, Vue, Polymer, etc
Ressources communautaires
Installer Stencil et ses dépendances

Premiers pas avec les composants Stencil

Démarrer un projet et comprendre la structure initiale
Créer un premier composant Stencil
Anatomie d’un composant Stencil : décorateurs, classes, propriétés…
Fichiers de configuration et styles CSS
Fonction render() et expressions JSX
Bonnes pratiques (nommage des composants, organisation du code…)

Propriétés, méthodes et gestion de l’état des composants

Vue d’ensemble des décorateurs Stencil : component, prop, watch, etc
Cycle de vie des composants et méthodes
Le décorateur @Prop() : ajouter des propriétés aux composants Stencil
Gérer les attributs
Définir l’état d’un composant avec @State()
Différences entre States et Props
Hiérarchie et communication entre composants

Gestion des évènements et interactions utilisateur

Events et Listeners
Décorateur @Event() et classe EventEmitter
Utiliser @Listen() pour gérer les évènements
Lier les listeners aux évènements directement dans JSX
Les items Context
Manipuler tableaux, objets et fonctions au sein des composants

Service Workers

L’API Service workers et les PWAs (Progressive Web Apps)
Utiliser Workbox
Options de configuration
Utiliser un service worker personnalisé

Formulaires

Développer un composant contenant un formulaire
Formulaires avancés

Routage

Installer le package @stencil/router
Les composants inclus (stencil-router, stencil-route, stencil-route-link…)
Définir et configurer des routes
Navigation statique et programmatique
Transmettre des données via une route

Tests unitaires

Configuration du fichier package.json
Les fonctions render() et flush()
Tester les méthodes de composants

Mise en production

Déployer une application Stencil
Publier des web components créés avec Stencil
Collections de composants
Permettre la personnalisation d’un composant avec le tag slot

Intégration des composants

Utiliser des composants Stencil avec d’autres frameworks : Angular, React, Vue, Ember