Le compilateur Stencil pour composants web arrive en bêta

Une version bêta du compilateur open source Stencil, lequel permet de construire des composants web et des applications web progressives (PWA), sera disponible en mai. Une version de production 1.0 devrait arriver au milieu de l’été.

Voici un exemple de ce à quoi ressemble un composant Stencil.

Développé par Ionic, à l’origine d’une technologie de développement mobile cross-platform du même nom, le compilateur Stencil permet de construire des composants web natifs réutilisables compatibles avec plusieurs frameworks. Il traduit les principes des frameworks populaires en outil de compilation plutôt qu’en outil runtime. Les composants Web sont générés et s’exécutent dans n’importe quel navigateur prenant en charge la spécification Custom Elements. Les composants peuvent s’exécuter dans des frameworks comme Angular et React ou sans framework. Les composants sont de simples éléments HTML. De plus, Stencil peut être utilisé en remplacement des frameworks front-end traditionnels. Par ailleurs, il peut générer des composants avec des polyfills pour les navigateurs qui en ont besoin.

Une version disponible sur GitHub

« Stencil permettra d’envoyer moins de code au navigateur et répondra ainsi aux normes de performance établies pour les applications web progressives (PWA) », a déclaré Max Lynch, CEO de Ionic et contributeur de Stencil. L’une des fonctions des composants Web est de décharger le code des composants vers le navigateur et d’effectuer un pré-rendu des pages.

La future version bêta devrait être plus stable et plus rapide que la version alpha actuellement disponible. Stencil supportera :

– TypeScript : les composants peuvent servir les classes TypeScript/ECMAScript 6 avec Décorateur et métadonnées.

– Capacités de rendu JSX.

– Un système de rendu DOM virtuel à l’intérieur des composants Stencil.

– Le data-binding unidirectionnel.

– Un pipeline asynchrone similaire à React Fiber.

– Le « lazy-loading » (ou chargement paresseux), pour le regroupement de composants connexes.

– Syntaxe de Angular et React.

Même si Stencil a été construit pour le framework Ionic, pour générer les composants UI de la plate-forme de développement mobile, le compilateur n’a pas besoin de Ionic pour fonctionner. Stencil est téléchargeable sur le référentiel Github et le site du projet fournit une documentation sur la façon d’utiliser le compilateur.

chevron_left
chevron_right