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 :
- Dans un premier temps, nous compilerons une liste exhaustive de bibliothèques React qui sont des candidats potentiels pour la comparaison.
- Ensuite, nous rassemblerons des statistiques relatives à la popularité, à l'utilisation et à d'autres mesures pertinentes.
- Ensuite, nous définirons un ensemble de composants que nous avons l'intention d'évaluer dans chaque bibliothèque.
- 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'interface utilisateur : composants réutilisables et configurables
- MUI (version payante disponible)
- Ant-design
- Chakra
- React bootstrap
- Blueprint
- Mantine
- Fluent UI
- Semantic UI React
- Evergreen
- reactstrap
- Next UI
- Grommet
- Rebass
- Carbon
- ThemeUI
- PrimeReact
- MDB (version payante disponible)
- adminkit (version payante disponible)
- Park UI
- Shards (version payante disponible)
- Foundation
- PlainAdmin (version payante disponible)
- Bibliothèques headless : composants dépourvus de style, mais dotés de toutes les fonctionnalités.
- Bibliothèques d'administration : composants qui se connectent au backend et gèrent toutes les opérations CRUD (création, lecture, mise à jour, suppression).
- React-admin (version payante disponible)
- Refine (version payante disponible)
- adminJS (version payante disponible)
- Retool (payant)
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 |
| 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 :
- J'ai introduit un compteur dans un bouton du composant App, qui englobe les trois composants.
- 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.
- Une fois le rendu terminé, un useEffect est déclenché, incrémentant à nouveau le compteur et lançant un autre rendu.
- 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.