){kind=small}
Outils de composants Web : Une comparaison
Temps de lecture : 12 minutes
Dans le dernier billetnous avons appris les bases des composants Web. Nous avons terminé avec le code nécessaire pour construire un exemple de base. En matière de développement, les choses sont rarement "simples". La construction de composants Web peut impliquer beaucoup de code standard. Si vous avez l'intention de créer plusieurs composants, cela peut devenir assez lourd.
Les outils de composants Web sont une solution parfaite à ce problème. Ils permettent d'abstraire une partie de ce "boilerplate" en un code plus propre et de fournir un flux de travail plus efficace. Encore une fois, comme pour le développement, il existe de nombreux outils parmi lesquels choisir, tous basés sur des opinions différentes quant à la meilleure façon de créer des composants Web.
Dans ce billet, nous allons passer en revue quelques-uns de ces outils et les comparer. Le même composant sera construit afin que les différences de code puissent être mises en évidence. Outre le code, d'autres critères seront comparés :
Caractéristiques : Qu'est-ce qui sort de la boîte ?
Documentation : Exemples ? Des instructions claires ? Des projets de démarrage ?
Facilité de mise en place : Le démarrage d'un composant web nécessite-t-il de nombreuses étapes ?
Support : Forums, Discord, Slack, Communauté, Blogs/articles, YouTube, GitHub
Soutien : Qui assure la maintenance de l'outil ? Qui l'utilise ?
En faisant des recherches, je suis tombé sur un site web qui est un terrain de jeu pour les développeurs qui construisent des composants web, https://WebComponents.dev. Le site énumère toutes ses nombreuses possibilités, mais celle que nous allons utiliser consiste à créer le même composant Web de départ, un compteur, en un seul clic. Le site offre une grande variété d'outils à utiliser.
Lorsque vous commencerez à construire sur WebComponents.dev ou lors de vos recherches, vous verrez les termes "bibliothèque" ou "compilateur" dans la description d'un outil. La différence réside dans le moment où le composant Web est utilisé. Dans le cas des bibliothèques, le composant dépend de l'outil utilisé pour gérer le rendu et la mise à jour. En revanche, les compilateurs disposent d'une étape de construction lors de la création d'un composant qui génère le code nécessaire pour travailler sans avoir besoin de l'outil par la suite.
Passons maintenant à la comparaison !
Pour commencer, voyons ce qu'il faut faire pour créer le composant Counter avec Vanilla JavaScript.
Tout d'abord, nous étendons la classe de base HTMLElement comme point de départ de notre composant Web.
La valeur de comptage est fixée à 0.
Le modèle du composant est alors défini comme html et son style est défini comme style.
Le modèle et le style sont ensuite attachés au DOM de l'ombre pour que nous puissions les voir sur la page.
Une fois le rendu effectué, nous pouvons obtenir des références sur les différentes parties et les actions du composant.
Ensuite, nous définissons les fonctions de la composante inc(),dec()et update(). Remarquez que chaque fois que inc() et dec() sont appelés, update() est également activé. Sinon, la valeur du compteur ne changerait jamais.
Nous avons alors les composantes connectedCallback() et disconnectedCallback() lifecycle. Elles sont appelées lorsque le composant est ajouté ou supprimé de la page. Ici, nous ajoutons et supprimons les récepteurs d'événements des boutons. C'est très important, surtout quand on fait des choses comme des minuteries, pour éviter les fuites de mémoire. Vous trouverez plus d'informations sur les rappels de cycle de vie dans les MDN web docs.
Enfin, la nouvelle classe est attachée au nom de l'élément personnalisé à l'aide de la commande customElements.define.
Si les composants que vous construisez ne sont pas beaucoup plus complexes que cet exemple, l'option Vanilla JavaScript peut vous convenir. De cette façon, vous n'avez pas à vous soucier de l'enfermement dans une bibliothèque.
Si cela vous semble trop compliqué et/ou si vous souhaitez créer un grand nombre de composants avec davantage de fonctionnalités, un outil peut vous convenir.
Voici quelques-unes des nombreuses options disponibles.
Au premier coup d'œil sur le code du composant compteur, vous remarquerez peut-être l'absence d'une classe.
La première ligne de leur site site explique ceci : "Hybrids est une bibliothèque d'interface utilisateur pour créer des composants web avec une forte approche déclarative et fonctionnelle basée sur des objets simples et des fonctions pures.
Si vous aimez la programmation fonctionnelle, Hybrids est peut-être la bibliothèque de composants Web qu'il vous faut.
J'apprécie vraiment que la documentation d'un outil contienne une liste à puces de toutes ses fonctionnalités. La voici, tirée directement de leur site web :
La définition la plus simple - des objets simples et des fonctions pures - pas de classe et cette syntaxe
Pas de cycle de vie global - propriétés indépendantes avec leurs propres méthodes de cycle de vie simplifiées
Composition plutôt qu'héritage - réutilisation facile, fusion ou division des définitions de propriétés
Recalcul ultra rapide - cache intelligent intégré et mécanismes de détection des changements
Modèles sans outil externe - moteur de modèles basé sur des éléments de modèle étiquetés
Outils de développement inclus - Remplacement à chaud des modules pour un développement rapide et agréable
La documentation est alimentée par Gitbook qui fournit une mise en page très propre et organisée. Comme hybrids adopte une approche novatrice pour créer des composants Web en utilisant des fonctions pures, certains concepts de base et d'autres aspects doivent être expliqués. La documentation le fait très bien avec de nombreux extraits de code (avec des boutons de copie dans le presse-papiers) et des liens pour expérimenter des échantillons sur StackBlitz.
Vous utilisez les hybrides comme n'importe quelle autre bibliothèque. Installez-la dans votre projet npm i hybrids
et l'importer et l'utiliser dans votre fichier import { html, define } from 'hybrids';
Des options permettant d'utiliser les modules ES ou un lien vers un fichier unpkg sont également disponibles.
Les principaux moyens que j'ai trouvés pour suivre le développement des hybrides sont GitHub et Gitter. Au moment où j'écris ces lignes, la bibliothèque est activement développée.
Le compte Twitter @hybridsjs ne semble pas être actif.
À part quelques présentations sur les hybrides, il n'y a pas grand-chose sur la construction de composants Web.
La documentation renvoie à quelques articles sur dev.to
Il semble que le créateur des hybrides, Dominik Lubański, soit également le seul responsable de la bibliothèque. Je n'ai pas trouvé de liste d'entreprises/organisations utilisant des hybrides en production.
En comparant le code utilisé pour créer un compteur avec les Lightning Web Components (LWC) à celui du JavaScript Vanilla, vous pouvez voir que beaucoup de choses ont été abstraites. Remarquez qu'au lieu d'étendre un HTMLElement, le LWC étend un LightningElement.
Composants Web Lightning est développé par Salesforce. Je dois avouer que je n'ai aucune expérience avec Salesforce. C'est pourquoi, lors de mes recherches, j'ai été quelque peu déconcerté par toutes les différentes façons d'intégrer la plateforme Salesforce. Dans ce billet, je me concentrerai sur la création de composants Web avec Lightning Web Components. Mais si vous êtes un développeur Salesforce et que vous souhaitez créer des composants Web pour l'écosystème, je ne pense pas que vous puissiez vous tromper avec LWC. Vous trouverez plus d'informations à ce sujet ici.
Comme indiqué sur leur site, les composants web Lightning (note : Lightning Web Components est le cadre, les composants web Lightning sont les composants créés. Les majuscules sont importantes) sont :
Rapide comme l'éclair - Un moteur d'exécution léger de 7 kb optimisé pour les performances, avec un minimum de code de base.
Basé sur les standards - Lightning Web Components utilise le HTML standard, le JavaScript moderne (ES6+) et le meilleur des composants Web natifs.
Facile à apprendre - Laissez les abstractions derrière vous et créez des éléments personnalisés avec HTML, JavaScript et CSS.
Il semble qu'il s'agisse d'une revendication standard de la part de nombreux outils de composants Web.
La documentation sur LWC se trouve à différents endroits dans Salesforce. Il y a lwc.dev qui contient un guide avec des extraits de code interactifs. Il vous donne des informations et vous présente de petits défis à relever dans un éditeur de code et vous permet de voir immédiatement les résultats.
Un autre ensemble de documentation se trouve sur le domaine developer.salesforce.com domaine. C'est peut-être ce qui était utilisé avant le site lwc.dev. Les informations qu'il contient sur LWC sont plus complètes mais moins interactives.
Parmi les autres sources d'information, citons les composants recettes, la galerie d'exemples d'applicationset un terrain de jeu de code.
Lightning Web Components dispose d'un outil d'échafaudage permettant de rendre une application opérationnelle en quelques commandes :
npx create-lwc-app my-app
cd my-app
npm run watch
Une application Web progressive (PWA) peut également être créée en utilisant le drapeau -t pwa drapeau.
Sur cette pageelle répertorie les moyens d'en savoir plus sur LWC. Il existe des liens vers un forum Salesforce Stack Exchange pour poser des questions. Vous pouvez suivre des cours sur Pluralsight et Salesforce Trailhead. Faites une recherche sur YouTube pour Lightning Web Components et vous obtiendrez de nombreux résultats de personnes montrant comment créer des composants.
Comme indiqué précédemment, il s'agit d'un projet Salesforce et il semble qu'une équipe d'ingénieurs y travaille.
En ce qui concerne les utilisateurs, Lightning Web Components est tellement compatible avec leur plateforme que de nombreux développeurs Salesforce l'utilisent.
(Note : TypeScript peut également être utilisé pour construire des composants Web avec LitElement.) Un aperçu rapide du code peut donner l'impression qu'il y a très peu de différences entre les composants construits avec Vanilla JavaScript et LitElement. Une différence petite mais significative est la façon dont le modèle du composant est mis à jour.
Comme indiqué sur le siteLitElement utilise lit-html pour définir et rendre les modèles HTML. Les mises à jour du DOM sont rapides comme l'éclair, car lit-html ne rend que les parties dynamiques de votre interface utilisateur - aucun diffing n'est nécessaire".
Cela est dû en partie aux les littéraux de modèle étiquetés.
À la question "Pourquoi utiliser LitElement ?", la réponse est la suivante :
"Délicieusement déclaratif" - Utilisez JavaScript dans votre modèle.
"Rapide et léger" - Comme nous l'avons déjà mentionné, les mises à jour sont beaucoup plus rapides grâce à la méthode de mise à jour qui consiste à ne recréer que les parties qui changent.
"Interopérabilité sans faille" - LitElement adhérant aux normes établies par les Web Components, ses composants peuvent être autonomes ou compatibles avec n'importe quel framework ou bibliothèque frontale.
Il s'agit là encore d'affirmations faites par un grand nombre d'outils de composants Web.
La documentation est assez minimaliste. Trois sections seulement.
Essayez : une démonstration pas à pas de la création d'un composant Web avec un éditeur de code StackBlitz intégré.
Guide : un aperçu plus approfondi de LitElement avec un éditeur de code en ligne
API : un explorateur d'API
La section "Getting Started" du guide indique que vous pouvez créer un composant autonome ou un composant destiné à être spécifique à une application.
La première étape de la création d'un composant autonome consiste à télécharger un projet de démarrage (JavaScript ou TypeScript).
Installer ses dépendances.
Si vous utilisez la version TypeScript : npm run build ou npm run build:watch.
Ensuite npm run serve.
Le processus d'ajout de LitElement à un projet existant est standard.
Installer la bibliothèque : npm i lit-element
Créer un composant.
Importer le composant.
Utiliser le composant.
Une autre option consisterait à utiliser les générateurs Open Web Components générateurs. Il s'agit d'un CLI interactif qui permet d'échafauder un composant Web unique ou une application de départ.
Dans la section Communauté du site web de LitElement, il y a une liste de quelques ressources. Il s'agit notamment d'un espace de travail Slack, d'un Account Twitter assez actif, d'une liste de diffusion et bien sûr, de StackOverflow.
LitElement fait partie du projet Polymer développé par Google.
Il existe un Wiki sur le GitHub de Polymer qui répertorie les utilisateurs de Polymer / LitElement. Cela inclut, bien sûr, diverses propriétés de Google, mais aussi Coca-Cola, McDonald's, Electronic Arts, et bien d'autres.
Lorsque l'on regarde le code utilisé par Stencil pour créer le composant compteur, il y a quelques "@" dans le code. Il s'agit de décorateurs issus de TypeScript. Stencil les utilise pour abstraire une partie du code de base.
Tout au long de leur siteStencil veut faire savoir que l'un des objectifs de l'outil est de rendre la création de composants Web aussi simple que possible.
"Par rapport à l'utilisation directe des Custom Elements, Stencil fournit des API supplémentaires qui simplifient l'écriture de composants rapides.
Sur la page d'accueil du site web et dans l'introduction, Stencil s'assure de noter qu'il est un compilateur. Une fois que le composant Web est généré, il ne dépend plus de Stencil.
Stencil veille à ce que ses caractéristiques soient clairement énoncées :
Basé sur des composants Web
Pipeline de rendu asynchrone
Prise en charge de TypeScript
Liaison de données à sens unique
Pré-rendus des composants
Chargement paresseux des composants
Support JSX
Composants sans dépendance
DOM virtuel
Génération de sites statiques (SSG)
Un mot pour décrire la documentation du Stencil serait "complète". On peut dire que beaucoup de temps et d'efforts ont été consacrés à sa réalisation.
La première section, Introduction, commence par expliquer la raison d'être de Stencil.
Ensuite, il y a des sous-sections :
Buts et objectifs - Les objectifs et la proposition de valeur de Stencil
Mon premier composant - décomposition d'un échantillon de composant Stencil
FAQ - une liste de réponses assez longue et bien organisée
Qu'est-ce qu'un système de conception ? - La documentation prend le temps de définir ce qu'est un système de conception !
Stencil for Design Systems - Dans la section précédente, ils vous éduquent et vous expliquent comment Stencil peut les créer pour vous.
Encore une fois, il ne s'agit que de la première section ! La documentation aborde tous les aspects des composants, la manière d'intégrer les composants générés dans les frameworks FrontEnd les plus courants, les options de configuration, les guides, les tests et bien d'autres choses encore. Je n'ai jamais eu de question à laquelle la documentation n'ait pas répondu.
Dans la partie Introduction de la documentation, il y a une section "Getting Started". Stencil dispose d'un outil CLI interactif.
Exécution npm init stencil permet de créer un composant Web, une application Stencil ou une Progressive Web App prête pour la production.
Dans la section Communauté, il y a des liens vers Twitter, Slack et GitHub. Il y a également beaucoup de vidéos YouTube et d'articles/blogs sur Stencil.
Stencil est maintenu par l'équipe de base d'Ionic avec les contributions de la communauté.
Les logos des entreprises qui utilisent Stencil figurent en bonne place sur la page d'accueil. Il s'agit d'Apple, d'Amazon, de Porsche, d'Arm, de Panera et de Microsoft.
Il ne s'agit là que de quelques-uns des outils de plus en plus nombreux qui permettent de créer des composants Web. Si aucun de ces outils ne figure sur votre liste de contrôle de développeur, je vous conseille de jeter un coup d'œil à ce qui est disponible sur https://WebComponents.dev. En ce qui nous concerne avec Vonage, nous avons décidé d'utiliser Stencil. Avec le support de TypeScript, une excellente documentation et la possibilité de créer des systèmes de conception, nous sommes sur le point de terminer notre projet de composants Web.
Dans le prochain article, nous construirons un composant Web avec Stencil du début à la fin.
Avez-vous construit un composant Web à l'aide de l'un de ces outils ? Peut-être un outil que nous n'avons pas mentionné ? Quelle a été votre expérience ? Faites-nous en part dans la section des commentaires.