L'ancien fiable : Material-UI
Jusqu'à présent, cette application Web progressive utilisait Material-UI, une interface utilisateur très mature et populaire ainsi qu'une bibliothèque UX. Material UI est l'un des kits d'outils React-UI les plus utilisés, sinon le numéro un, et fournit une excellente collection de conteneurs, de cartes, de barres de navigation et de toutes sortes d'autres composants qui adhèrent aux directives Material définies par Google Design.
Comme je n'ai pas changé la mise en page de base et la conception visuelle de mon application Web, vous vous demandez peut-être pourquoi j'avais choisi Material-UI en premier lieu, car ce site ne ressemble pas vraiment à un Material-site typique à première vue. La raison en est que la bibliothèque "Material-UI" offre également une couche de composants de base à consommer, qui offre tous les avantages de la bibliothèque tels que la thématisation, sans un style de matériau opiniâtre.
Mais comme je commençais récemment à utiliser Tailwind, un "framework CSS d'abord utilitaire", dans d'autres projets, il m'est rapidement apparu que les avantages de Tailwind en faisaient un candidat de choix pour mon application Web personnelle.
Le nouveau cool : Tailwind.css
Tailwind a une expérience de développeur merveilleusement agréable. Mais pas seulement cela, cela garantit également que la version de production n'utilise que les classes CSS qui sont réellement consommées. Grâce au compilateur juste-à-temps qui est désormais livré avec Tailwind.css, l'utilisation de l'outil est plus flexible que jamais.
Bibliothèques alternatives
Avant d'entrer dans les détails de ma migration de Material-UI vers Tailwind.css, je vais écrire une liste des systèmes de conception pertinents pour Tailwind.css qui incluent MUI.
- material-tailwind, qui traduit les spécifications de conception MUI en un système de conception dans Tailwind.css
- daisy-ui, qui bien sûr n'est pas Material UI mais fournit tout de même un très grand nombre de composants visuellement proches de la norme MUI version 5
Vous devez essentiellement ajouter tous les styles CSS pour Material-Tailwind en tant qu'importation, ainsi que des liens pour les icônes ainsi que la police. Pour Daisy-UI, tout ce que vous avez à faire est de l'ajouter en tant que plugin à votre fichier confg.
Les deux bibliothèques seront réduites aux styles que vous utilisez réellement, elles n'ajoutent donc aucune surcharge.
Différences entre Material-UI et Tailwind.css
Une différence évidente majeure entre les deux bibliothèques est que Material-UI fournit un style avisé tandis que Tailwind.css vous offre un ensemble de classes utilitaires pour générer du CSS, mais pas de style spécifique en soi. Cela signifie que si vous comptez beaucoup sur les directives du matériel, vous devrez d'abord reconstruire certains composants de base, par exemple les boutons et les champs de texte, avec Tailwind.css.
Étant donné que les deux bibliothèques utilisent des unités différentes pour les fonctions de mise à l'échelle et d'espacement, la première itération de la migration qui n'a pas interrompu le processus de construction semblait assez déplacée.
Dans l'ensemble, il m'a fallu environ 6 heures nocturnes pour passer à Tailwind.css pour une première version stable à publier. L'échange de l'API de Material-UI a été effectué plus rapidement que prévu, et l'application Web progressive ne repose désormais que sur Tailwind pour tous les styles.
Une performance phare presque parfaite
Comme Material-UI est naturellement plus grand que Tailwind.css en raison de l'absence de minification CSS ainsi que de la réduction au seul CSS réellement utilisé, je visais également un meilleur score lors de l'analyse comparative de l'application Web avec Lighthouse. J'utilise uniquement web.dev/measure pour cette tâche, car c'est l'outil le plus rigoureux concernant les performances réelles perçues par les utilisateurs.
Avant la migration, tous les sites marquaient 100 points, à l'exception des performances, où j'ai atteint environ 75 à 80 points par mesure. Après la migration, je peux maintenant signaler une performance entre 90 et 95 points, selon les performances du réseau Edge de Vercel, où la PWA est hébergée. Grâce à Tailwind.css, j'atteins presque un score parfait, ce qui est assez impressionnant étant donné que le site utilise beaucoup de style (même s'il semble très minime) ainsi que des médias tels que des vidéos et des images.
Conclusion : cela en valait-il la peine ?
Oui définitivement! La transition globale n'a pris que quelques heures et a entraîné un gain de performances réel et un meilleur score de référence. Je vais affiner certains aspects visuels dans les semaines à venir pour aplanir les incohérences potentielles après la migration, mais dans l'ensemble, je me sens confiant avec la version actuelle en tant que version de production.
Tailwind.css est probablement la bibliothèque CSS la plus ergonomique actuellement disponible, ce qui fait du codage une expérience vraiment agréable. Si ce n'est pas le cas, essayez maintenant et voyez par vous-même si vous l'aimez autant que moi.
