J’ai publié un web component !
Les web components : buzz word du moment. Étant intrigué par ce sujet, je me suis penché sur la démarche à suivre pour en créer et publier un.
Introduction
Avant de démarrer, je vous restitue le contexte dans lequel je me trouve. Comme je dirais en entretien de mission :
Je m’appelle Ronan, je suis développeur Full Stack, aussi bien Frontend que Backend, avec une expérience dans le monde merveilleux du DevOps ;)
… (vous avez compris le message)
Le message que je veux faire passer est que je ne suis pas un expert du sujet, et du Frontend en général, mais simplement quelqu’un qui s’intéresse au sujet et qui aime découvrir de nouvelles choses. Mon expérience actuelle côté Front est classique : de bonnes bases en JavaScript ; la connaissance du fonctionnement d’un navigateur et l’utilisation de Framework JavaScript populaire du moment, tels que Vue.js ou Angular (Et oui, faut bien vivre et s’adapter au marché…).
Problématique
Ceci une fois introduit, passons à la question qui m’a conduit à la rédaction de cet article.
Comment fait-on pour créer et publier un composant web ?
En effet, étant utilisateur de Vue.js ou Angular, je ne m’étais jamais trop posé cette question. J’ai souvent utilisé des composants web en étant utilisateur et sans me questionner davantage à ce sujet. C’est en lisant des tweets d’autres développeurs ou des articles traitant des enjeux et des bienfaits des web components, que mon intérêt s’est réveillé. Pour la petite anecdote, j’avais suivi une présentation de Lit-element, sans réellement connaître ce sujet, ce qui m’avait desservi à l’époque pour comprendre la conférence.
Web component, qu’est-ce que c’est ?
En reprenant la définition extraite de la page sur les web components sur MDN :
“Les Composants Web sont constitués de plusieurs technologies distinctes permettant de créer des composants d’interface graphique personnalisés et réutilisables, qui ont été créés en utilisant des technologies web libres.”
En tant que développeur, avoir une normalisation d’un web component fournira plusieurs avantages :
- Tout d’abord, il existe un socle commun pour créer et utiliser des web components, unifiant les compétences des développeurs, qui actuellement, parlent et prêchent chacun leur framework JavaScript, forçant selon moi, de faire des choix technologiques approximatifs (On te voit Ext JS !).
- Ensuite, la plupart des navigateurs ont déjà intégré cette norme pour que les web components soient lus et interprétés de la même façon, évitant de revivre l’épisode d’Internet Explorer, où il fallait développer du code supplémentaire spécifiquement pour ce navigateur (et ses versions antérieurs).
- On trouve aussi l’aspect de réutilisation et d’interopérabilité d’un web component par n’importe quel framework JavaScript (hormis React pour le moment !).
- Enfin, l’optimisation représentant l’une des parties prises des web components, qui n’embarqueront plus que l’essentiel et auront une taille de paquet réduit, permettant d’optimiser son application sans trop d’effort.
Choix de l’outil pour créer le composant
Il est possible de créer un web component avec du JavaScript natif avec custom-elements. Mais j‘ai utilisé la librairie Lit. Celle-ci permet, entre autres, une simplification du code à écrire et offre la possibilité de mettre en place plus facilement le CSS dans le composant.
C’est quoi ton composant web ?
Pour mon premier web component, je suis parti sur quelque chose de simple : La création d’un footer respectant les couleurs de la charte graphique de mon entreprise (voir ci-dessous).
Le composant <footer-slickteam></footer-slickteam> comprend les paramètres suivants :
- Le contenu du texte affiché sur la gauche du composant,
- Pour chaque icône : le masquage de celui-ci ou non,
- Pour chaque icône : l’URL cible.
Vous pouvez retrouver le code source ici.
L’outillage de Dev
ViteJs
Vite est un ensemble d’outils pour le développement qui offre la possibilité de gagner du temps et avec une meilleure expérience utilisateur, destiné principalement pour les frameworks Web récents. Il fourni un serveur web qui comprend HMR (Hot Module Replacement), c’est-à-dire, qu’au lieu de recharger le module en le “recompilant”, comme réalisé avec Webpack, il recharge à chaud le fichier qui est remplacé et permet un rafraîchissement instantané. Il fournit aussi un outil pour optimiser et builder, adapter pour n’importe quel framework JS grâce un système de plugin, les fichiers JavaScript destinés pour la production.
Storybook
Storybook est un outil destiné à aider au développement UI (User interface). Il permet de tester, sans avoir une stack technique complète à démarrer, un composant web en lui explicitant les paramètres entrants. Il est possible d’en tester un directement sur l’outil via une page web générée par ce dernier, en jouant avec les paramètres et en ayant un retour visuel très rapidement.
Publication sur npmjs
Pour publier sur npmjs.org, il faut créer un compte et une organisation si vous voulez que votre composant soit publié indépendamment de votre compte. Ensuite, il faut linker votre compte avec votre CLI NPM sur votre poste ou votre Intégration Continue (CI).
Pour configurer la publication du npmjs, il est nécessaire de mettre les paramètres suivants dans votre package.json de votre projet :
- Author : Le nom de l’auteur du paquet,
- Version : La version du paquet, qui doit être incrémenter à chaque publication,
- Files : Les fichiers qui seront packagés,
- Main : Le fichier cible que sera charger lors de l’installation du paquet,
- Keywords (optionnel) : Les mots clés pour trouver plus facilement le package dans la barre de recherche sur npmjs.org,
- License (optionnel) : La licence soumise sur le droit d’utilisation du composant.
Utilisation sur un framework JavaScript
Voici un exemple réalisé avec Vue.js (version 2) :
- Tout d’abord, on télécharge le composant web depuis npmjs :
npm i @slickteam/footer-slickteam- Ensuite, on importe le composant sur notre page ou “composant” Vue :
import '@slickteam/footer-slickteam';- Enfin, il reste à utiliser le composant sur notre vue (pas besoin de configuration spéciale, le navigateur fait le boulot grâce aux custom-elements) :
<footer-slickteam></footer-slickteam>Conclusion
J’ai réussi à publier mon composant web sur npmjs. En réalisant le composant, j’ai découvert comment en créer un et pu utiliser la librairie Lit, que j’avais découvert lors du BreizhCamp 2019 (cf: https://medium.com/slickteam/litelement-encore-un-autre-framework-3dbe1f33ff9f).
Ça me conforte dans le choix de créer les composants simples, basiques et réutilisables, ainsi que de les importer dans des projets utilisant un framework plus populaire.
Une des inconnues qui me reste à l’esprit, est la manière dont on organise un projet avec l’inclusion de web componant et le niveau auquel il faut s’imposer sur le découpage entre “composant natif” et “composant framework”.
