Stencil ou Lit / Polymer ?

En bref : les deux sont équivalents.

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

Contrairement aux frameworks comme Angular, React et Vue qui répondent à des besoins très différents, Stencil et Lit répondent exactement au même besoin, de façon très similaire.

Les deux librairies 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 technique qui distingue Lit 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.

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

Mise à l’épreuve

Lit étant le successeur de Polymer, il bénéficie de sa popularité.

Stencil est plus récent et semble donc moins téléchargé sur npm, mais c’est parce qu’une grande partie de son usage est masqué car indirect via Ionic (dont tous les composants sont en Stencil), qui lui est massivement utilisé.

Cela signifie que Stencil est éprouvé en production. Cela fait la différence sur certains détails comme l’intégration dans les frameworks (Angular, React et Vue) qui sera directe avec Stencil, tandis que cela demandera un peu plus d’intervention manuelle pour Lit.

Conclusion

Les deux outils sont équivalents, il n’y aura donc pas de mauvais choix.

Si vous connaissez déjà ou souhaitez apprendre la syntaxe React, optez pour Stencil.

Découvrez la formation Stencil

Découvrez la formation Lit