Sélectionner une page
Formations Langage JavaScript Formation Stencil JS

Formation Stencil JS

Rated 4,5 out of 5
Logo Formation StencilJS
Prix 1995€ HT / personne
Durée 3 jours (21 heures)

Paris | Classe Virtuelle

Il ne reste que quelques places
Cafés et déjeuners offerts en interentreprises
Disponible en intra-entreprise pour former votre équipe
Aide au Financement 4000€ de Bonus Atlas en CPF

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

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

Rated 4,0 out of 5
31 mars 2023

Je recommande la formation

Radhouene B. de chez CEWE

vAfficher tous les témoignages

Rated 4,0 out of 5
31 mars 2023

Je recommande la formation

Radhouene B. de chez CEWE
Rated 5,0 out of 5
31 mars 2023

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

Cécile T. de chez HARDIS GROUPE SAS
Rated 4,0 out of 5
31 mars 2023

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.

Cyril M. de chez VISEO
Rated 5,0 out of 5
31 mars 2023

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

Camille C. de chez HARDIS GROUPE SAS

Noter la formation

Prix 1995€ HT / personne
Durée 3 jours (21 heures)

Paris | Classe Virtuelle

Il ne reste que quelques places
Cafés et déjeuners offerts en interentreprises
Disponible en intra-entreprise pour former votre équipe
Aide au Financement 4000€ de Bonus Atlas en CPF

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

partenaire sncf
partenaire hp
partenaire allianz
partenaire sfr
partenaire engie
partenaire boursorama
partenaire invivo
partenaire orange
partenaire psa
partenaire bnp
partenaire sncf
partenaire hp
partenaire allianz
partenaire sfr
partenaire engie
partenaire boursorama
partenaire invivo
partenaire orange
partenaire psa
partenaire bnp