Tailwind vs Material UI vs Styled Components vs React Bootstrap
Quand il s'agit de frameworks UI, il y en a possiblement des centaines. Dans cet article, je vais comparer ceux que je considère comme les plus populaires — selon les critères suivants :
- Facilité de développement — facile à écrire, facile à lire, rapide à modifier
- Performance — Vitesse de rendu
- Taille de la build
- Facilité d'apprentissage
Allons-y alors !
TailwindCSS
Tailwind est une bibliothèque de classes utilitaires qui expose un large éventail de classes faciles à utiliser qui vous permettent de manipuler les propriétés CSS courantes. Lorsque vous enchaînez ces classes, nous obtenons le style souhaité.
Facilité de développement : En termes de facilité de développement, j'adore Tailwind ! Vous écrivez vos classNames exactement où vous avez besoin des styles, vous n'avez pas besoin d'aller dans un autre fichier (comme avec CSS) ou même un autre point du même fichier (comme avec JSS) pour voir les styles en action. Cela offre une expérience de développement fantastique. Dans certains cas, vous pourriez vraiment vouloir créer une feuille de style — par exemple, styliser les variantes d'un bouton. Dans ce cas, nous pouvons simplement créer une feuille de style et utiliser la directive theme pour utiliser les variables de thème de tailwind et créer des styles cohérents. Bien que certaines personnes puissent trouver ennuyeux de lire la longue liste de classes enchaînées dans leur markup — je trouve personnellement cela très pratique.
Performance : La vitesse de rendu est à peu près la même que le HTML et CSS natifs puisqu'il s'agit simplement de classes dans une feuille de style.
Taille de la build : Pour fournir des classes utilitaires pour toute la variété de cas d'usage que nous rencontrons pendant le développement, bien sûr, la taille de ces bibliothèques doit être grande. Cependant, l'utilisation de bibliothèques comme PurgeCSS aide à supprimer toutes les classes inutilisées de la build finale. Tailwind a une option intégrée pour cela. Ainsi, nous nous retrouvons avec une taille de build qui est probablement très proche de l'utilisation de classes CSS natives.
Facilité d'apprentissage : Au départ, il peut falloir un certain temps pour s'habituer aux classNames des différents attributs. Cependant, ils sont assez intuitifs et faciles à retenir. Je dirais que Tailwind est très facile à apprendre.
Tailwind est mon préféré personnel pour 2 raisons — 1. leurs styles par défaut ont un aspect magnifique — élégants et épurés 1. leur gamme de classes utilitaires est énorme et couvre presque tous les cas d'usage courants de manière efficace. Ce sont les raisons pour lesquelles je choisirais Tailwind plutôt que d'autres bibliothèques de classes utilitaires comme Bootstrap.
MUI
MUI est un toolkit UI qui fournit un framework de théming, un framework de styling et des composants courants — tous immédiatement disponibles à l'utilisation.
Facilité de développement : Travailler avec MUI est très bien car vous n'avez pas à écrire beaucoup de code nécessaire pour les fonctionnalités courantes comme les modales, les accordéons, les sélections déroulantes, les menus, etc. Cependant, MUI est terrible quand il s'agit de personnaliser ces composants pré-stylisés. Même ajouter des styles aux composants réguliers est un peu désagréable à lire à cause de JSS. De plus, si vous devez utiliser certains composants externes, ils sont très difficiles à personnaliser pour correspondre à l'apparence et l'ambiance de MUI.
Performance : MUI est probablement le plus lent en matière de rendu. J'ai une fois eu une liste déroulante avec 1000 entrées, et MUI ne pouvait pas la charger sans au moins un délai d'1 seconde. Ils ont des styles lourds pour les effets de survol, les effets d'ondulation et les ombres qui les rendent intensifs en calcul.
Taille de la build : La taille de la build de MUI est assez grande par rapport à d'autres frameworks UI. Cela peut être géré en utilisant des importations de deuxième niveau chaque fois que vous importez depuis MUI.
Facilité d'apprentissage : MUI a une documentation très complexe avec un grand nombre d'options de personnalisation. Cela la rend très difficile à apprendre. Le système de styling est aussi quelque peu différent des options générales disponibles. Par conséquent, s'y habituer prend du temps.
MUI a un bel aspect par défaut. C'est une très bonne option à utiliser — SEULEMENT SI votre design utilise leurs styles par défaut. Il serait bon de confirmer qu'ils ont tous les composants dont vous avez besoin à l'avance. Cependant, si vous avez un thème personnalisé que vous devez développer — c'est la pire option. C'est lourd en rendu et très difficile à personnaliser. Vous seriez mieux servi en utilisant n'importe quoi d'autre.
Styled Components
Styled components utilisent CSS in JS pour vous permettre de styliser les composants et de passer des props qui affectent également le styling.
Facilité de développement : Styled components utilisent CSS in JS. En termes de facilité de développement, je pense que c'est probablement le pire. Donc, en écrivant le CSS, vous avez évidemment besoin d'un linter — style lint — pour permettre l'analyse dans un fichier JS. Toute logique impliquant des props est verbeux à écrire car elle doit être ajoutée en tant que fonction à chaque site d'interpolation. Le seul avantage potentiel est que par rapport au CSS régulier, il est plus facile de naviguer vers un styled component que vers une classe dans une feuille de style. Créer un styled component pour chaque petit changement dont vous avez besoin est définitivement très frustrant par rapport à l'utilisation de quelque chose comme Tailwind ou Bootstrap.
Performance : Styled components ont un léger surcoût par rapport au CSS régulier. Cependant, c'est assez minimal.
Taille de la build : Ici aussi, il y a un léger surcoût par rapport au CSS régulier, mais très minimal. En fait, dans certains cas où il n'y a pas trop de styling, l'utilisation de styled-components pourrait vous aider à avoir une taille de build plus petite que les bibliothèques de classes utilitaires comme Tailwind.
Facilité d'apprentissage : Styled components sont assez faciles à apprendre car ils utilisent juste une syntaxe supplémentaire et l'interpolation JS par rapport au CSS régulier.
Styled-components en tant que framework autonome me semble un peu inutile. Sans avantage significatif par rapport à SCSS et plus d'encombrement créé par chaque styled component pour chaque changement de style, je conseille contre son utilisation. Dans tous les cas, pour moi, cela semble simplement ajouter du surcoût. Je me trompe peut-être car je les ai seulement utilisés quelques fois dans des projets. Mais mon expérience de les utiliser a toujours abouti à la question — pourquoi cela existe-t-il ?
React Bootstrap
React bootstrap est une bibliothèque de composants construite au-dessus de la bibliothèque de classes utilitaires — Bootstrap. Elle offre un équilibre entre Tailwind et Material UI, où nous obtenons les classes utilitaires de Bootstrap et les composants prêts à l'emploi de React Bootstrap
Facilité de développement : React bootstrap a des composants faciles à utiliser donc vous n'avez pas à écrire votre propre logique pour les composants couramment utilisés comme les sélections, les modales, etc. Il est aussi facile de personnaliser ces composants en utilisant les classes utilitaires et les variables de thème. De plus, parce qu'ils ont des classes utilitaires courantes, il devient aussi facile de styliser les composants importés d'autres bibliothèques pour correspondre à l'apparence et l'ambiance de React Bootstrap.
Performance : Les composants React bootstrap n'ont presque aucun surcoût par rapport à l'utilisation du CSS régulier. Leur performance est très proche de l'utilisation du CSS régulier.
Taille de la build : Les composants React bootstrap, s'ils sont importés et regroupés correctement, auront très peu d'impact sur la taille de la build.
Facilité d'apprentissage : Les composants React bootstrap sont simples, bien documentés et faciles à mettre en œuvre. Les classes bootstrap sont similaires à Tailwind et sont faciles à assimiler.
React bootstrap est un très bon équilibre entre performance et convivialité pour les développeurs. Vous n'avez pas à écrire de code qui est utilisé dans les composants courants, vous obtenez des personnalisations faciles avec les classes utilitaires de Bootstrap, et la performance est proche du natif. Il n'a pas une gamme aussi large de classes utilitaires que Tailwind, mais il vous permet d'ajouter tous les styles et variables dont vous avez besoin pour créer une fonctionnalité similaire. Cela me semble être un sweet spot.
Conclusion
Comme tout en tech, le framework UI que vous choisissez dépendra de votre cas d'usage.
Si vous avez besoin d'un prototype rapide — vous seriez mieux servi en choisissant une bibliothèque de composants. Entre MUI, Bootstrap et d'autres — vous pouvez choisir en fonction de considérations comme l'apparence/l'ambiance par défaut, la performance de rendu et la personnalisabilité. MUI est lourd en performance et difficile à personnaliser, mais si vous aimez la façon dont il looks et vous n'avez pas d'éléments UI particulièrement lourds, c'est une excellente option.
Si vous voulez créer des composants personnalisés, vous seriez mieux servi avec TailwindCSS ou React Bootstrap — où les utils CSS le rendent très facile d'injecter les styles que vous voulez. Mon choix personnel serait Tailwind — bien qu'il n'ait pas une bibliothèque de composants open-source comme React Bootstrap, j'adore simplement leurs styles par défaut et la nature exhaustive des classes fournies par eux.
Si vous avez besoin de composants personnalisés mais que vous n'aimez pas le chaînage long de className comme dans TailwindCSS — vous pourriez opter pour Styled Components. Ils vous permettent d'écrire vos styles en JS ce qui est plus facile à naviguer par rapport au CSS régulier. Personnellement, c'est mon moins favori de tous les frameworks, mais certaines personnes le préfèrent vraiment. Cela est purement basé sur des considérations d'expérience du développeur.
Quel framework UI aimez-vous travailler ? J'aimerais bien le savoir !
