La meilleure bibliothèque React UI

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'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.
  • shadcn-ui/ui
  • Daisy UI
  • Headless UI
  • Radix
  • React Aria
  • Ark UI
  • Tailwind UI (payant)

• 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 :

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 :

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 :

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 :

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:

É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 :
 

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.