La meilleure bibliothèque React UI

  • 29 Jan 2024

La communauté React est l'une des plus importantes, mais naviguer parmi la multitude de bibliothèques pour trouver celle qui apportera une réelle valeur ajoutée à votre entreprise peut s'avérer une tâche ardue.

Cet article vise à faciliter ce processus en procédant à une comparaison de diverses bibliothèques de composants React, vous aidant ainsi à sélectionner le kit d'outils d'interface utilisateur le plus adapté à votre projet.

 

 

Pour réaliser cette comparaison, nous allons suivre les étapes suivantes :

  1. Dans un premier temps, nous compilerons une liste exhaustive de bibliothèques React qui sont des candidats potentiels pour la comparaison.
  2. Ensuite, nous rassemblerons des statistiques relatives à la popularité, à l'utilisation et à d'autres mesures pertinentes.
  3. Ensuite, nous définirons un ensemble de composants que nous avons l'intention d'évaluer dans chaque bibliothèque.
  4. Enfin, nous comparerons la taille du paquet généré (bundle), les performances et évaluerons les détails de la licence de chaque bibliothèque.

Bibliothèques

Voici une liste de bibliothèques qui pourraient convenir à notre cas. Nous pouvons les classer par catégories :

 

 

 

 

  • Bibliothèques d'administration : composants qui se connectent au backend et gèrent toutes les opérations CRUD (création, lecture, mise à jour, suppression).

 

 

Bien que je me sois efforcé d'inclure une sélection variée de bibliothèques, il est possible que j'en aie oublié certaines. Cette liste n'est pas exhaustive, mais elle nous sert de base initiale pour les étapes suivantes.

Statistiques

Vous trouverez ci-dessous les statistiques des bibliothèques, en date du 29 janvier 2024 :

Bibliothèques
Composants
Stars Issues PR dl par semaine créée le dernier commit
MUI ~74 90.5k 1.6k 221 3.5M 18/08/2014 29/01/2024
Ant-design ~74 89.1k 1k 69 1.3M 24/04/2015 29/01/2024
shadcn-ui/ui ~46 46.4k 851 288 57k 17/08/2019 28/01/2024
Chakra UI ~62 35.9k 229 62 534k 17/08/2019 25/01/2024
Daisy UI ~55 28.7k 52 6 263k 27/12/2013 29/01/2024
React-admin - 32.5k 81 19 58k 13/07/2016 26/01/2024
Headless UI ~10 23.4k 21 2 1.6M 16/09/2020 28/01/2024
Mantine ~118 23.2k 40 9 291k 07/01/2021 29/01/2024
React bootstrap ~39 21.5k 134 47 1.9M 27/12/2013 29/01/2024
Blueprint ~66 19.6k 642 35 202k 25/10/2016 25/01/2024
Refine - 20.2k 41 23 15k 20/01/2021 29/01/2024
Next UI ~38 18k 239 57 65k 22/04/2021 05/01/2024
Fluent UI ~67 14.7k 493 201 191k 06/06/2016 29/01/2024
Radix ~36 13.2k 379 70 1.3M 19/06/2015 25/09/2023
Semantic UI React ~49 13k 172 21 261k 19/06/2015 30/12/2023
Evergreen ~35 12k 40 37 12k 30/07/2017 21/06/2023
React Aria ~37 10.8k 554 58 16k 30/07/2017 27/01/2024
reactstrap ~29 10.6k 246 53 497k 30/07/2017 20/01/2024
Grommet ~82 8.1k 266 44 24k 24/03/2015 27/01/2024
Rebass ~8 7.9k 46 51 53k 11/02/2015 03/08/2021
adminJS - 6.7k 135 17 22k 23/11/2018 24/01/2024
Carbon ~41 6.3k 489 42 54k 13/03/2017 26/01/2024
ThemeUI ~36 4.9k 50 8 74k 03/04/2019 24/01/2024
PrimeReact ~89 3.5k 181 11 118k 16/12/2016 29/01/2024
Ark UI ~36 3.5k 14 8 33k 16/12/2016 29/01/2024
MDB ~50 1.3k 1 0 7k 07/09/2017 29/01/2024
adminkit ~60 1.1k 0 0 5k 16/12/2016 08/06/2024
Park UI ~41 743 13 5 3k 27/12/2018 29/01/2024
Shards ~27 743 34 15 1k 27/12/2018 25/02/2019
Foundation ~16 602 - - 7k 21/03/2020 27/01/2023
PlainAdmin ~159 253 0 1 - 30/05/2021 01/09/2023

Tailwind UI et Retool n'ont pas de données disponibles car ce ne sont pas des solutions open-source.

 

 

En ce qui concerne React-admin, Refine et adminJS, le nombre de composants n'est pas fourni. En effet, en tant que bibliothèques d'administration, elles facilitent principalement les connexions aux backends plutôt que de fournir des composants individuels.

Composants

Pour la comparaison, nous choisirons le contexte de la construction d'une application de back-office nécessitant des composants avancés, et nous pourrions donc être intéressés par les éléments suivants :

  • Un composant de tableau pour la présentation des données
  • Un composant de sélection de date
  • Un composant de calendrier autonome
  • Un composant "toast" (utilisé pour afficher des informations ou des messages d'erreur, par exemple)
  • Un composant de téléchargement (dropzone)

 

 

En outre, il serait utile que les bibliothèques comprennent également :

  • Des composants graphiques
  • Un composant d'éditeur de texte enrichi
  • Un composant de prévisualisation de document

 

 

Toutefois, si elles ne sont pas disponibles, nous pouvons envisager d'utiliser des bibliothèques spécialisées à cette fin.

 

 

Voici un tableau indiquant la disponibilité de ces composants dans chaque bibliothèque :

Bibliothèques Table Calendar Datepicker Toast Chart Doc preview Upload RTE
MUI ✅💵 🟠 ✅⏳ 🟠
Ant-design 🟠 🟠
shadcn-ui/ui 🟠
Chakra UI 🟠
Daisy UI
React bootstrap 🟠
Blueprint
Headless UI
Mantine 🟠 🟠
Fluent UI 🟠 🟠
Radix
Semantic UI React 🟠
Evergreen 🟠
React Aria 🟠
reactstrap 🟠 🟠
Next UI
Grommet 🟠 🟠
Rebass
Carbon
ThemeUI 🟠
PrimeReact 🟠
Ark UI 🟠
MDB 💵 💵 💵 💵 💵 💵 💵
AdminKit 🟠 💵 ✅💵 🟠
Park UI 🟠 🟠
Shards
Foundation
PlainAdmin 💵 💵 💵 💵
Retool 💵 💵 💵 💵 💵 💵 💵 💵

Légende :

  • ✅ : OK
  • ❌ : KO
  • 💵 : OK en version payante
  • 🟠 : Moyennement OK
  • ⏳ : Prévu dans le futur

 

 

Calculons ensuite un score sur la base du tableau précédent où ✅=1, 🟠=0.5, 💵=0.5.

 

 

Nous identifierons ensuite les bibliothèques qui obtiennent des résultats supérieurs à la moyenne et nous nous concentrerons sur elles pour les étapes suivantes :

Bibliothèques Score Sélectionné
PrimeReact 6.5/8
Mantine 6/8
MUI 5/8
Ant-design 5/8
Grommet 5/8
React Aria 4.5/8
Carbon 4/8
Park UI 4/8
Retool 4/8
shadcn-ui/ui 3.5/8
Ark UI 3.5/8
MDB 3.5/8
Blueprint 3/8
Fluent UI 3/8
Evergreen 2.5/8
adminkit 2.5/8
Daisy UI 2/8
PlainAdmin 2/8
Chakra UI 1.5/8
React bootstrap 1.5/8
Semantic UI React 1.5/8
Radix 1/8
reactstrap 1/8
Next UI 1/8
ThemeUI 0.5/8
Headless UI 0/8
Rebass 0/8
Shards 0/8
Foundation 0/8

Taille du bundle

La comparaison de la taille des bundles porte sur les six dernières bibliothèques.

 

 

Examinons le tableau des composants pour les bibliothèques restantes :

Bibliothèques Table Cal. DateP. Toast Chart Doc preview Upload RTE Score
MUI ✅💵 🟠 ✅⏳ 🟠 5/8
Ant-design 🟠 🟠 5/8
Mantine 🟠 🟠 6/8
React Aria 🟠 4.5/8
Grommet 🟠 🟠 5/8
PrimeReact 🟠 6.5/8

Il est à noter que chacune de ces bibliothèques comporte un composant de tableau, un sélecteur de date et un composant de toast.

 

Maintenant, évaluons la taille du bundle pour ces composants.

Le code correspondant à la comparaison est disponible ici.

 

 

Et voici les résultats:

Bibliothèques Table seulement Datepicker seulement Toast seulement Les 3 composants
MUI 665k JS 468k JS 235k JS 826k JS
Ant-design 751k JS 479k JS 288k JS 877k JS
Mantine 204k JS + 189k CSS 296k JS + 199k CSS 194k JS + 190k CSS 334k JS + 199k CSS
React Aria 299k JS 343k JS 194k JS 462k JS
Grommet 373k JS 339k JS 331k JS 473k JS
PrimeReact 636k JS + 159k CSS 334k JS + 159k CSS 312k JS + 159k CSS 767k JS + 159k CSS

 

Évaluation des performances


Pour évaluer les performances, nous avons mesuré le nombre de fois où l'application (utilisant les trois composants définis dans l'étape précédente) peut être rendue en une seconde.


La mise en œuvre technique est décrite comme suit :

  1. J'ai introduit un compteur dans un bouton du composant App, qui englobe les trois composants.
  2. En cliquant sur le bouton, j'enregistre l'heure actuelle et j'incrémente l'état du compteur, ce qui déclenche un nouveau rendu du composant App.
  3. Une fois le rendu terminé, un useEffect est déclenché, incrémentant à nouveau le compteur et lançant un autre rendu.
  4. Après une seconde, le useEffect cesse d'incrémenter le compteur, ce qui nous permet de récupérer la valeur du compteur, indiquant le nombre de rendus effectués.

Les chiffres présentés sont une moyenne basée sur 10 calculs.


Voici les résultats, où un nombre plus élevé indique une meilleure performance :
 

Bibliothèques Nombre de rendu par seconde
MUI ~1210
Ant-design ~770
Mantine ~1650
React Aria ~350
Grommet ~820
PrimeReact ~270

 

Licence

Voici les informations sur les licences des bibliothèques que nous avons sélectionnées :

  • MUI: MIT
  • Ant-design: MIT
  • Mantine: MIT
  • React Aria: Apache-2.0 license
  • Grommet: Apache-2.0 license
  • PrimeReact: MIT

Conclusion

En conclusion, compte tenu de son large éventail de plus d'une centaine de composants, d'un score louable de 6/8, d'un bundle JS de taille compacte et de bonne performances, Mantine apparaît comme la solution optimale pour notre cas spécifique.

De plus, je pense que Mantine est un excellent choix pour tout projet recherchant une bibliothèque d'interface utilisateur fiable parce que de plus elle:

  • possède une excellente documentation.
  • permet la personnalisation de chaque composant, offrant une flexibilité en cas de besoin.