Stencil ou LitElement / 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 LitElement / 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 LitElement 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 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.

Mise à l’épreuve

LitElement é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 LitElement.

Conclusion

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

Nous avons tout de même une préférence pour Stencil pour 2 raisons :

  • il est basé sur la syntaxe JSX : soit cela sera facile si vous connaissez déjà React, soit vous apprendrez au passage les fondamentaux de React ;
  • il fournit tout l’outillage pour être utilisable facilement en production.

Découvrez notre formation Stencil