Maison > Article > interface Web > Qu'est-ce qu'une bibliothèque de composants et devriez-vous créer la vôtre ?

Qu'est-ce qu'une bibliothèque de composants et devriez-vous créer la vôtre ?

WBOYoriginal: 2024-08-06 18:35:41366parcourir

Avant de vous lancer dans la création de votre propre bibliothèque de composants à partir de zéro, examinons les différents types de bibliothèques de composants disponibles, ainsi que les avantages et les inconvénients de leur utilisation.

? Je tiens à remercier tout particulièrement Stephband (Mastodon, Bluesky) pour sa relecture et ses commentaires.

Veuillez noter qu'il s'agit d'un X-Post de mon site. Le contenu est en grande partie le même, mais la publication originale contient des extraits interactifs et des vidéos qui sont omis dans cet article.

Et s'il n'y avait pas d'albums de musique ?

Je suis un grand fan de musique. L’un de mes passe-temps favoris est de mettre un disque et de l’écouter d’un bout à l’autre. Un album de musique est simple dans son concept, c'est une suite de morceaux enregistrés par un artiste et est considéré comme un ensemble complet et cohérent de chansons.

Mais et si la musique enregistrée n’existait pas ? Au lieu de mettre des chansons sur cassette, CD ou mp3 (ou FLAC si vous le souhaitez), vous ne pouvez écouter un album que si l'artiste l'a joué en direct pour vous. Il faudrait aller voir le groupe, leur demander d’installer leur équipement et leur faire jouer l’album d’avant en arrière. Ils devraient jouer de la même manière à chaque fois pour s’assurer que tout le monde vive exactement la même expérience.

Les fissures commenceraient à apparaître. Ce n’est pas un moyen efficace de garantir que toute personne intéressée par la musique du groupe puisse l’écouter. Si Taylor Swift devait jouer personnellement sa chanson Fortnight à chaque personne qui l'écoute sur Spotify, cela lui prendrait 3 179 ans. Et cela ne prend pas en compte les déplacements en avion. Les artistes s'ennuieraient, voire seraient négligents, ce qui entraînerait une moindre expérience pour leurs auditeurs.

Alors, quel est le rapport avec le développement Web ? Chaque fois que vous créez un contrôle d’interface utilisateur, vous devez vous assurer qu’il fonctionne, qu’il est robuste et accessible. Vous vous ennuierez si vous continuez à réécrire la même interface utilisateur à chaque fois. Des erreurs se glisseront, conduisant à une pire expérience pour vos utilisateurs finaux.

Un peu de moi

Je suis développeur Web depuis près de 10 ans et j'ai moi-même écrit des centaines de composants, souvent le même modèle d'interface utilisateur plusieurs fois. J'ai utilisé des dizaines de bibliothèques de composants et créé des tableaux de bord d'administration, des bibliothèques de composants, des applications mobiles, des blogs, des plugins figma, des extensions VSCode, etc. Cet article sera une distillation sur où je vois le rôle des composants, des bibliothèques et si les développeurs devraient écrire les leurs.

Qu'est-ce qu'un composant ?

Lors de la création d’interfaces utilisateur, nous n’écrivons pas tout le balisage HTML à partir de zéro à chaque fois. Nous écrivons nos interfaces utilisateur à l'aide de composants, des blocs de construction réutilisables qui encapsulent des modèles d'interface utilisateur courants. L'écriture d'un composant vous permet de l'utiliser plusieurs fois dans un seul projet ou même dans des projets indépendants.

Ici, j'ai écrit un composant compteur, je l'ai écrit une fois et je l'ai utilisé à plusieurs endroits de la page.

<body>
  <div class="wrapper">
    <counter-button></counter-button>
    <counter-button></counter-button>
    <counter-button></counter-button>
  </div>

  <script type="module">
    import { LitElement, html } from 'lit';

    class CounterButton extends LitElement {
      constructor() {
        super();
        this.count = 0;
      }

      static properties = {
        count: { type: Number }
      };

      _increment() {
        this.count++;
      }

      render() {
        return html`
          <button @click=${this._increment}>Count: ${this.count}</button>
        `;
      }
    }

    customElements.define('counter-button', CounterButton);
  </script>
</body>

Nous, créateurs de tutoriels, aimons faire des démonstrations de compteurs comme s'ils étaient démodés, mais une application du monde réel contiendra des dizaines de modèles d'interface utilisateur différents écrits sous forme de composants.

Dans cet article, je regrouperai les règles CSS qui fournissent un style pour certains modèles d'interface utilisateur sous l'égide des composants. La définition peut devenir trouble selon à qui vous demandez.

Qu'est-ce qu'une bibliothèque de composants ?

Tous les composants ne sont pas autonomes. Il est logique que de nombreux composants soient regroupés dans un seul package, appelé bibliothèque de composants.

Si vous souhaitez que votre site ait une apparence ou une convivialité spécifique, vous pouvez utiliser une bibliothèque de composants. Il existe des bibliothèques de composants qui :

proposer des composants qui respectent un cahier des charges de conception.
proposer plusieurs solutions pour un modèle d'interface utilisateur spécifique.
travailler avec une chaîne d'outils spécifique

Mais ils se présentent sous différentes formes et tailles. La définition que j'utilise lors de la définition d'une bibliothèque de composants est la suivante :

Une bibliothèque de composants est un ensemble de composants réutilisables qui sont cohérents dans leur utilité ou leur apparence (ou les deux). Une excellente bibliothèque de composants aidera les développeurs à répondre efficacement à leurs besoins en matière d'interface utilisateur, tout en offrant une expérience exemplaire à l'utilisateur final.

Quelle est la différence entre une bibliothèque de composants et un système de conception

Je parle des lignes directrices et des systèmes de conception plus loin dans cet article, je vais donc prendre un moment pour les lever toute ambiguïté. Il peut être difficile de voir où l'un se termine, où l'un commence ou où l'un englobe l'autre.

Systèmes de conception

Je considère un système de conception comme une spécification de l'apparence, de la sensation et du comportement des choses. Un système de conception peut englober un produit, une marque ou une entreprise pour garantir la cohérence de l’ensemble des expériences. Un système de conception complet dictera tout, depuis les familles de polices, les tailles de police, les tailles d'espacement, les modèles d'interface utilisateur et les directives de copie.

Quelques-uns des systèmes de conception les plus connus incluent :

Conception matérielle (Google)
Conception de base (Uber)
Système de conception Lightning (Salesforce)

Bien que de nombreux systèmes de conception soient spécifiques aux entreprises, il existe des systèmes de conception, comme Material Design, que les équipes du monde entier utilisent pour raccourcir leur chemin vers la création de produits aux sensations familières. Vous avez probablement utilisé une poignée de produits qui utilisent les principes de Material Design, mais ils ne sont certainement pas exempts de problèmes d'utilisation de base.

Bibliothèques de composants

Quant aux bibliothèques de composants, elles peuvent ou non être l'implémentation du code d'un système de conception. Si vous travaillez pour une entreprise dotée d'un système de conception, il est probable que la bibliothèque de composants correspondante (si elle existe) y soit étroitement intégrée.

Par exemple, Material Web de Google est une implémentation de composant Web de Material Design. Les composants Web de base et Lightning sont également open source.

Un bref historique des bibliothèques de composants

Le concept de composants d'interface utilisateur (ou widgets) existe depuis longtemps. Si vous voulez voir un musée d'interfaces utilisateur rétro, prenez du pop-corn et regardez cette vidéo de plus de 2 heures de "tous les widgets" de 1974 à 1990.

À partir du début des années 2000, nous avons commencé à voir des bibliothèques de composants conçues pour aider les développeurs à créer pour le Web. Le paysage des navigateurs Web à l’époque était méconnaissable par rapport à ce que nous voyons aujourd’hui. Les versions d'Internet Explorer s'écartaient complètement des spécifications, ce qui était particulièrement problématique étant donné l'énorme part de marché qu'IE détenait à l'époque. Internet Explorer 6 était connu pour être difficile à développer. Principalement en raison de sa mise en œuvre incorrecte du modèle de boîte et du manque de support CSS2.

? Jusqu'à présent, Internet Explorer prenait en charge un « mode bizarreries » qui permettait aux développeurs d'écrire du HTML et du CSS non standard pour apaiser les anciens navigateurs qui ne prenaient pas en charge les normes.

Heureusement, lorsque j'ai commencé sérieusement le développement Web, bon nombre de ces problèmes ont été résolus. À ce stade, il existait encore une poignée de bibliothèques qui facilitaient un peu l’écriture d’interfaces complexes avec prise en charge de plusieurs navigateurs. jQuery UI, la première bibliothèque de composants que j'ai utilisée, prenait en charge les accordéons et autres widgets. Mais le navigateur est en constante évolution, et nous disposons désormais d'une manière native d'implémenter ce modèle d'accordéon en utilisant les détails et les éléments récapitulatifs, disponibles dans tous les navigateurs en 2020. Avec ces éléments, vous pouvez aller assez loin dans la création d'accordéons interactifs sans JavaScript.

Comparez cela avec 2009, et ces éléments n’ont été implémentés dans aucun navigateur. Il fallait pas mal de JS pour fonctionner. Jetez un œil au code source de jQuery UI v1.7 et CTRL+F « accordéon » si vous voulez voir comment les développeurs Web implémentaient les accordéons il y a 15 ans.

Au cours des deux décennies suivantes, les capacités du Web se sont développées. Des appareils plus puissants signifiaient des navigateurs plus puissants. Des navigateurs plus puissants signifiaient que les applications Web devenaient plus ambitieuses. Les développeurs ont répondu en créant les outils pour nous aider à créer ces applications en nous permettant de créer des interfaces utilisateur à l'aide de blocs de construction, c'est-à-dire un modèle de composant. Nous avons assisté à une prolifération de ces frameworks basés sur des composants. Je parle d'Angular, React et Vue. Chacun avec son propre écosystème riche de bibliothèques de composants.

Il y a un argument raisonnable à faire valoir selon lequel il y a eu une correction excessive et que le paysage frontend est désormais sursaturé d'outils qui sont trop puissants pour les besoins de la plupart des gens, mais n'allons pas là-bas.

Cette version est étendue avec des extraits interactifs sur la publication originale

Qu’est-ce qu’une bonne bibliothèque de composants ?

Le défi lié à la création d'une bibliothèque de composants est qu'il ne s'agit pas d'une affaire unique et terminée. La plupart des bibliothèques les plus populaires existent depuis des années et ont fait l'objet de nombreuses recherches, commentaires d'utilisation et contributions pour les amener là où elles en sont aujourd'hui.

J'ai découvert qu'une bonne bibliothèque de composants présente souvent les caractéristiques suivantes :

Il comprend les problèmes de ses développeurs cibles et résout bien ces problèmes
Il contient une excellente documentation
Cela garantit une bonne expérience pour l'utilisateur final
Il est robuste et s'adapte aux modes d'entrée et aux appareils appropriés.

D'un autre côté, une façon de discerner si une bibliothèque de composants n'est pas bonne est si elle ne prend pas en compte l'accessibilité, a une API incohérente, a peu ou pas de gestion de projet ou n'a pas une documentation claire et cohérente.

Quels sont les avantages de l’utilisation d’une bibliothèque de composants ?

Nous savons à quoi ressemble une bonne bibliothèque de composants, alors voyons comment elle peut améliorer un peu votre vie et celle de vos utilisateurs.

Les bibliothèques de composants vous font gagner du temps

Si vous travaillez sur un projet avec des délais serrés, il est important d’être efficace. Mais l’efficacité ne doit pas se faire au détriment de la création d’une expérience Web robuste. L'utilisation d'une bibliothèque de composants vous permet de passer moins de temps à réinventer la roue et plus de temps à vous concentrer sur les détails les plus fins.

Les bibliothèques de composants rendent vous et vos utilisateurs plus heureux

Nous ne sommes pas motivés par le travail répétitif. Nous aimons les défis techniques, et réécrire les mêmes composants n’est pas un défi amusant. Nous avons déjà parlé de ce qui arrive lorsque nous nous ennuyons et laissons passer des erreurs.

Si vous souhaitez implémenter un composant de dialogue à partir de zéro, vous devez :

Gérer correctement le focus trapping
Rendre le reste de la page inerte
Positionnez correctement la boîte de dialogue
Assurez-vous qu'il fonctionne avec les technologies d'assistance

Il faut du travail pour se souvenir et mettre en œuvre ce qui précède, mais la conséquence d'une erreur peut rendre votre interface littéralement inutilisable, comme c'est le cas si vous gérez incorrectement le focus.

En utilisant une bibliothèque de composants conçue pour les utilisateurs finaux, vous pouvez éviter le risque d'introduire des expériences interrompues, tout en passant moins de temps à reconstruire les mêmes composants.

Les bibliothèques de composants mènent à des expériences cohérentes

Si vous travaillez pour une entreprise avec plusieurs applications Web différentes, celles-ci suivront généralement un ensemble de directives. Ces directives peuvent dicter la palette de couleurs à utiliser, la taille de votre typographie ou l'apparence et le comportement des éléments de l'interface utilisateur.

Mais vous augmentez la probabilité que votre application s'écarte du guide de style si vous réécrivez des composants. En disposant d'une bibliothèque de composants, vous pouvez plus facilement vérifier l'interface utilisateur de vos composants par rapport aux directives de la marque afin qu'ils aient fière allure, où qu'ils soient utilisés.

Uber propose plusieurs applications différentes qui partagent les mêmes éléments d'interface utilisateur. Je suis presque certain qu'ils utilisent la même bibliothèque de composants dans ces applications. De cette façon, chaque nouvelle application est pratiquement garantie de respecter les directives de la marque.

What is a component library and should you build your own?

Quels sont les inconvénients de l’utilisation d’une bibliothèque de composants tierce ?

Les avantages que j'ai mentionnés ci-dessus sont indépendamment du fait que vous utilisiez votre propre bibliothèque de composants ou celle d'un tiers. Si vous ou votre équipe avez décidé de ne pas créer de bibliothèque et de vous appuyer plutôt sur un tiers, cela vaut la peine de considérer ce qui suit.

Verrouillage du fournisseur

En choisissant une bibliothèque de composants, vous choisissez un partenaire qui aura un impact considérable sur la façon dont vous écrivez votre code frontend et sur l'apparence et le comportement de vos interfaces.

Le premier aura un grand impact sur vous, et le second aura un grand impact sur vos utilisateurs finaux. L'utilisation d'une bibliothèque de composants vous enferme dans les normes de cette bibliothèque de composants.

La bibliothèque pourrait introduire des changements massifs dans une version majeure qui pourraient nécessiter un temps de développement dédié et de nombreux tests pour garantir qu'aucune régression sérieuse n'est introduite.

Il y a quelques années, j'ai utilisé React Admin pour créer un tableau de bord d'administration complexe pour une division interne. La bibliothèque proposait une suite de composants spécifiquement dédiés à la récupération et à l'affichage de données complexes. Parce que notre application à l'époque reposait fortement sur React Admin, la mise à niveau entre les versions majeures était un défi, d'autant plus que de nombreux outils internes utilisés par React Admin avaient été remplacés par d'autres. La surface de changement était énorme et nous avons passé beaucoup de temps à mettre à niveau et à signaler les problèmes que nous avons repérés.

Je ne pense pas que créer notre propre solution nous aurait fait gagner du temps à long terme, mais ce type de verrouillage du fournisseur mérite d'être pris en compte, surtout avant de se lancer dans un outil.

Gonflement du code

Aussi choquant que cela puisse paraître, les bibliothèques comportant de nombreux composants ont tendance à être écrites en utilisant beaucoup de code. Code que vous téléchargez lors de l'installation des dépendances et code que vous envoyez à vos utilisateurs finaux.

Les outils modernes facilitent l'exécution d'optimisations de bundles telles que le tremblement d'arbre pour supprimer le code inutilisé, mais rien ne garantit que vous supprimez tout le code dont vos utilisateurs n'auront pas besoin.

À moins que vous ne fassiez des recherches approfondies sur les bibliothèques que vous utilisez, vous n'êtes peut-être pas au courant de tous les packages distincts qu'elles importent. Vous pourriez vous retrouver avec des centaines de dépendances inutiles. Les membres de la communauté e18e ont travaillé dur pour mettre en lumière ce problème, tout en le résolvant.

Beaucoup de ces problèmes pourraient également concerner le déploiement de votre propre bibliothèque de composants. La plus grande différence est que vous avez la responsabilité de votre bibliothèque de composants. Vous êtes capable de définir comment il résout vos problèmes spécifiques et vous avez le contrôle de l’amélioration de ses lacunes.

Les différentes formes qu'une bibliothèque de composants peut prendre

La proposition initiale du World Wide Web était un outil destiné à améliorer la communication entre les chercheurs du CERN. La proposition décrivait comment les documents pourraient être partagés et liés les uns aux autres grâce à l'utilisation de l'hypertexte. Il s’agit de la pierre angulaire fondamentale du Web, et nous utilisons toujours l’humble balise pour créer un lien entre d’autres documents HTML sur le Web.

Mais le Web a pris de l'ampleur au cours des dernières décennies et les navigateurs que nous utilisons pour naviguer sur le Web sont devenus des bêtes à part. Les navigateurs d'aujourd'hui peuvent permettre de puissantes formes d'expression créative et l'exécution de logiciels de type natif.

Il existe des centaines de solutions différentes, certaines à usage général, d'autres hyper-niche, mais trouver le bon outil pour votre prochain projet nécessite un processus de décision complexe qui pourrait ressembler à ceci.

Ceci n'est pas une liste exhaustive de TOUS les cas d'utilisation ou types de bibliothèques de composants, mais elle illustre en quoi les bibliothèques de composants diffèrent en termes de :

les technologies impliquées.
les niveaux d'abstraction qu'ils offrent.
les problèmes qu'ils résolvent.

Jetons un coup d'œil à certains des types de bibliothèques de composants les plus courants

? Une petite remarque : si vous souhaitez créer votre propre bibliothèque de composants Web, envisagez de consulter mon cours Component Odyssey. Vous apprendrez à créer et à publier une bibliothèque de composants qui fonctionne dans n'importe quel framework frontend.

Bibliothèques de classes utilitaires / Guides de style CSS

Pour moi, Bootstrap est le premier qui me vient à l'esprit. À l’époque, si vous vouliez donner un coup de peinture rapide à votre site, vous supprimiez le lien CDN vers le fichier CSS d’amorçage et obteniez immédiatement cet aspect Bootstrap. C'était partout au milieu des années 2010.

La portée technique de ce type d'outils va de

Un seul fichier CSS (Pico)

Une chaîne d'outils pour générer des classes CSS en fonction de votre configuration (Tailwind)

Des dizaines d'autres outils, comme Open Props, se situent quelque part entre les deux.

Bibliothèques de composants disponibles dans le commerce

Si vous créez une application Web interactive, vous souhaiterez peut-être simplement vous procurer une suite de composants qui ont fière allure et fonctionnent bien. Il existe de nombreuses bibliothèques de composants prêtes à l'emploi qui vous offrent tout ce dont vous avez besoin et bien plus encore.

Quel que soit le framework avec lequel vous écrivez votre application, il y aura probablement un ensemble de composants intéressants que vous pourrez utiliser.

Une autre excellente bibliothèque de composants est Shoelace, qui fournit des dizaines de composants entièrement interactifs et entièrement stylisés.

Ce qui rend les bibliothèques comme Shoelace particulièrement intéressantes, c'est qu'elles sont construites à l'aide de composants Web, la manière intégrée au navigateur d'écrire des composants. Construire vos interfaces utilisateur avec des outils tels que Shoelace vous offre l'avantage supplémentaire de pouvoir les utiliser dans différents frameworks frontend. C’est quelque chose dont j’ai un peu parlé dans le passé.

Voici le même composant Shoelace utilisé dans Vue et React.

Composants sans style

En fonction des spécifications de votre projet, vous n'aurez peut-être pas le luxe d'utiliser un outil standard. Vos spécifications de conception peuvent être très spécifiques.

J'ai vu des équipes faire rouler des composants au premier signe de friction. Et dans un cas de sélection de données manuelle, cela a conduit à une expérience utilisateur bien pire. Rétrospectivement, l'utilisation d'une bibliothèque de composants sans style aurait donné à l'équipe une flexibilité en matière d'apparence, tout en garantissant que le temps

C'est pourquoi vous pouvez rechercher une bibliothèque qui propose des composants totalement sans style avec des crochets de style flexibles. Si c’est une bonne bibliothèque, elle s’occupera également de toutes ces interactions complexes. C’est le meilleur des deux mondes.

Il est facile de gâcher une case à cocher si vous souhaitez aller au-delà des crochets de style fournis par le navigateur, à moins que vous ne testiez avec une large gamme d'appareils et de modes de saisie.

L'article original contient une vidéo me montrant interagir avec différentes implémentations de cases à cocher à l'aide d'un lecteur d'écran

Radix est un exemple populaire de bibliothèque, mais il est construit à l'aide de React.

D'autres exemples de bibliothèques de composants comme celle-ci sont Lion et HeadlessUI.

Copier les bibliothèques de composants collants

Certains développeurs pourraient vouloir le meilleur des deux mondes. Ils voudront peut-être un composant créé par une bibliothèque tierce de confiance, tout en ayant un contrôle total sur le balisage, les styles et les fonctionnalités. Les bibliothèques comme ShadCN permettent ce type de flux de travail, en permettant aux développeurs de copier et coller la définition du composant dans leurs propres projets, leur permettant ainsi de posséder le composant.

Pourquoi n’y a-t-il pas une seule bibliothèque de composants pour les gérer tous ?

À ce stade, il est probablement clair pourquoi aucune bibliothèque de composants unique n’existe. Nous avons examiné de manière non exhaustive différents groupes de bibliothèques de composants.

Il existe cependant un mouvement visant à introduire un « système de conception global », un concept dirigé par Brad Frost.

Dans l'annonce, Brad souligne que dans les centaines de projets auxquels il a participé, de nombreux contrôles de l'interface utilisateur se comportent (ou devraient se comporter) de la même manière dans ces différents projets, mais les développeurs réimplémentent la même chose dans chaque projet. Cela a entraîné une perte de temps et d’efforts, ainsi que des incohérences entre les projets. Cela s'étend également aux bibliothèques de composants existantes. Vous verrez que le comportement du clavier pour une combobox dans React Aria est différent de celui de la combobox dans ShadCN.

L'article original contient une vidéo me montrant interagir avec différentes implémentations de combobox à l'aide d'un clavier

Brad Frost propose un système de conception global comme un ensemble de composants Web qui devraient être adoptables par presque tous les projets frontend pour garantir une base de fonctionnalités pour les contrôles qui ne sont pas encore disponibles en HTML.

Des discussions sont en cours au sein de l'Open UI pour voir comment cela pourrait commencer à prendre forme dans les prochaines années.

Devriez-vous créer votre propre bibliothèque de composants ?

Cet article a été une vaste plongée dans les bibliothèques de composants, et avec tout ce contexte, vous vous demanderez inévitablement, en regardant la page HTML vide de votre prochain grand projet, s'il faut créer votre propre bibliothèque de composants ou utiliser un existant.

Ma première pensée est : Je ne pense pas que vous devriez créer votre bibliothèque.

Je préfère généralement choisir une bibliothèque testée au combat. Particulièrement celui qui a :

A été utilisé dans des milliers de projets
Une communauté forte, sur Discord, ou GitHub
Excellente documentation
Une forte concentration sur l'accessibilité
Travaillé avec les atouts du framework choisi

Le plus important parmi tout cela est d'utiliser une bibliothèque de composants et de prendre soin de créer des composants accessibles.

Prenons une combobox par exemple. C'est une entrée de recherche et un menu de sélection mélangés en un seul. Si vous avez construit le vôtre, vous pourrez le rendre beau et travailler avec votre souris. Mais vous devrez également considérer :

Support multi-navigateurs
Comportement de tabulation et de focus
Prise en charge du lecteur d'écran
Gérer les états pour le chargement asynchrone des résultats de recherche

Konnor Rogers, qui fait un excellent travail dans le domaine des composants Web + Web, a partagé d'innombrables frustrations face à ses expériences de création d'une combobox accessible. Voici un de ces tweets qu’il a partagé.

La prise en charge des lecteurs d'écran est particulièrement complexe et mérite sa propre liste à puces. Pour prendre en charge les lecteurs d'écran, vous devrez également gérer :

régions en direct
contrôles interactifs
articles sélectionnés
support entre différents lecteurs d'écran

En passant, je n'ai accès qu'à la voix off, ce qui signifie qu'il m'est difficile de tester ces modèles d'interface utilisateur complexes à l'aide de différents lecteurs d'écran. Comme pour les navigateurs, il existe des différences entre les lecteurs d’écran. Dans cet article, Are We Live ?, Scott O'Hara décrit à quel point il existe des différences dans la façon dont ils traitent les régions en direct.

Cela signifie que c'est également à vous, le développeur, de choisir une bibliothèque de composants en laquelle vous pouvez avoir confiance et qui a été développée dans un souci d'accessibilité. C’est pourquoi il est également important de choisir une bibliothèque de composants dotée d’une communauté forte. Il est important de pouvoir :

Voir les bogues et les problèmes que d'autres ont signalés pour une bibliothèque donnée
Suggérer (ou même contribuer) des améliorations et des modifications à cette bibliothèque
Discutez d'idées avec les membres de la communauté et établissez des relations de travail avec des membres actifs de la communauté ou même avec les responsables eux-mêmes

Enfin et non des moindres, une bonne bibliothèque de composants prendra en compte bien plus que l'esthétique de leurs composants. Pour une bibliothèque de composants conçue pour le Web, il est préférable de :

adhérer aux directives pour l'accessibilité du contenu Web (WCAG)
assurez-vous que les composants fonctionnent sur différentes modalités de saisie (tactile, clavier, lecteur d'écran)
assurez-vous que les composants sont utilisables pour les personnes ayant des besoins supplémentaires, comme celles vivant avec des troubles vestibulaires, une déficience visuelle ou une main cassée.

Construire votre propre bibliothèque de composants peut être une bonne chose, en fait

Si je ne vous ai pas dissuadé de créer une bibliothèque de composants, laissez-moi me contredire et vous expliquer pourquoi cela peut être une très bonne chose de créer la vôtre.

Si vous prenez le temps de consacrer du soin et de l'attention à la création d'une bibliothèque de composants, vous vous retrouverez alors un développeur qui comprend mieux la plate-forme du navigateur, les meilleures pratiques en matière d'accessibilité, les pratiques de test, etc.

Mais cela ne s’arrête pas là, il existe d’excellentes raisons de créer votre propre bibliothèque.

Pour commencer, vous pouvez créer quelque chose d'adapté à vos besoins et éviter une partie du gonflement que vous pourriez obtenir à partir d'une bibliothèque de composants prête à l'emploi. C'est à vous et à votre équipe de comprendre vos utilisateurs finaux, et vous pouvez créer quelque chose spécifiquement pour eux.

Vous avez également la possibilité d'expérimenter de nouvelles approches. Si vous rencontrez un problème d’hyper-niche, il n’existe peut-être pas de bibliothèque de composants pour résoudre ce besoin. Il pourrait s'agir d'une bibliothèque de composants qui :

Visualise les données de manière spécifique
Possède une identité visuelle distincte et unique
Est construit sur un nouveau framework

Cela vous donne la possibilité de construire quelque chose sur mesure selon vos besoins. Vous avez alors la possibilité de changer et de réparer les choses à mesure que vos besoins évoluent ou à mesure que vous comprenez mieux l'espace du problème.

Ce qui est important, c'est que vous en apprendrez davantage sur le Web. Si c'est la première fois que vous créez une bibliothèque de composants, cela peut être l'occasion d'approfondir les spécifications du navigateur HTML ou de parfaire vos connaissances en matière d'accessibilité Web. Cela améliorera vos capacités en tant que développeur Web, ce qui vous sera très utile dans tout projet frontend à l'avenir. Cela pourrait même vous aider à décrocher votre prochain emploi.

Donc, la nécessité ou non de créer une bibliothèque de composants dépend de vos objectifs finaux. Considérez des questions telles que :

Est-ce que je veux mieux comprendre le navigateur ?
Est-ce que je veux construire quelque chose rapidement ?
Est-ce que je souhaite le rendre utilisable par le plus grand nombre d'utilisateurs possible ?
Existe-t-il des bibliothèques qui résolvent mon problème actuel ?

En fonction de vos réponses, vous pourrez lancer le bon appel pour votre projet.

Merci d'avoir lu ! Si vous souhaitez créer votre propre bibliothèque de composants Web, envisagez de consulter mon cours Component Odyssey. Vous apprendrez à créer et à publier une bibliothèque de composants qui fonctionne dans n'importe quel framework frontend.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Normes générales de codage JavaScript.Article suivant：Normes générales de codage JavaScript.

Articles Liés

Voir plus