Stencil ou LitElement / Polymer ?

Si vous souhaitez créer des composants réutilisables, plutôt que React, les deux meilleures solutions sont aujourd’hui Stencil ou LitElement / Polymer. Reste à choisir entre les deux.

Dans tous nos autres guides, nous vous donnons des réponses assez tranchées sur la technologie à choisir, car nous ne cessons de répéter qu’un outil se choisit en fonction d’un besoin. Or cette fois, les deux librairies répondent exactement au même besoin, de façon très similaire. Exceptionnellement, il va donc falloir choisir suivant votre préférence.

Cela n’est de toute façon pas un choix stratégique : le principe de ces librairies est qu’elles généreront à la fin des Web Components natifs. Vous n’êtes donc pas lié/e à la librairie, et pourrez en changer à tout moment.

La syntaxe de templating

La façon de gérer le templating est le seul détail qui distingue LitElement et Stencil.

Stencil utilise le JSX, c’est-à-dire la même syntaxe que React. Bien qu’il s’agisse d’une technique qui ne soit pas standard, elle a de nombreux avantages en terme d’assistance au développement et sera familière à ceux qui connaissent déjà React.

LitElement, lui, a trouvé une astuce : bien que le templating n’existe pas encore dans le standard JavaScript, lit-html se sert d’une fonctionnalité avancée de l’ES6 pour y parvenir. LitElement est donc plus proche des standards.

Fondamentaux

Dans tous les cas, ce qui est important, c’est d’être au point sur le standard des Web Components. Stencil et LitElement ne sont qu’un complément, que vous pourrez choisir dans le programme.

Découvrez notre formation Web Components