Formation Stencil
Développez et partagez des web components grâce à notre formation de 2 jours !
Vue d'ensemble
Connaissances de TypeScript ou JSX, HTML et CSS
Objectifs pédagogiques
Programme détaillé
Introduction à la formation Stencil
Retour général sur le développement web
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
Objectifs de cette formation 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
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
Les items Context
Manipuler tableaux, objets et fonctions au sein des composants
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
Formulaires
Développer un composant contenant un formulaire
Formulaires avancés
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 />
Service Workers
L’API Service workers et les PWAs (Progressive Web Apps)
Utiliser Workbox
Options de configuration
Utiliser un service worker personnalisé
Intégration des composants
Utiliser des composants Stencil avec d’autres frameworks : Angular, React, Vue, Ember
Prochaines sessions
Ils nous font confiance
Cette année notre filière Développement Web & Fullstack a accompagné plus de 111 entreprises dont :
Avis des participants
session très agréable, dense mais toujours agréable. formateur très à l'écoute, prends le temps de répondre aux questions. on apprends l'utilisation des fonctions mais aussi les processus mis en œuvre derrière ces fonctions. cela contribue à une compréhension en profondeur des sujets.
Très bon instructeur qui explique toujours en montrant du code, aucune slide et une présentation vivante ce qui permet de rester intéressé et concentré tout au long ! On nous laisse beaucoup de temps pour faire les exercices aussi donc ça permet de vraiment réfléchir…
Merci à Yasmine pour ces 3 jours de formation
RAS, j'ai passer un bon moment et j'ai hâte de pouvoir mettre tous ça en pratique dans mes devs. Seul bémol, j'ai reçu le mail indiquant les logiciels nécessaires seulement un jour avant le début de la formation. J'ai pu contourner les restrictions du PC…
Très bon formateur : pédagogue, n'hésite pas à faire des zooms sur certains concepts qui pouvaient me manquer, s'appuyer sur des choses qui peuvent mettre réellement utile au quotidien. Déroulé de la formation logique et permettant d'aller crescendo dans les difficultés pour avoir des bases…
Votre formateur
Romain B.
Formateur JavaScript & Angular
Romain intervient sur des formations portant sur le développement web et fullstack. Parmi les formations qui lui sont confiées figurent notamment « RxJS » et « Redux ». Son activité de formation remonte à 2007, soit plus de 15 ans d’expérience.
Financement
Cette formation est éligible aux financements OPCO et FNE-Formation. Nos équipes vous accompagnent dans le montage de votre dossier.
Questions fréquentes
Combien de temps dure la formation Stencil ?
Cette formation se déroule sur 2 jours.
Quels sont les prérequis pour suivre la formation Stencil ?
Connaissances de TypeScript ou JSX, HTML et CSS
Quel est le prix de la formation Stencil ?
En inter-entreprises, elle est à 1 400 € HT par participant ; en intra-entreprise, elle est à 3 700 € HT pour le groupe. Un tarif sur-mesure est également disponible sur devis.
La formation Stencil délivre-t-elle une certification ?
Cette formation ne délivre pas de certification. Une attestation de fin de formation vous sera remise à l'issue de la session.
La formation Stencil est-elle éligible à un financement OPCO ?
Oui, cette formation est éligible aux financements OPCO et FNE-Formation. Nos équipes vous accompagnent dans le montage de votre dossier.
Choisissez votre formation
Mon contact chez SPARKS est professionnel et très réactif. Les échanges sont simples, efficaces, et la collaboration se déroule dans d'excellentes conditions.