Mon site, à l’exception de ce blog, a été fabriqué à l’aide des Web Components. Pourquoi un tel choix ?
Utiliser des composants web peut surprendre pour un simple site vitrine. Je vais être honnête : le but est d’abord de montrer ce que je sais faire, et d’en mettre plein la vue au visiteur qui ira fouiner dans l’inspecteur de son navigateur. Il pourra y trouver des composants personnalisés et rangés proprement, plutôt qu’une longue page HTML.
C’est l’un des principaux avantages des Web Components : chacun d’entre eux est un fichier avec son template HTML et son style CSS, isolé des autres (grâce à l’obscur shadow dom). Et pour injecter un peu d’intelligence dans tout cela, j’utilise TypeScript. Si vous êtes un développeur, vous levez probablement les yeux au ciel et l’adjectif « overkill » vous est venu à l’esprit.
Ce n’est pas qu’une mauvaise idée
Laissez-moi me défendre. Les composants web regroupent en fait plusieurs technologies, qui sont parfaitement expliquées ici en détail. Ils sont en cours de standardisation : tous les navigateurs les reconnaissent, et il n’y a pas besoin de librairie ou de framework pour les créer. Personnellement, j’ai tout de même utilisé Lit-Element, une classe de base qui permet de créer rapidement ces composants, et qui maintenue par les développeurs de Google Chrome dans le cadre du Polymer Project. Et puis j’ai passé les six mois de mon stage de fin de formation sur cette librairie, j’aurais été bête de ne pas l’utiliser.
Les Web Components vont m’être utiles pour l’évolutivité de mon site. Par exemple, je peux ajouter facilement de nouvelles tuiles dans la partie “technologies” ou dans la section où se trouvent mes réalisations. Il me suffit de remplir un objet JavaScript avec les valeurs dont j’ai besoin : je n’ai même plus besoin de créer de nouvelles balises HTML et de m’embêter avec le CSS, si j’ai suffisamment bien préparé mon affaire. Et contrairement à un CMS comme WordPress, j’ai entièrement la main sur le code. Et je ne parle même pas du poids : minifié, mon site pèse 250 ko. Le WordPress que j’utilise pour ce blog pèse… 50 mo. Les performances s’en font ressentir : sur PageSpeedInsight, j’obtiens 95/100 sur mobile et 99/100 sur bureau. Et il y a encore quelques améliorations à réaliser !
Aussi, plus le développement du site avance, et plus certaines étapes se font rapidement, puisque l’idée est de réutiliser mon code. Créer un site en Web Components est aussi un petit défi de programmation : au fur et à mesure des itérations, on se rend compte que tel composant peut devenir une classe parente pour plusieurs composants qui possèdent les mêmes caractéristiques. Concrètement, cela fait gagner des dizaines de lignes de code, permet de gagner en rapidité et en lisibilité. Et je pourrais réutiliser ces composants dans d’autres projets !
Une techno utile pour les moyens / gros projets
Ceci étant dit, un peu d’auto-critique. J’ai appris à utiliser Lit-Element chez HelloWork où les développeurs frontend ont fait le choix de cette technologie après avoir comparé ses performances face à ReactJS et à VueJS. Pour leurs usages, Lit-Element était le plus rapide. Leur but est de créer une bibliothèque de composants qui leur permettra d’avoir un front plus clair et facilement modulable pour l’ensemble des leurs produits, qui sont nombreux. C’est dans ce contexte que les composants web trouvent toute leur puissance : ils sont rapides, légers, standardisés, et peuvent être facilement partagés d’un projet à l’autre. Et on peut même utiliser Lit-Element au sein de ReactJS ou de VueJS !
Bref, vous l’aurez compris, l’idée des Web Components me plaît. Evidemment, j’aurais passé beaucoup moins de temps à créer mon site si je l’avais fait en HTML/CSS ou en avec un gestionnaire de contenu. Mais comme ici je suis mon propre client, personne ne viendra me le reprocher.