Aperçu de la bibliothèque de composants front-end UI en 2023, laissez éclore une centaine de fleurs !

16833200 :

La bibliothèque de composants d'interface utilisateur fournit une variété d'éléments d'interface utilisateur courants, tels que des boutons, des zones de saisie, des menus, etc. Il vous suffit d'appeler les composants correspondants et de les configurer en fonction de vos besoins, et vous pouvez rapidement créer une interface utilisateur entièrement fonctionnelle.

Bien qu’il existe de nombreuses bibliothèques de composants d’interface utilisateur différentes sur le marché, fin 2023, il n’y aura pas une ou deux solutions claires pouvant s’appliquer à toutes les situations. Étant donné que les différents frameworks front-end (tels que React, Angular, Vue, etc.) ont leurs propres avantages et scénarios applicables, les bibliothèques de composants d'interface utilisateur correspondantes seront également différentes.

Cet article fournit un bref aperçu des solutions de style de l'écosystème front-end actuel et présente certaines bibliothèques d'interface utilisateur courantes et populaires.

Présentation de la bibliothèque d'interface utilisateur

Framework CSS et historique de la bibliothèque

Dans le passé, les concepteurs Web devaient écrire les styles CSS à la main, ce qui était un processus tortueux. Par la suite, certains frameworks CSS sont apparus, tels que Blueprint, 960 Grid System, YUI Grids, etc., qui ont introduit des grilles réactives et des éléments d'interface utilisateur simples, modifiant ainsi la façon dont la conception Web était réalisée.

Ensuite, des géants comme Twitter Bootstrap, Foundation et Bulma ont émergé. Ils offrent un développement rapide et un style cohérent, mais entraînent également certains problèmes lorsque les sites commencent à paraître trop similaires et uniformes.

Pour résoudre ce problème, la communauté a introduit certaines méthodologies, telles que BEM, pour injecter un caractère unique et un style modulaire afin de rendre la conception Web plus personnalisée et flexible.

Dans l’ensemble, les frameworks et bibliothèques CSS ont évolué, passant de la réponse initiale aux besoins de mise en page à la fourniture de boîtes à outils d’interface utilisateur complètes. Dans le même temps, davantage de méthodes et de techniques émergent pour permettre des styles plus personnalisés et modulaires.

Les frameworks JavaScript changent les règles

Avec l'émergence de frameworks JavaScript tels qu'Angular, React et Vue, les développeurs ont besoin d'une approche plus fine pour gérer ces nouveaux modèles de composants. L'une des fonctionnalités les plus importantes du CSS traditionnel est la mise en cascade, mais pour ces nouveaux frameworks, le mécanisme de mise en cascade a posé quelques problèmes.

Pour résoudre ce problème, une nouvelle solution a vu le jour, à savoir CSS en JS. Dans l'écosystème React, des bibliothèques telles que Styled Components et Emotion sont devenues très populaires, permettant aux développeurs d'associer des styles à la portée des composants, résolvant ainsi le problème de cascade.

Conception atomique

La conception atomique est une méthode de conception de composants proposée par Brad Frost. Son idée principale est de décomposer les éléments de l'interface utilisateur en différents niveaux et de les traiter comme différents composants tels que des atomes, des molécules et des organismes.

Un atome représente l'élément le plus basique et irréductible, tel que les boutons, les zones de saisie, etc. Une molécule est composée de plusieurs atomes et représente un composant relativement complexe, tel qu'une carte avec des images, du texte et des boutons. Les organismes, quant à eux, sont composés de plusieurs molécules et représentent des éléments d’interface utilisateur de niveau supérieur, tels que des pages ou des applications entières.

En décomposant la conception de l'interface utilisateur en une hiérarchie de composants, les développeurs et les concepteurs peuvent créer et gérer des interfaces utilisateur plus systématiquement. Cette approche favorise la réutilisation et la combinaison, rendant le processus de développement plus efficace et facilitant la maintenance et l'extension de l'interface utilisateur.

Les frameworks CSS tels que Tailwind CSS adoptent le concept de conception atomique et fournissent une série de classes de style atomique. Les développeurs peuvent combiner ces classes de style selon leurs besoins pour créer une interface utilisateur. Cette approche rend la réutilisation et l'ajustement des styles plus flexibles et plus précis, et peut réduire le code de style redondant.

Avez-vous vraiment besoin d'une bibliothèque d'interface utilisateur ?

Alors, avons-nous vraiment besoin d’une bibliothèque de composants d’interface utilisateur ? La réponse est probablement non.

Dans le développement de logiciels, cela dépend souvent de la situation. L'utilisation ou non de la bibliothèque de composants d'interface utilisateur dépend également de la situation. Si vous souhaitez pouvoir démarrer votre projet rapidement sans nécessiter trop de personnalisation, utiliser une bibliothèque de composants d'interface utilisateur mature et facile à utiliser est un bon choix. Mais si vous recherchez un design unique et une apparence entièrement personnalisée, la bibliothèque de composants d’interface utilisateur n’est peut-être pas faite pour vous.

Classification des bibliothèques d'interface utilisateur

Les bibliothèques d'interface utilisateur peuvent être divisées dans les types suivants :

Extensions CSS : des outils tels que Sass, Less, Tailwind et CSS Modules peuvent aider les développeurs à ajouter des styles aux pages Web de manière personnalisée. Ils fournissent des fonctions CSS plus puissantes et flexibles, permettant aux développeurs de gérer et de réutiliser les styles plus facilement.
Bibliothèques comportementales/bibliothèques sans style : telles que HeadlessUI, Radix et React Aria, qui se concentrent sur la mise en œuvre de la logique comportementale des éléments de l'interface utilisateur sans prêter attention à leurs styles spécifiques. Vous pouvez utiliser ces bibliothèques pour gérer l'interaction des utilisateurs, la validation des formulaires, la gestion des états, etc.
Systèmes de style : par exemple, TailwindUI et DaisyUI, qui fournissent un ensemble de modèles de style et de comportement intégrés, vous permettant de créer rapidement une interface utilisateur avec une apparence et un comportement unifiés. Ces modèles de style peuvent être sélectionnés et combinés selon les besoins, économisant ainsi du temps et des efforts de développement.
Bibliothèques de composants : les bibliothèques de composants telles que MUI, Ant Design et Mantine sont des entités indépendantes qui fournissent un ensemble complet de composants d'interface utilisateur réutilisables, tels que des boutons, des zones de saisie, des tableaux, etc. Vous devez apprendre à utiliser correctement ces composants et développer en fonction de leur documentation et de leurs exemples.

Qu'est-ce qu'une bonne bibliothèque d'interface utilisateur ?

Les principales considérations pour une bonne bibliothèque de composants d’interface utilisateur sont les suivantes :

Cohérence : les bibliothèques d'interface utilisateur doivent fournir des éléments, des modèles et des comportements d'interface utilisateur cohérents dans l'ensemble de l'application. Cela aide les utilisateurs à comprendre rapidement comment utiliser la bibliothèque d'interface utilisateur.
Flexibilité : tout en conservant la cohérence, la bibliothèque d'interface utilisateur doit également permettre la personnalisation et l'extension pour répondre aux besoins spécifiques des différentes applications. Les composants modulaires et personnalisables sont idéaux.
Performances : les bibliothèques d'interface utilisateur doivent être optimisées pour les performances. Des facteurs tels que la taille du fichier, la vitesse de rendu et l'efficacité sont importants, en particulier sur les appareils mobiles.
Accessibilité : le respect des directives d'accessibilité Web garantit que votre bibliothèque d'interface utilisateur fonctionne pour tous les utilisateurs. Les rôles ARIA, le HTML sémantique et la prise en charge du clavier en sont quelques exemples.
Documentation : une bonne documentation et des exemples facilitent l'apprentissage et la mise en œuvre des bibliothèques d'interface utilisateur. Les références API, les guides de style et les exemples de code aident à accélérer le développement.
Prise en charge du navigateur : les bibliothèques d'interface utilisateur devraient fonctionner correctement dans les navigateurs modernes et se dégrader progressivement dans les navigateurs plus anciens. Le principe d’enrichissement progressif s’applique également aux bibliothèques d’interface utilisateur.
Communauté : Une communauté active derrière la bibliothèque d'interface utilisateur fournit des forums de discussion, des plugins et une maintenance continue. Cela permet de garantir une disponibilité à long terme.
Intuitivité : les bibliothèques d'interface utilisateur doivent être cohérentes avec les modèles mentaux et les attentes des utilisateurs. Tirez parti des mappages naturels, de la cohérence, des normes et des modèles familiers.
Responsive : les bibliothèques d'interface utilisateur doivent s'adapter aux différentes tailles d'écran et méthodes de saisie. Utilisez des mises en page fluides et adaptées aux mobiles comme bonnes pratiques.

En bref, une bonne bibliothèque d'interface utilisateur doit optimiser les performances, l'accessibilité et la prise en charge des appareils tout en conservant cohérence et flexibilité. Une excellente documentation, une communauté active et une conception intuitive sont également très importantes. La mise en œuvre de principes d’expérience utilisateur et d’heuristiques peut contribuer à garantir des résultats de qualité.

Bibliothèque de composants d'interface utilisateur populaire

Réagir

En raison de son vaste écosystème et de sa popularité, l'écosystème React possède probablement le plus grand nombre de bibliothèques d'interface utilisateur.

Bibliothèque de composants

Material UI : une implémentation populaire basée sur la conception Material Design de Google. Il offre un grand nombre de composants et d'options de thème et existe depuis longtemps, et les développeurs doivent développer en fonction de leur système.
Ant Design : Un choix de bibliothèque de composants fiable utilisé par de nombreuses grandes entreprises telles que Tencent, Baidu, Alibaba, etc. Prend en charge tous les navigateurs modernes, le rendu côté serveur, esm et même Electron. Il existe également des implémentations communautaires fournies pour Angular, Vue et d'autres frameworks. Il utilise CSS-in-JS, peut donc ajouter une surcharge supplémentaire au moment de l'exécution et possède sa propre méthode de développement.
ChakraUI : met l'accent sur l'accessibilité (A11y), est entièrement conforme aux normes d'accessibilité WAI-ARIA, a remporté des prix open source et dispose d'une communauté active. C'est un excellent choix pour créer des interfaces utilisateur réutilisables, il possède des hooks intégrés et prend en charge un très bon mode sombre. L'équipe a également développé Zag.js, qui gère l'interface utilisateur comme une machine à états. L'apprentissage de son API peut prendre un certain temps et il peut y avoir des difficultés à passer à d'autres bibliothèques.
Mantine : Une autre bibliothèque de composants complète avec une bonne accessibilité, fournissant plus de 100 composants et hooks. Mantine est entièrement basé sur TypeScript et peut remplacer les styles par défaut. Vous devez apprendre à utiliser ses fonctions et son API pour atteindre vos objectifs.
Blueprint : Un ensemble de composants pour créer une interface utilisateur gourmande en données sur le bureau. Il est particulièrement adapté à la création d’outils internes, de tableaux de bord et d’applications Electron. Blueprint est l'une des rares bibliothèques de cette liste à être livrée avec un composant de sélecteur de date.
NextUI : A ne pas confondre avec le méta-framework React Next.js, cette bibliothèque est construite à l'aide de Tailwind CSS. Il prétend que la courbe d’apprentissage est minime. Le thème est tailwind.config.jsgéré par fichiers, a une bonne accessibilité et tous les composants prennent en charge les thèmes sombres. Utilisez simplement un nom de classe Tailwind différent pour remplacer les styles.

Sans tête

HeadlessUI : Il fournit les fonctionnalités de base nécessaires pour créer des composants accessibles, mais ne fournit pas de styles spécifiques. Il est spécifiquement conçu pour fonctionner avec le framework CSS Tailwind, mais il existe des options pour utiliser d'autres solutions CSS. Son objectif est de fournir un moyen flexible de créer et de donner aux développeurs un contrôle total sur l'apparence et le style des composants.
React Aria : Bibliothèque développée par l'équipe Adobe, c'est une solution HeadlessUI complète. Il ne traite pas seulement du comportement et de la fonctionnalité des composants, mais se concentre également sur leur accessibilité et leur internationalisation. L'API de la bibliothèque consiste principalement en un ensemble de hooks qui peuvent être utilisés pour créer vos propres composants. Bien qu'il soit encore en version alpha, il vise à fournir des composants prédéfinis prêts à l'emploi.
RadixUI : Anciennement une bibliothèque de composants HeadlessUI, mais récemment ajouté des thèmes et certains styles. Il est connu pour ses excellentes fonctionnalités d’accessibilité et de composabilité. Lorsque vous utilisez RadixUI, tous les thèmes sont exposés via des propriétés personnalisées CSS, ce qui signifie que vous pouvez facilement remplacer les styles par défaut par vos propres styles CSS. Le but de cette bibliothèque est de fournir un moyen simple mais puissant de créer des composants tout en permettant la personnalisation et l'extension de leur apparence.

méthodes mixtes

ShadCN/UI : Elle propose une approche de développement différente des autres bibliothèques. Au lieu d'installer des composants ou des bibliothèques entières via npm, vous pouvez copier-coller le code directement dans votre propre base de code. L'idée est de donner aux développeurs la pleine propriété du composant et de séparer la conception et la mise en œuvre. Il est construit à l'aide de Tailwind et fournit un outil CLI capable de générer du code de composant et d'ajuster tailwind.config.jsdes fichiers.
KumaUI : Il utilise la technologie CSS-in-JS sans exécution pour créer des composants d'interface utilisateur sans tête, offrant une grande flexibilité. Sa conception s'inspire d'autres solutions CSS-in-JS sans exécution telles que PandaCSS, Vanilla Extract et Linaria, ainsi que Styled System, ChakraUI et Native Base.

Vue

Dans l'écosystème Vue, la documentation de nombreuses bibliothèques est écrite en chinois au lieu de l'anglais.

Bibliothèque de composants

Quasar : Elle n'est pas considérée comme une bibliothèque en soi, mais plutôt comme un framework. Il est basé sur Vue, mais l'idée est que vous pouvez l'utiliser pour créer des sites Web et des applications, ce qui signifie qu'il utilise la CLI pour générer pour le Web, le mobile, le bureau, le SPA (application monopage), le SSR (rendu côté serveur), etc. Sortie différente.
Vuetify : prétend être une bibliothèque d'interface utilisateur open source qui ne nécessite aucune compétence en conception et propose des composants Vue soigneusement conçus. Il est complet comme la plupart des bibliothèques de composants matures. Encore une fois, il faut comprendre l'API de la bibliothèque et être « verrouillé » dans son modèle de composition de composants pour pouvoir l'utiliser.
Element Plus : Comme indiqué sur le site officiel, Element Plus est une « bibliothèque de composants basée sur Vue 3 pour les concepteurs et les développeurs ». Je ne sais pas en quoi elle diffère des autres bibliothèques, mais elle offre le même type de sélection de composants. Il compte plus de 20 000 étoiles et plus de 150 000 téléchargements par semaine, ce qui montre sa popularité.
VueMaterial : Comme son nom l'indique, VueMaterial est l'implémentation Vue de Material Design. La documentation est simple, légère, réactive et dispose d'une API facile à utiliser, qui ressemble aux avantages d'une bibliothèque de composants complète.

Angulaire

Angular connaît une renaissance et de nombreuses entreprises l'utilisent encore.

Bibliothèque de composants

Angular Material : Identique à l’implémentation Material de divers autres frameworks. Ils prétendent tous être de haute qualité et polyvalents.
PrimeNG : Une bonne chose à propos de cette collection est le choix des thèmes de base. Les options de conception peuvent être choisies parmi d'autres cadres de conception populaires tels que Material Design, Bootstrap, Soho, Fluent, Nano, etc. Cela se fait via un éditeur visuel, qui fait partie des options du thème. PrimeNG fournit également une boîte à outils Figma UI, des modèles prêts à l'emploi et une API SASS.
NG Bootstrap : Il s'agit d'une liaison angulaire avec Twitter Bootstrap (4.0). Cependant, il convient de noter que les développeurs doivent en même temps apprendre l’API de la bibliothèque et maîtriser l’utilisation des noms de classes Bootstrap.

Svelte

Svelte possède de nombreuses fonctionnalités intégrées pour gérer les styles et les animations. Pour les styles, utilisez simplement la balise dans le fichier du composant styleet elle sera limitée à ce composant. De plus, Svelte propose motiondes modèles pour gérer l'assouplissement et les animations printanières, ce qui est idéal pour l'expérience de développement.

Composants sans tête

Svelte Headless UI : Entièrement porté depuis React Headless UI, compatible avec SvelteKit (méta-framework Svelte).

Bibliothèque de composants

SvelteUI : Une bibliothèque de composants complète écrite en TypeScript. Il contient plus de 50 composants hautement personnalisables, couvrant divers éléments communs tels que la mise en page, le fonctionnement, la saisie et la typographie dans une bibliothèque de composants.
Smelte : Un framework UI basé sur Svelte et Tailwind CSS, conforme aux spécifications Material Design. Il fournit un plug-in Rollup dans lequel vous pouvez définir des thèmes, des couleurs et d'autres styles. Importez simplement le CSS de la bibliothèque et commencez à l'utiliser ! Cette bibliothèque fournit également certains composants moins courants dans d'autres bibliothèques, tels que des sélecteurs de date, des tiroirs de navigation et des arborescences.

Solide

SolidJS est un framework relativement nouveau et existe depuis moins longtemps que la plupart des frameworks mentionnés ci-dessus. C'est un choix solide pour votre prochain projet.

Composants sans tête

Kobalte : une boîte à outils d'interface utilisateur sans style, accessible et composable pour construire les fondations du système de conception. Inspiré par AriaKit, RadixUI, React Araia et Zag. D'après la documentation officielle, cela ressemble beaucoup à l'implémentation de Radix. REMARQUE : toujours en version bêta.

Bibliothèque de composants

SUID : version portée MUI de SolidJS. Comme le dit la documentation "même API, même conception", si vous venez de React et avez utilisé MUI, vous vous sentirez comme chez vous. Les mêmes mises en garde s’appliquent. Ils ont un outil sympa qui convertit le code React en code Solid.
Solid Bootstrap : Comme son nom l'indique, il s'agit d'un wrapper Bootstrap au-dessus de SolidJS. La différence est que vous devez utiliser props(par exemple variant) au lieu de classes pour manipuler la plupart des choses. Il existe également une version "Core", qui contient des composants implémentés sans tête.

Rapide

En tant que dernier framework de cet article, l'écosystème Qwik est encore très nouveau. Il y a donc relativement peu d'options ici. Mais il est possible de tirer parti de l'écosystème React pour utiliser des bibliothèques de composants dans les applications Qwik.

Composants sans tête

QwikUI : Bien qu'encore en version bêta, QwikUI fournit une suite sans tête pour créer des composants entièrement compatibles WAI-ARIA. La version bêta actuelle comporte des listes déroulantes, des onglets et des accordéons. Ils ont également développé des projets d'info-bulles, de sélecteurs et de fenêtres contextuelles. L'équipe développe également sa propre approche ShadCN/UI, nommée « Fluffy ».

Multi-framework

Récemment, quelques bibliothèques autonomes ont également été créées à l'aide de chaînes d'outils CSS :

ArkUI : fournit des composants accessibles sans tête pour React, Vue et SolidJS à l'aide de machines à états. Réalisé par les créateurs de Zag.js et Chakra UI, cela semble être un bon compromis entre les deux produits.
Flowbite : un composant construit sur Tailwind, non seulement adapté aux frameworks JavaScript tels que React, Qwik, Vue, Svelte, Angular et SolidJS ; mais également adapté aux méta-frameworks populaires tels que Astro, Next.js, Remix, Nuxt, Meteor ; et des frameworks non-JS tels que Laravel, Symfony, Ruby on Rails, Pheonix, Django et Flask.

Résumer

Comme mentionné ci-dessus, de nombreuses options s’offrent à nous. Choisir la bonne solution peut améliorer considérablement la productivité, tandis qu’un mauvais choix peut entraîner de nombreux problèmes.

Soyez donc prudent lorsque vous faites votre choix. Espérons que cet article vous donnera un aperçu clair et vous fera réfléchir sérieusement à la question de savoir si vous devez utiliser une bibliothèque ou si cela vaut la peine d'investir dans le développement de votre propre solution. Il ne s’agit pas seulement de l’équipe produit, mais aussi de l’expérience utilisateur.

N'oubliez pas que les utilisateurs ne se soucient pas de la solution que vous utilisez. Choisir une solution adaptée à votre projet et à vos besoins est le plus important.