Objectifs
En fin de cours, l’élève doit avoir atteint les objectifs suivants :
- Comprendre les Web Components
- Comprendre comment utiliser Stenciljs pour générer des composants Web et des applications Web progressives (PWA)
- Mettre en œuvre les applications multi-plateforme
- Intégration avec Angular, React et VueJS.
- L’intégration mobile dans le développement des Web Components
- Web Component : créer des composants Web autonomes et réutilisables
- La norme des Web Components.
- Rappels DOM & AJAX.
- Template HTML à chargement différé.
- Shadow DOM, et CSS, les fragments de documents.
- CSS : le besoin d’encapsulation.
- Custom Elements.
- EXERCICES & correction
- StencilJS le compilateur de Web Component proposé par Ionic
- Présentation de Stencil
- Premiers pas avec les composants Stencil
- Propriétés, méthodes et gestion de l’état des composants
- Gestion des évènements et interactions utilisateur
- Routage
- Formulaires
- Service Workers
- Introduction à LIT Web Component Library, une bibliothèque simple qui permet de créer des composants Web légers et rapides
- EXERCICES
- Réutilisation des composants cross-frameworks
- Développement de composants “cross-plateformes/cross-projet”
- Intégration avec Angular, React et VueJS
- 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
- EXERCICES
Conclusion
Analyse d’un cas concret dans le contexte de l’entreprise
- Analyse « critique »
- Retour d’expérience
- Revue des best practices
- Proposition d’architecture du code
Liens