Formation Stencil

Une formation Stencil, un outil inspiré de React et créé par l’équipe d’Ionic, pour créer facilement un design system avec des Web Components réutilisables dans n’importe quel projet !


Pourquoi une formation Stencil ?

React a surtout introduit une façon de faire des composants. Mais un composant React ne fonctionne que dans des projets React, or ce n’est pas l’outil le plus adapté pour tous les projets.

Il existe aujourd’hui une solution bien plus intéressante : avec Stencil, vous pouvez créer des composants avec la même syntaxe que React, mais dont le résultat final sera des Web Components natifs : c’est-à-dire que vous pourrez les réutiliser dans n’importe quel projet, qu’il s’agisse d’un site web ou d’une application créée avec n’importe quel framework JavaScript (Angular, React ou Vue).

Bien qu’il s’agisse d’un outil récent, il est déjà éprouvé : c’est avec Stencil que sont faits les composants d’Ionic, un framework de référence pour la création d’applications mobiles.


Une formation Stencil : pour qui ?

Cette formation s’adresse aux développeurs :

  • elle n’est pas adaptée à des débutants en programmation,
  • la connaissance d’un langage quelconque suffit (PHP, Java, C#…) : nos guides de préparation vous permettront de vous mettre à niveau en JavaScript avant le formation,
  • il n’est pas nécessaire de connaître React.

A noter : Stencil fonctionne uniquement avec des navigateurs modernes (Firefox, Chrome, Safari, nouveau Edge basé sur Chromium).

Pensez à lire les questions fréquentes pour bien choisir votre formation.


Objectifs de la formation Stencil

  • Maîtriser Stencil et le standard des Web Components
  • Créer des composants web réutilisables dans n’importe quel type de projet

Programme de la formation Stencil

Le standard Web Components

Nous commençons par un aperçu du standard des Web Components, avec ses limites, pour comprendre l’intérêt de Stencil.

  • Custom Elements
  • Shadow DOM

TypeScript

TypeScript s’est imposé comme un outil incontournable pour coder en JavaScript. Stencil ne fait pas exception. Nous rappellerons donc les fondamentaux de TypeScript.

Composants Stencil

  • Décorateurs
  • Render
  • Evénements
  • Propriétés et méthodes
  • State
  • Cycle de vie et Watch

Templating

Stencil utilise le même système de templating que React : le JSX.

  • JSX
  • Data-binding
  • Conditions et boucles
  • Slots

Styles

  • Styler son composant
  • Variables CSS

Distribution

  • Transformation en JavaScript natif
  • Build pour les principaux frameworks (Angular, React, Vue)
  • Publication sur un registre comme npm

Routing

Stencil propose un routeur pour des cas simples. Mais si vous avez besoin de routing, c’est probablement que vous souhaitez créer une application. Pour cela, il vous faudra plutôt un framework comme Angular.

Cette formation m'intéresse

Formation Stencil

Formation Stencil

Public : Développeurs

Pré-requis : Connaissance d'un langage de programmation (JavaScript, PHP, Java, C#...)

Session dédiée à votre entreprise, dans vos locaux ou à distance, avec un programme personnalisé :

Obtenir un devis

Eligible à un financement par votre OPCA (FAFIEC/Atlas, AFDAS...).
Non éligible via le CPF. Pourquoi ?