Veille

La meilleure bibliothèque React UI

  • Date de l’événement 07 Mar. 2024
  • Temps de lecture min.

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
StarsIssuesPRdl par semainecréée ledernier commit
MUI~7490.5k1.6k2213.5M18/08/201429/01/2024
Ant-design~7489.1k1k691.3M24/04/201529/01/2024
shadcn-ui/ui~4646.4k85128857k17/08/201928/01/2024
Chakra UI~6235.9k22962534k17/08/201925/01/2024
Daisy UI~5528.7k526263k27/12/201329/01/2024
React-admin-32.5k811958k13/07/201626/01/2024
Headless UI~1023.4k2121.6M16/09/202028/01/2024
Mantine~11823.2k409291k07/01/202129/01/2024
React bootstrap~3921.5k134471.9M27/12/201329/01/2024
Blueprint~6619.6k64235202k25/10/201625/01/2024
Refine-20.2k412315k20/01/202129/01/2024
Next UI~3818k2395765k22/04/202105/01/2024
Fluent UI~6714.7k493201191k06/06/201629/01/2024
Radix~3613.2k379701.3M19/06/201525/09/2023
Semantic UI React~4913k17221261k19/06/201530/12/2023
Evergreen~3512k403712k30/07/201721/06/2023
React Aria~3710.8k5545816k30/07/201727/01/2024
reactstrap~2910.6k24653497k30/07/201720/01/2024
Grommet~828.1k2664424k24/03/201527/01/2024
Rebass~87.9k465153k11/02/201503/08/2021
adminJS-6.7k1351722k23/11/201824/01/2024
Carbon~416.3k4894254k13/03/201726/01/2024
ThemeUI~364.9k50874k03/04/201924/01/2024
PrimeReact~893.5k18111118k16/12/201629/01/2024
Ark UI~363.5k14833k16/12/201629/01/2024
MDB~501.3k107k07/09/201729/01/2024
adminkit~601.1k005k16/12/201608/06/2024
Park UI~417431353k27/12/201829/01/2024
Shards~2774334151k27/12/201825/02/2019
Foundation~16602--7k21/03/202027/01/2023
PlainAdmin~15925301-30/05/202101/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èquesTableCalendarDatepickerToastChartDoc previewUploadRTE
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èquesScoreSélectionné
PrimeReact6.5/8
Mantine6/8
MUI5/8
Ant-design5/8
Grommet5/8
React Aria4.5/8
Carbon4/8
Park UI4/8
Retool4/8
shadcn-ui/ui3.5/8
Ark UI3.5/8
MDB3.5/8
Blueprint3/8
Fluent UI3/8
Evergreen2.5/8
adminkit2.5/8
Daisy UI2/8
PlainAdmin2/8
Chakra UI1.5/8
React bootstrap1.5/8
Semantic UI React1.5/8
Radix1/8
reactstrap1/8
Next UI1/8
ThemeUI0.5/8
Headless UI0/8
Rebass0/8
Shards0/8
Foundation0/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èquesTableCal.DateP.ToastChartDoc previewUploadRTEScore
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èquesTable seulementDatepicker seulementToast seulementLes 3 composants
MUI665k JS468k JS235k JS826k JS
Ant-design751k JS479k JS288k JS877k JS
Mantine204k JS + 189k CSS296k JS + 199k CSS194k JS + 190k CSS334k JS + 199k CSS
React Aria299k JS343k JS194k JS462k JS
Grommet373k JS339k JS331k JS473k JS
PrimeReact636k JS + 159k CSS334k JS + 159k CSS312k JS + 159k CSS767k 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èquesNombre 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.

Tony Cabaye

Expert technique