Des composants vraiment réutilisables grâce aux Web components

En tant que développeuse ou développeur front, vous avez sans doute déjà entendu parler des web components. Belle promesse depuis quelques années d’une possibilité de création de composants réutilisables pour nos applications, ce standard a depuis été éclipsé par l’émergence des frameworks JavaScript tels que React ou Angular. Il est peut-être en train de gagner en interêt à nouveau.

Qu’est-ce qu’un web component ?

Il s’agit d’un standard W3C introduit avec HTML5 en 2014. Il permet la création de composants d’interfaces réutilisables. Les composants créés de cette manière sont utilisables dans du code HTML de la même manière qu’une balise standard comme <div> ou <p>. Vous pouvez par exemple créer un composant qui afficherait un planning à vos utilisateurs et utilisatrices. Et malgré la complexité que ce composant comporte, il serait simplement appelé avec une balise <aa-planning></aa-planning>, chaque web component devant être préfixé (ici : “aa-”).

Si vous faites du développement front, ce concept doit vous être familier. Le découpage en composants est la clé de voûte des frameworks JavaScript tels que React ou Angular. Ces derniers ayant grandement gagné en popularité ces dernières années, les web components sont un peu tombés dans l’oubli. Et, paradoxalement c’est peut-être grâce à la montée en puissance de plusieurs frameworks front que les web components vont regagner en popularité.

Des composants agnostiques de tout framework

Depuis quelques temps maintenant, React et Angular ne sont plus les seuls outils pour créer des interfaces front-end. En effet, des alternatives comme Vue ou Svelte s’imposent comme vrais challengers et amènent leur lot d’innovations.

Mais dans une entreprise avec un contexte multi-équipes et multi-projets, cette possibilité de choix apporte également quelques problématiques : comment partager un composant créé pour un framework spécifique ?

Créer et maintenir un design system, est un investissement lourd. Il semble déraisonnable d’envisager la création et la maintenance de plusieurs design system en parallèle pour pouvoir utiliser plusieurs technos dans vos équipes.

A contrario, choisir un framework et n’utiliser que celui-ci est un choix plus raisonnable. Néanmoins, il est dommage dans ce cas de ne pas pouvoir bénéficier des avantages proposés par les frameworks concurrents. Il est également dommage de ne pas choisir le bon outil pour le bon projet : un widget consommé depuis une application React doit-il être conçu avec React ? Un portail web doit-il être développé à l’aide d’Angular juste parce que ce choix a été fait en amont ?

Les web components proposent le meilleur des deux mondes.

Un web component est une mini-application “encapsulée” dans une balise, à l’intérieur on peut trouver n’importe quelle technologie : du JavaScript pur, du Svelte ou encore du Stencil. En étant cloisonné, il devient consommable par n’importe quelle application qu’elle soit conçue avec React, Angular ou du simple HTML. Il embarque également ses propres styles, il est donc complètement autonome et facilement réutilisable peu importe le contexte.

Étant dès le départ conçu de manière autonome, un web component ne souffre pas de dépendances superflues. Fini les design system dans lesquels il faut embarquer “toute la Terre” pour afficher un simple bouton.

Un design system conçu à base de web components offre donc une grande réutilisation des composants et permet également d’être libre du choix de la technologie de l’application parente. Il vous affranchit également des mises à jour importantes et de l’obsolescence d’un framework.

Mais comment on fait un web component ?

Un web component fonctionne avec du code JavaScript, qu’il est bien sûr possible de générer avec un framework ou un compilateur. Mais prenons l’exemple d’un composant que nous écrirons en pur JavaScript : un simple HelloWorld.

Un web component minimaliste

• Le web component doit étendre la classe HTMLElement et être défini comme un customElements.
• Dans la classe HelloWorld on trouve une méthode connectedCallback qui sera appelée une fois le composant instancié.
• Dans cette méthode, nous attachons à notre composant un shadow DOM qui permet d’avoir un DOM propre à notre composant et cloisonné.
• Ensuite nous modifions le code HTML de la racine de ce shadow DOM pour y insérer une balise h1.

Voici comment appeler le web component “aa-hello-world”

Le rendu dans le navigateur, avec l’inspecteur d’éléments de Chrome

Gérer des propriétés et du contenu

Ajoutons quelques fonctionnalités à notre composant, nous allons lui permettre d’afficher du contenu et lui permettre de gérer une propriété userName qui, si elle existe, remplacera “world”.

Notre composant sait maintenant gérer une propriété “userName” et afficher du contenu

• Nous récupérons la propriété userName via la méthode getAttribute(), nous pouvons l’injecter dans notre balise de titre h1.
• Nous récupérons le contenu de notre composant via slot qui est ajouté au HTML après notre h1. Il est tout à fait possible de gérer plusieurs slots et de les nommer.

Nous passons du contenu et des propriétés à notre composant de la même manière qu’une balise HTML classique.

Gérer des événements

Nous allons maintenant ajouter un bouton à notre composant. Notre page HTML va surveiller s’il est cliqué et afficher un message dans la console le cas échéant.

Notre composant affiche désormais un bouton et émet un évènement lorsque celui-ci est cliqué.

• Nous créons un button dans le Document.
• Nous ajoutons du texte dans ce bouton : “Click me!”
• Au clic sur ce bouton, nous créons et émettons un évènement custom onClick lié à notre composant.

Notre page HTML écoute maintenant l’évènement “onClick” de notre composant.

Avec un peu de style

Ajoutons maintenant un peu de style CSS basique à notre composant. Nous allons appliquer la couleur bleue au titre de notre composant.

Notre composant gère maintenant ses propres styles CSS.

• Nous écrivons nos styles CSS dans une chaîne de caractères.
• Nous créons une balise <style> qui contient les styles.
• Nous ajoutons cette balise au shadow DOM de notre composant.

Les styles de notre composant ne s’appliqueront qu’à notre composant. Si nous ajoutons une balise h1 à la page qui appelle notre composant, la couleur bleue ne s’y appliquera pas.

Conclusion

Nous venons de créer un composant facilement réutilisable, minimaliste, sans aucune dépendance qui gère des propriétés, du contenu, génère son template et communique vers l’extérieur avec des évènements.

Ceci n’est bien sûr qu’un exemple et un léger aperçu de ce que peuvent faire les web components. Il est tout à fait possible de coupler tout ça avec votre outillage habituel (WebPack, TypeScript etc.) pour créer un workflow fiable et performant.

Dans cet article nous avons créé un composant avec du JavaScript pur, mais il est bien sûr possible de créer des web components à l’aide d’un framework ou d’un compilateur.

Le code source de ce composant est disponible sur Github.