Formation Stencil

Une formation Stencil, un outil créé par l’équipe de Ionic, pour créer facilement des Web Components, façon React, mais réutilisables dans n’importe quel type de projet !


Pourquoi une formation Stencil ?

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

Il existe une solution bien plus intéressante aujourd’hui : avec Stencil, vous pouvez créer des composants avec une syntaxe similaire à 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 un framework JavaScript (que ce soit 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 4, un framework de référence pour la création d’applications mobiles.


Une formation Stencil : pour qui ?

Stencil permet juste de faciliter la création de Web Components natifs. Cette formation n’est donc qu’une variante de notre formation Web Components, dans laquelle vous trouverez le contexte général.

A noter : Stencil fonctionne avec des navigateurs modernes, à partir de IE11.


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 explorer le standard des Web Components, avec ses limites, pour comprendre l’intérêt de Stencil.

Vous pouvez trouver le détail de ce chapitre dans la formation Web Components.

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
  • ShadowDOM
  • Variables CSS

Distribution

  • Transformation en JavaScript natif
  • Polyfills pour la rétro-compatibilité
  • Utilisation dans 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 ou Ionic.

Cette formation m'intéresse

Formation Stencil

Formation Stencil

Public : Développeurs JavaScript

Pré-requis : Bases de JavaScript

Nous pouvons intervenir dans votre entreprise.

Durée : 2 ou 3 jours

Obtenir à un devis