Choisir une librairie de composants UI avec React / Nextjs ?

Les librairies de composants UI ont révolutionné notre manière de développer des sites et applications web. En proposant un panel complet d'outils pour aider à l'intégration , elles permettent un gain de temps considérable.

Avec l'avènement de React et Next.js et la quantité de librairies qui augmente de façon exponentielle, on peut se demander comment choisir la bonne bibliothèque de composants pour son projet ?

Dans cet article, nous allons découvrir les différentes approches pour créer des composants en abordant leurs avantages et leurs inconvénients.

Les différentes approches pour créer des composants UI

Il existe 4 approches différentes pour créer des composants dans son projet React :

• Les frameworks CSS (Bootstrap, Material UI, Bulma, etc.)
• Les librairies headless (Headless UI, Radix UI, Base UI, etc.)
• Créer ses propres composants
• Combiner les différentes approches (du headless et des composants "faits maison")

1. Les frameworks CSS

Les frameworks CSS traditionnels tels que Bootstrap, Material UI ou encore Bulma offrent une grande variété de composants prêts à l'emploi.

Avantages

• Accessibilité : support des différents navigateurs, a11y
• Exhaustivité : large choix de composants
• Simplicité : facile à installer et utiliser
• Gain de temps : la logique et le style sont déjà présents
• Fonctionnalités annexes : différents thèmes, mode sombre, responsive, etc.

Inconvénients

• Personnalisation : il faut surcharger le style existant pour le modifier
• Flexibilité : le comportement du composant est difficilement modifiable
• Performance : du style est chargé mais inutilisé
• Dépendance : il est compliqué de faire la transition avec un autre framework

Scénarios d'utilisation

• PoC (Proof of Concept)
• Projets personnels
• Projets avec des contraintes budgétaires

Exemple

Prenons l'exemple d'un composant que l'on retrouve dans beaucoup de projet : les dropdowns. Ci-contre, un exemple avec React Bootstrap :

1import ReactBootstrapDropdown, {
2  Toggle,
3  Menu,
4  Item,
5} from "react-bootstrap/Dropdown";
6
7export const Dropdown = () => (
8  <ReactBootstrapDropdown>
9    <Toggle variant="success" id="dropdown-basic">
10      Dropdown Button
11    </Toggle>
12
13    <Menu>
14      <Item href="#/action-1">Action</Item>
15      <Item href="#/action-2">Another action</Item>
16      <Item href="#/action-3">Something else</Item>
17    </Menu>
18  </ReactBootstrapDropdown>
19);

2. Les librairies headless

En opposition aux frameworks CSS, il y a les bibliothèques dites "headless" : les composants viennent avec leur logique mais dénués de style.

Avantages

• Accessibilité : support des différents navigateurs, a11y
• Exhaustivité : large choix de composants
• Simplicité : facile à installer et utiliser
• Gain de temps : la logique est déjà présente
• Personnalisation : liberté d'ajouter son propre style

Inconvénients

• Flexibilité : le comportement du composant est parfois difficilement modifiable
• Temps de développement : il faut prendre du temps pour ajouter du style aux composants

Scénarios d'utilisation

• Dès lors qu'il y a un design system / des maquettes

Exemple

Encore une fois, gardons l'exemple des dropdowns. Voilà un exemple avec Headless UI (et donc du style avec TailwindCSS) :

1import { Menu } from "@headlessui/react";
2
3const MyDropdown = () => (
4  <Menu>
5    <Menu.Button>More</Menu.Button>
6    <Menu.Items>
7      <Menu.Item>
8        {({ active }) => (
9          <a className={active ? "bg-blue-500" : ""} href="/account-settings">
10            Account settings
11          </a>
12        )}
13      </Menu.Item>
14      <Menu.Item>
15        {({ active }) => (
16          <a className={active ? "bg-blue-500" : ""} href="/account-settings">
17            Documentation
18          </a>
19        )}
20      </Menu.Item>
21      <Menu.Item disabled>
22        <span className="opacity-75">Invite a friend (coming soon!)</span>
23      </Menu.Item>
24    </Menu.Items>
25  </Menu>
26);

3. Les composants "faits maison"

La création d'un dropdown prendrait trop de temps. Selon Pedro Duarte, créateur de Radix UI, voilà le temps qu'il aura fallu à son équipe pour développer leur dropdown :

Évidemment, la durée du développement se justifie par le nombre de fonctionnalités qu'offrent les dropdowns de Radix UI.

Les composants "maison" sont pertinents mais seulement lorsqu'ils ne requièrent pas trop de logique.

Avantages

• Personnalisation : liberté d'ajouter son propre style
• Flexibilité : pas de restriction sur le comportement du composant et sa capacité à évoluer
• Minimalisme : le composant répond uniquement aux besoins précis de l'interface

Inconvénients

• Accessibilité : il est important de respecter les conventions et respecter les normes de a11y
• Temps de développement : il faut prendre du temps pour ajouter du style aux composants et développer la logique (s'il y en a)

Scénarios d'utilisation

• Composants minimalistes
• Composants très spécifiques

4. Combiner les approches

En combinant les bibliothèques headless avec des composants personnalisés, il est possible de tirer profit des deux parties.

En effet, la combinaison des deux couvre la majorité des avantages :

Avec cette approche, nous avons une cohérence maximale au niveau du style de nos composants, ils sont flexibles, personnalisés et le temps de développement est optimisé.

Conclusion

Le choix d'une bibliothèque de composants avec React et Next.js dépend des besoins spécifiques du projet et des préférences personnelles du développeur.

Chaque approche à son lot d'avantages et d'inconvénients qu'il faut prendre en compte pour faire le bon choix.

Pour des projets persos, des PoC ou des projets avec des contraintes budgétaires, un framework CSS peut s'avérer pertinent. En revanche, pour le reste, la combinaison des composants headless et personnalisés présente le plus d'avantages.

Retrouvez cette liste de librairies headless pour vos projets React / Next.js.