Heim > Artikel > Web-Frontend > Was ist eine Komponentenbibliothek und sollten Sie eine eigene erstellen?

Was ist eine Komponentenbibliothek und sollten Sie eine eigene erstellen?

WBOYOriginal: 2024-08-06 18:35:41370Durchsuche

Bevor wir uns daran machen, Ihre eigene Komponentenbibliothek von Grund auf zu erstellen, werfen wir einen Blick auf die verschiedenen Arten von Komponentenbibliotheken und die Vor- und Nachteile ihrer Verwendung.

? Ein besonderer Dank geht an stephband (Mastodon, Bluesky) für das Korrekturlesen und das Feedback.

Bitte beachten Sie, dass dies ein X-Beitrag von meiner Website ist. Der Inhalt ist weitgehend derselbe, der ursprüngliche Beitrag enthält jedoch interaktive Ausschnitte und Videos, die in diesem Artikel weggelassen werden.

Was wäre, wenn es keine Musikalben gäbe?

Ich bin ein großer Musikfan. Eine meiner Lieblingsbeschäftigungen ist es, eine Schallplatte aufzulegen und sie von vorne bis hinten anzuhören. Ein Musikalbum hat ein einfaches Konzept, es besteht aus einer Reihe aufgenommener Titel eines Künstlers und wird als vollständige und zusammenhängende Sammlung von Liedern betrachtet.

Aber was wäre, wenn es keine aufgezeichnete Musik gäbe? Anstatt Songs auf Band, CD oder MP3 (oder FLAC, wenn Sie dazu geneigt sind) zu brennen, können Sie sich ein Album nur anhören, wenn der Künstler es live für Sie spielt. Sie müssten zur Band gehen, sie bitten, ihre Ausrüstung aufzubauen und sie dazu zu bringen, das Album von vorne nach hinten abzuspielen. Sie müssten es jedes Mal auf die gleiche Weise spielen, um sicherzustellen, dass jeder genau das gleiche Erlebnis hat.

Die Risse würden sichtbar werden. Dies ist kein effizienter Weg, um sicherzustellen, dass jeder, der sich für die Musik der Band interessiert, sie hören kann. Wenn Taylor Swift ihren Song „Fortnight“ persönlich für jeden spielen würde, der ihn auf Spotify hört, würde sie dafür 3.179 Jahre brauchen. Und das berücksichtigt keine Flugreisen. Künstler würden sich langweilen, vielleicht sogar nachlässig werden, was zu einem geringeren Erlebnis für ihre Zuhörer führen würde.

Was hat das also mit der Webentwicklung zu tun? Jedes Mal, wenn Sie ein UI-Steuerelement erstellen, müssen Sie sicherstellen, dass es funktioniert, robust und zugänglich ist. Es wird Ihnen langweilig, wenn Sie jedes Mal die gleiche Benutzeroberfläche neu schreiben. Es passieren Fehler, die zu einer schlechteren Erfahrung für Ihre Endbenutzer führen.

Ein wenig über mich

Ich bin seit fast 10 Jahren Webentwickler und habe selbst Hunderte von Komponenten geschrieben, oft das gleiche UI-Muster viele Male. Ich habe Dutzende Komponentenbibliotheken verwendet und Admin-Dashboards, Komponentenbibliotheken, mobile Anwendungen, Blogs, Figma-Plugins, VSCode-Erweiterungen und mehr erstellt. Dieser Artikel wird eine Zusammenfassung dessen sein, wo ich die Rolle von Komponenten und Bibliotheken sehe und ob Entwickler ihre eigenen schreiben sollten.

Was ist eine Komponente?

Beim Erstellen von Benutzeroberflächen schreiben wir nicht jedes Mal das gesamte HTML-Markup von Grund auf neu. Wir schreiben unsere Benutzeroberflächen mithilfe von Komponenten – wiederverwendbaren Bausteinen, die gängige Benutzeroberflächenmuster kapseln. Wenn Sie eine Komponente schreiben, können Sie sie mehrmals in einem einzelnen Projekt oder sogar in unabhängigen Projekten verwenden.

Hier habe ich eine Gegenkomponente geschrieben, ich habe sie einmal geschrieben und an mehreren Stellen auf der Seite verwendet.

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

Wir Tutorial-Ersteller demonstrieren gerne Zähler, als ob sie aus der Mode kämen, aber eine reale Anwendung enthält Dutzende verschiedener UI-Muster, die als Komponenten geschrieben sind.

In diesem Artikel gruppiere ich CSS-Regeln, die den Stil für bestimmte UI-Muster bereitstellen, unter dem Dach der Komponenten. Die Definition kann unklar sein, je nachdem, wen Sie fragen.

Was ist eine Komponentenbibliothek?

Nicht alle Komponenten sind eigenständig. Es ist sinnvoll, viele Komponenten in einem einzigen Paket, einer sogenannten Komponentenbibliothek, zu gruppieren.

Wenn Sie möchten, dass Ihre Website ein bestimmtes Erscheinungsbild hat, können Sie eine Komponentenbibliothek verwenden. Es gibt Komponentenbibliotheken, die:

bieten Komponenten an, die einer Designspezifikation entsprechen.
bieten mehrere Lösungen für ein bestimmtes UI-Muster an.
Arbeiten Sie mit einer bestimmten Toolchain

Aber es gibt sie in verschiedenen Formen und Größen. Die Definition, die ich beim Definieren einer Komponentenbibliothek verwende, ist die folgende:

Eine Komponentenbibliothek ist ein Satz wiederverwendbarer Komponenten, die in ihrem Nutzen oder Erscheinungsbild (oder beidem) zusammenhängend sind. Eine großartige Komponentenbibliothek hilft Entwicklern, ihre UI-Anforderungen effizient zu erfüllen und bietet gleichzeitig ein beispielhaftes Erlebnis für den Endbenutzer.

Was ist der Unterschied zwischen einer Komponentenbibliothek und einem Designsystem?

Ich spreche später in diesem Artikel über Richtlinien und Designsysteme, daher nehme ich mir einen Moment Zeit, um sie klarzustellen. Es kann schwierig sein zu erkennen, wo das eine endet, das eine beginnt oder das andere das andere umfasst.

Designsysteme

Ich sehe ein Designsystem als eine Spezifikation dafür, wie Dinge aussehen, sich anfühlen und sich verhalten sollen. Ein Designsystem kann ein Produkt, eine Marke oder ein Unternehmen umfassen, um die Konsistenz aller Erlebnisbereiche sicherzustellen. Ein umfassendes Designsystem bestimmt alles von Schriftfamilien, Schriftgrößen, Abstandsgrößen, UI-Mustern und Kopierrichtlinien.

Einige der bekanntesten Designsysteme sind:

Materialdesign (Google)
Basisdesign (Uber)
Lightning Design System (Salesforce)

Während viele Designsysteme unternehmensspezifisch sind, gibt es Designsysteme wie Material Design, die Teams auf der ganzen Welt nutzen, um den Weg zur Entwicklung vertrauter Produkte zu verkürzen. Sie haben wahrscheinlich eine Handvoll Produkte verwendet, die die Prinzipien des Materialdesigns nutzen, aber sie sind sicherlich nicht frei von grundlegenden Problemen mit der Benutzerfreundlichkeit.

Komponentenbibliotheken

Komponentenbibliotheken können die Code-Implementierung eines Designsystems sein oder auch nicht. Wenn Sie für ein Unternehmen mit einem Designsystem arbeiten, ist es wahrscheinlich, dass die entsprechende Komponentenbibliothek (falls vorhanden) eng darin integriert ist.

Beispielsweise ist Material Web von Google eine Webkomponenten-Implementierung von Material Design. Base Web- und Lightning-Webkomponenten sind ebenfalls Open Source.

Eine kurze Geschichte der Komponentenbibliotheken

Das Konzept der UI-Komponenten (oder Widgets) gibt es schon seit langem. Wenn Sie die Retro-Benutzeroberflächen eines Museums sehen möchten, schnappen Sie sich etwas Popcorn und schauen Sie sich dieses mehr als zweistündige Video „aller Widgets“ von 1974 bis 1990 an.

Seit den frühen 2000er-Jahren wurden Komponentenbibliotheken entwickelt, um Entwicklern beim Erstellen für das Web zu helfen. Die damalige Webbrowser-Landschaft war von dem, was wir heute sehen, nicht wiederzuerkennen. Versionen des Internet Explorers wichen vollständig von der Spezifikation ab, was angesichts des riesigen Marktanteils, den der IE damals hatte, besonders problematisch war. Der Internet Explorer 6 war bekannt dafür, dass die Entwicklung mühsam war. Hauptsächlich aufgrund der falschen Implementierung des Box-Modells und der fehlenden CSS2-Unterstützung.

? Bis dahin unterstützte Internet Explorer einen „Mackenmodus“, der es Entwicklern ermöglichte, nicht standardmäßiges HTML und CSS zu schreiben, um ältere Browser zu besänftigen, die die Standards nicht unterstützten.

Glücklicherweise konnten viele dieser Probleme behoben werden, als ich ernsthaft mit der Webentwicklung begann. Zu diesem Zeitpunkt gab es noch eine Handvoll Bibliotheken, die das Schreiben komplexer Schnittstellen mit browserübergreifender Unterstützung etwas einfacher machten. jQuery UI, die erste Komponentenbibliothek, die ich verwendet habe, unterstützte Akkordeons und andere Widgets. Aber der Browser entwickelt sich ständig weiter, und wir verfügen jetzt über eine native Möglichkeit, dieses Akkordeonmuster mithilfe der Details- und Zusammenfassungselemente zu implementieren, die 2020 in allen Browsern verfügbar sind. Mit diesen Elementen können Sie bei der Erstellung interaktiver Akkordeons ohne JavaScript ziemlich weit kommen.

Im Vergleich zu 2009 wurden diese Elemente in keinem Browser implementiert. Es erforderte einiges an JS, um zu funktionieren. Werfen Sie einen Blick auf den Quellcode von jQuery UI v1.7 und drücken Sie STRG+F „Akkordeon“, wenn Sie sehen möchten, wie Webentwickler vor 15 Jahren Akkordeons implementiert haben.

Im Laufe der nächsten Jahrzehnte wuchsen die Möglichkeiten des Webs. Leistungsstärkere Geräte bedeuteten leistungsfähigere Browser. Leistungsstärkere Browser führten dazu, dass Webanwendungen anspruchsvoller wurden. Die Entwickler reagierten, indem sie die Tools entwickelten, die uns beim Erstellen dieser Anwendungen helfen, indem sie es uns ermöglichten, Benutzeroberflächen mithilfe von Bausteinen, also einem Komponentenmodell, zu erstellen. Wir sahen eine starke Verbreitung dieser komponentenbasierten Frameworks. Ich spreche von Angular, React und Vue. Jedes davon verfügt über ein eigenes reichhaltiges Ökosystem an Komponentenbibliotheken.

Es gibt ein berechtigtes Argument dafür, dass eine Überkorrektur stattgefunden hat und dass die Frontend-Landschaft jetzt mit Tools übersättigt ist, die für die Bedürfnisse der meisten Menschen zu leistungsfähig sind, aber darauf sollten wir nicht eingehen.

Diese Version ist um interaktive Snippets zum Originalbeitrag erweitert

Was macht eine gute Komponentenbibliothek aus?

Die Herausforderung beim Aufbau einer Komponentenbibliothek besteht darin, dass es sich nicht um eine Einzelhandlung handelt. Viele der beliebtesten Bibliotheken gibt es schon seit Jahren und es gab jede Menge Recherchen, Rückmeldungen zur Nutzung und Beiträge, um sie dorthin zu bringen, wo sie jetzt sind.

Ich habe festgestellt, dass eine gute Komponentenbibliothek häufig die folgenden Merkmale aufweist:

Es versteht die Probleme seiner Zielentwickler und löst diese gut
Es verfügt über eine großartige Dokumentation
Es sorgt für ein gutes Erlebnis für den Endbenutzer
Es ist robust und eignet sich für die entsprechenden Eingabemodi und Geräte.

Auf der anderen Seite kann man erkennen, ob eine Komponentenbibliothek nicht gut ist, wenn sie die Zugänglichkeit nicht berücksichtigt, über eine inkonsistente API verfügt, kaum oder gar keine Projektverantwortung hat oder nicht klare und konsistente Dokumentation.

Welche Vorteile bietet die Verwendung einer Komponentenbibliothek?

Wir wissen, wie eine gute Komponentenbibliothek aussieht. Schauen wir uns also an, wie Sie Ihr Leben und das Ihrer Benutzer ein wenig besser machen können.

Komponentenbibliotheken sparen Ihnen Zeit

Wenn Sie an einem Projekt mit einer engen Frist arbeiten, ist es wichtig, effizient zu sein. Effizienz sollte jedoch nicht auf Kosten der Schaffung eines robusten Web-Erlebnisses gehen. Durch die Verwendung einer Komponentenbibliothek verbringen Sie weniger Zeit damit, das Rad neu zu erfinden und können sich mehr auf die feineren Details konzentrieren.

Komponentenbibliotheken machen Sie und Ihre Benutzer glücklicher

Wir sind nicht durch repetitive Arbeit motiviert. Wir genießen technische Herausforderungen und das erneute Schreiben derselben Komponenten ist keine lustige Herausforderung. Wir haben bereits darüber gesprochen, was passiert, wenn wir uns langweilen und Fehler durchgehen lassen.

Wenn Sie eine Dialogkomponente von Grund auf implementieren möchten, müssen Sie Folgendes tun:

Fokus-Trapping richtig handhaben
Machen Sie den Rest der Seite inaktiv
Positionieren Sie den Dialog richtig
Stellen Sie sicher, dass es mit unterstützenden Technologien funktioniert

Es erfordert Arbeit, sich die oben genannten Punkte zu merken und umzusetzen, aber wenn Sie etwas falsch machen, kann Ihre Benutzeroberfläche buchstäblich unbrauchbar werden. Dies ist beispielsweise der Fall, wenn Sie den Fokus falsch handhaben.

Durch die Verwendung einer Komponentenbibliothek, die speziell für Endbenutzer erstellt wurde, können Sie das Risiko der Einführung fehlerhafter Erfahrungen verhindern und gleichzeitig weniger Zeit für die Neuerstellung derselben Komponenten aufwenden.

Komponentenbibliotheken führen zu konsistenten Erlebnissen

Wenn Sie für ein Unternehmen mit mehreren verschiedenen Webanwendungen arbeiten, befolgen diese im Allgemeinen eine Reihe von Richtlinien. Diese Richtlinien können die zu verwendende Farbpalette, die Größe Ihrer Typografie oder das Aussehen und Verhalten von UI-Elementen vorgeben.

Aber Sie erhöhen die Wahrscheinlichkeit, dass Ihre Bewerbung vom Styleguide abweicht, wenn Sie Komponenten neu schreiben. Mit einer Komponentenbibliothek können Sie die Benutzeroberfläche Ihrer Komponenten einfacher anhand der Markenrichtlinien überprüfen, damit sie überall gut aussehen, wo sie verwendet werden.

Uber verfügt über mehrere verschiedene Apps, die dieselben Elemente der Benutzeroberfläche verwenden. Ich bin mir fast sicher, dass sie in diesen Apps dieselbe Komponentenbibliothek verwenden. Auf diese Weise ist praktisch garantiert, dass jede neue App den Richtlinien der Marke entspricht.

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

Welche Nachteile hat die Verwendung einer Komponentenbibliothek eines Drittanbieters?

Die oben genannten Vorteile gelten unabhängig davon, ob Sie Ihre eigene Komponentenbibliothek oder die eines Drittanbieters verwenden. Wenn Sie oder Ihr Team entschieden haben, dass sie keine Bibliothek aufbauen und sich stattdessen auf einen Drittanbieter verlassen möchten, sollten Sie Folgendes in Betracht ziehen.

Lieferantenbindung

Mit der Auswahl einer Komponentenbibliothek entscheiden Sie sich für einen Partner, der großen Einfluss darauf hat, wie Sie Ihren Frontend-Code schreiben und wie Ihre Schnittstellen aussehen und sich verhalten.

Ersteres wird große Auswirkungen auf Sie haben, und letzteres wird große Auswirkungen auf Ihre Endbenutzer haben. Durch die Verwendung einer Komponentenbibliothek sind Sie an die Standards dieser Komponentenbibliothek gebunden.

Die Bibliothek könnte in einer Hauptversion massive bahnbrechende Änderungen einführen, die spezielle Entwicklungszeit und viele Tests erfordern könnten, um sicherzustellen, dass keine schwerwiegenden Rückschritte eingeführt werden.

Vor ein paar Jahren habe ich React Admin verwendet, um ein komplexes Admin-Dashboard für eine interne Abteilung zu erstellen. Die Bibliothek bot eine Reihe von Komponenten, die speziell für das Abrufen und Anzeigen komplexer Daten bestimmt sind. Da unsere Anwendung damals stark auf React Admin angewiesen war, war das Upgrade zwischen Hauptversionen eine Herausforderung, insbesondere da viele der von React Admin verwendeten internen Tools gegen andere ausgetauscht worden waren. Die Änderungsoberfläche war riesig und wir haben viel Zeit damit verbracht, die von uns entdeckten Probleme zu aktualisieren und zu kennzeichnen.

Ich glaube nicht, dass uns der Aufbau einer eigenen Lösung auf lange Sicht Zeit gespart hätte, aber diese Art der Anbieterbindung ist eine Überlegung wert, insbesondere bevor wir uns für ein Tool entscheiden.

Code aufgebläht

So schockierend es auch ist, Bibliotheken mit vielen Komponenten neigen dazu, mit viel Code geschrieben zu werden. Code, den Sie bei der Installation von Abhängigkeiten herunterladen, und Code, den Sie an Ihre Endbenutzer senden.

Moderne Tools erleichtern die Durchführung von Bundle-Optimierungen wie Tree-Shaking, um nicht verwendeten Code zu entfernen. Es gibt jedoch keine Garantie dafür, dass Sie den gesamten Code entfernen, den Ihre Benutzer nicht benötigen.

Wenn Sie sich nicht eingehend mit den Bibliotheken befassen, die Sie verwenden, sind Ihnen möglicherweise nicht alle einzelnen Pakete bewusst, die sie importieren. Am Ende könnten Hunderte unnötiger Abhängigkeiten entstehen. Die Leute in der e18e-Community haben hart daran gearbeitet, dieses Problem ans Licht zu bringen und es gleichzeitig zu beheben.

Viele dieser Probleme lassen sich auch auf das Rollieren einer eigenen Komponentenbibliothek zurückführen. Der größte Unterschied besteht darin, dass Sie die Kontrolle über Ihre Komponentenbibliothek haben. Sie können definieren, wie es Ihre spezifischen Probleme löst, und Sie haben die Kontrolle über die Verbesserung seiner Mängel.

Die verschiedenen Formen, die eine Komponentenbibliothek annehmen kann

Der ursprüngliche Vorschlag für das World Wide Web war ein Instrument zur Verbesserung der Kommunikation zwischen Forschern am CERN. Der Vorschlag skizzierte, wie Dokumente mithilfe von Hypertext gemeinsam genutzt und miteinander verknüpft werden könnten. Dies ist der grundlegende Eckpfeiler des Webs, und wir verwenden immer noch das bescheidene Tag zur Verknüpfung mit anderen HTML-Dokumenten im gesamten Web.

Aber das Web hat in den letzten Jahrzehnten an Umfang zugenommen, und die Browser, mit denen wir im Web navigieren, sind zu ganz eigenen Monstern geworden. Die heutigen Browser können leistungsstarke Formen des kreativen Ausdrucks und die Ausführung nativer Software ermöglichen.

Es gibt Hunderte verschiedener Lösungen, einige für allgemeine Zwecke, andere für Hyper-Nischen, aber um das richtige Tool für Ihr nächstes Projekt zu finden, ist ein komplexer Entscheidungsprozess erforderlich, der so aussehen könnte.

Dies ist keine umfassende Liste ALLER Anwendungsfälle oder Komponentenbibliothekstypen, aber sie veranschaulicht, wie sich Komponentenbibliotheken in Bezug auf Folgendes unterscheiden:

die beteiligten Technologien.
die Abstraktionsebenen, die sie bieten.
die Probleme, die sie lösen.

Werfen wir einen Blick auf einige der gängigsten Komponentenbibliothekstypen

? Eine kurze Randbemerkung: Wenn Sie daran interessiert sind, Ihre eigene Webkomponentenbibliothek zu erstellen, sollten Sie sich meinen Kurs Component Odyssey ansehen. Sie erfahren, wie Sie eine Komponentenbibliothek erstellen und veröffentlichen, die in jedem Frontend-Framework funktioniert.

Bibliotheken für Dienstprogrammklassen / CSS-Styleguides

Für mich ist Bootstrap das erste, was mir in den Sinn kommt. Wenn Sie Ihrer Website früher einen schnellen Anstrich verpassen wollten, ließen Sie den CDN-Link zur Bootstrap-CSS-Datei fallen und erhielten sofort den Bootstrap-Look. Es war Mitte der 2010er Jahre überall.

Der technische Umfang dieser Art von Werkzeugen reicht von

Eine einzelne CSS-Datei (Pico)

Eine Toolchain zum Generieren von CSS-Klassen basierend auf Ihrer Konfiguration (Tailwind)

Dutzende anderer Tools, wie Open Props, passen irgendwo dazwischen.

Standard-Komponentenbibliotheken

Wenn Sie eine interaktive Webanwendung erstellen, möchten Sie möglicherweise einfach eine Reihe von Komponenten erwerben, die gut aussehen und gut funktionieren. Es gibt viele dieser handelsüblichen Komponentenbibliotheken, die Ihnen alles bieten, was Sie brauchen, und noch mehr.

Unabhängig davon, mit welchem Framework Sie Ihre App schreiben, gibt es wahrscheinlich eine Reihe großartig aussehender Komponenten, die Sie verwenden können.

Eine weitere großartige Komponentenbibliothek ist Shoelace, die Dutzende vollständig interaktiver und vollständig gestalteter Komponenten bereitstellt.

Was Bibliotheken wie Shoelace besonders interessant macht, ist, dass sie mit Webkomponenten erstellt werden, der im Browser integrierten Methode zum Schreiben von Komponenten. Wenn Sie Ihre Benutzeroberflächen mit Tools wie Shoelace erstellen, haben Sie den zusätzlichen Vorteil, dass Sie sie in verschiedenen Frontend-Frameworks verwenden können. Darüber habe ich in der Vergangenheit schon ein wenig gesprochen.

Hier ist die gleiche Shoelace-Komponente, die in Vue und React verwendet wird.

Ungestylte Komponenten

Abhängig von den Spezifikationen Ihres Projekts haben Sie möglicherweise nicht den Luxus, ein handelsübliches Werkzeug zu verwenden. Ihre Designspezifikationen könnten sehr spezifisch sein.

Ich habe gesehen, wie Teams beim ersten Anzeichen von Reibung Komponenten weggeworfen haben. Und in einem Fall führte ein manuell erstellter Datenwähler zu einer deutlich schlechteren Benutzererfahrung. Rückblickend hätte die Verwendung einer unformatierten Komponentenbibliothek dem Team Flexibilität beim Erscheinungsbild gegeben und gleichzeitig die Zeit sichergestellt

Deshalb können Sie nach einer Bibliothek greifen, die völlig ungestylte Komponenten mit flexiblen Styling-Hooks bietet. Wenn es sich um eine gute Bibliothek handelt, kümmert sie sich auch um all diese komplexen Interaktionen. Es ist das Beste aus beiden Welten.

Es ist leicht, ein Kontrollkästchen zu vermasseln, wenn Sie über die vom Browser bereitgestellten Styling-Hooks hinausgehen möchten, es sei denn, Sie testen mit einer breiten Palette von Geräten und Eingabemodi.

Der Originalartikel enthält ein Video, das zeigt, wie ich mit einem Screenreader mit verschiedenen Kontrollkästchenimplementierungen interagiere

Radix ist ein beliebtes Beispiel für eine Bibliothek, die jedoch mit React erstellt wurde.

Andere Beispiele für Komponentenbibliotheken wie diese sind Lion und HeadlessUI.

Kopieren Sie einfügbare Komponentenbibliotheken

Einige Entwickler möchten möglicherweise das Beste aus beiden Welten. Sie möchten möglicherweise eine Komponente, die von einer vertrauenswürdigen Bibliothek eines Drittanbieters erstellt wurde, und gleichzeitig die volle Kontrolle über Markup, Stile und Funktionalität haben. Bibliotheken wie ShadCN ermöglichen diese Art von Arbeitsablauf, indem sie es Entwicklern ermöglichen, die Komponentendefinition zu kopieren und in ihre eigenen Projekte einzufügen, sodass sie praktisch Eigentümer der Komponente sind.

Warum gibt es nicht eine Komponentenbibliothek, die sie alle beherrscht?

An diesem Punkt ist wahrscheinlich klar, warum es keine solche Einzelkomponentenbibliothek gibt. Wir haben einen nicht erschöpfenden Blick auf verschiedene Gruppen von Komponentenbibliotheken geworfen.

Es gibt jedoch eine Bewegung zur Einführung eines „Global Design System“, ein Konzept, das von Brad Frost angeführt wurde.

In der Ankündigung erläutert Brad, dass sich in den Hunderten von Projekten, an denen er beteiligt war, viele der UI-Steuerelemente in diesen verschiedenen Projekten ähnlich verhalten (oder sich verhalten sollten), Entwickler jedoch in jedem einzelnen Projekt dasselbe neu implementieren. Dies hat zu viel Zeit- und Arbeitsverschwendung sowie zu Inkonsistenzen zwischen den Projekten geführt. Dies erstreckt sich auch auf die vorhandenen Komponentenbibliotheken. Sie werden sehen, dass sich das Tastaturverhalten für eine Combobox in React Aria von dem der Combobox in ShadCN unterscheidet.

Der Originalartikel enthält ein Video, das zeigt, wie ich mit verschiedenen Combobox-Implementierungen über eine Tastatur interagiere

Brad Frost schlägt ein Global Design System als eine Reihe von Webkomponenten vor, die von fast jedem Frontend-Projekt übernommen werden können, um eine grundlegende Funktionalität für die Steuerelemente sicherzustellen, die noch nicht in HTML verfügbar sind.

Im Rahmen der Open UI laufen Diskussionen darüber, wie dies in den nächsten Jahren Gestalt annehmen könnte.

Sollten Sie Ihre eigene Komponentenbibliothek erstellen?

Dieser Artikel befasst sich umfassend mit Komponentenbibliotheken, und bei all dem Kontext werden Sie sich beim Betrachten der leeren HTML-Seite für Ihr nächstes großes Projekt unweigerlich fragen, ob Sie Ihre eigene Komponentenbibliothek erstellen oder eine verwenden sollen bestehendes.

Mein erster Gedanke ist: Ich denke nicht, dass Sie Ihre Bibliothek aufbauen sollten.

Im Allgemeinen bevorzuge ich die Auswahl einer kampferprobten Bibliothek. Besonders eines, das Folgendes hat:

Wurde in Tausenden von Projekten verwendet
Eine starke Community, in Discord oder GitHub
Tolle Dokumentation
Ein starker Fokus auf Barrierefreiheit
Arbeitete mit den Stärken des gewählten Frameworks

Das Wichtigste dabei ist, dass bei der Verwendung einer Komponentenbibliothek darauf geachtet wird, zugängliche Komponenten zu erstellen.

Nehmen Sie zum Beispiel eine Combobox. Es ist eine Sucheingabe und ein Auswahlmenü in einem. Wenn Sie Ihr eigenes Gerät gebaut haben, sieht es vielleicht gut aus und funktioniert mit Ihrer Maus. Aber Sie müssen auch Folgendes berücksichtigen:

Browserübergreifende Unterstützung
Tab- und Fokusverhalten
Screenreader-Unterstützung
Behandeln Sie Zustände für das asynchrone Laden von Suchergebnissen

Konnor Rogers, der hervorragende Arbeit im Bereich Web + Webkomponenten leistet, hat unzählige Frustrationen über seine Erfahrungen beim Aufbau einer barrierefreien Combobox geteilt. Hier ist ein solcher Tweet, den er geteilt hat.

Die Unterstützung von Screenreadern ist besonders komplex und verdient eine eigene Aufzählung. Um Screenreader zu unterstützen, müssen Sie außerdem Folgendes verwalten:

Live-Regionen
interaktive Steuerung
ausgewählte Artikel
Unterstützung zwischen verschiedenen Bildschirmleseprogrammen

Nebenbei bemerkt, ich habe nur Zugriff auf Voiceover, was bedeutet, dass es für mich schwierig ist, diese komplexen UI-Muster mit verschiedenen Screenreadern zu testen. Wie bei Browsern gibt es auch bei Screenreadern Unterschiede. In diesem Artikel „Are We Live?“ beschreibt Scott O’Hara, wie unterschiedlich die Behandlung der lebenden Regionen ist.

Das bedeutet, dass es auch Ihnen als Entwickler obliegt, eine Komponentenbibliothek auszuwählen, der Sie vertrauen können und die unter Berücksichtigung der Barrierefreiheit entwickelt wurde. Aus diesem Grund ist es auch wichtig, eine Komponentenbibliothek auszuwählen, die über eine starke Community verfügt. Es ist wichtig, Folgendes zu können:

Sehen Sie sich die Fehler und Probleme an, die andere für eine bestimmte Bibliothek gemeldet haben
Verbesserungen und Änderungen an einer solchen Bibliothek vorschlagen (oder sogar dazu beitragen)
Besprechen Sie Ideen mit Mitgliedern der Community und bauen Sie Arbeitsbeziehungen mit aktiven Mitgliedern der Community oder sogar den Betreuern selbst auf

Schließlich und nicht zuletzt berücksichtigt eine großartige Komponentenbibliothek weit mehr als nur die Ästhetik ihrer Komponenten. Bei einer Komponentenbibliothek, die für das Web entwickelt wurde, sollten Sie Folgendes versuchen:

Halten Sie sich an die Web Content Accessibility Guidelines (WCAG).
Stellen Sie sicher, dass die Komponenten über verschiedene Eingabemodalitäten hinweg funktionieren (Touch, Tastatur, Bildschirmlesegerät)
Stellen Sie sicher, dass die Komponenten für Menschen mit zusätzlichen Anforderungen geeignet sind, z. B. für Menschen mit Gleichgewichtsstörungen, Sehbehinderungen oder einer gebrochenen Hand.

Der Aufbau einer eigenen Komponentenbibliothek kann tatsächlich eine gute Sache sein

Wenn ich Sie nicht davon abgeschreckt habe, eine Komponentenbibliothek zu erstellen, dann möchte ich mir selbst widersprechen und erklären, warum es wirklich gut sein kann, eine eigene Komponentenbibliothek zu erstellen.

Wenn Sie sich die Zeit nehmen, Sorgfalt und Aufmerksamkeit in den Aufbau einer Komponentenbibliothek zu stecken, werden Sie einen Entwickler finden, der die Browserplattform, Best Practices für Barrierefreiheit, Testpraktiken und mehr besser versteht.

Aber das ist noch nicht alles, es gibt einige gute Gründe, eine eigene Bibliothek aufzubauen.

Für den Anfang können Sie etwas erstellen, das auf Ihre Bedürfnisse zugeschnitten ist, und so die Aufblähung vermeiden, die durch eine handelsübliche Komponentenbibliothek entstehen könnte. Es liegt an Ihnen und Ihrem Team, Ihre Endbenutzer zu verstehen, und Sie können etwas speziell für sie entwickeln.

Sie haben auch die Möglichkeit, mit neuartigen Ansätzen zu experimentieren. Wenn Sie ein Hyper-Nischenproblem haben, gibt es möglicherweise keine Komponentenbibliothek, die dieses Problem löst. Es könnte sich um eine Komponentenbibliothek handeln, die:

Visualisiert Daten auf spezifische Weise
Hat eine eindeutige und einzigartige visuelle Identität
Basiert auf einem neuen Framework

Das gibt Ihnen die Möglichkeit, etwas zu bauen, das auf Ihre Bedürfnisse zugeschnitten ist. Sie haben dann die Möglichkeit, Dinge zu ändern und zu reparieren, wenn sich Ihre Bedürfnisse ändern oder wenn Sie den Problembereich besser verstehen.

Wichtig ist, dass Sie dadurch mehr über das Web erfahren. Wenn Sie zum ersten Mal eine Komponentenbibliothek erstellen, kann dies eine Gelegenheit sein, tiefer in die Spezifikationen des HTML-Browsers einzutauchen oder Ihr Wissen über Barrierefreiheit im Internet aufzufrischen. Dadurch verbessern Sie Ihre Fähigkeiten als Webentwickler, was Ihnen in Zukunft bei jedem Frontend-Projekt gute Dienste leisten wird. Es könnte Ihnen sogar dabei helfen, Ihren nächsten Job zu finden.

Ob Sie also eine Komponentenbibliothek erstellen sollten, hängt von Ihren Endzielen ab. Betrachten Sie Fragen wie:

Möchte ich den Browser besser verstehen?
Möchte ich schnell etwas bauen?
Möchte ich es für möglichst viele Benutzer nutzbar machen?
Gibt es Bibliotheken, die mein aktuelles Problem lösen?

Je nachdem, wie Ihre Antworten ausfallen, können Sie die richtige Entscheidung für Ihr Projekt treffen.

Danke fürs Lesen! Wenn Sie daran interessiert sind, Ihre eigene Webkomponentenbibliothek zu erstellen, sollten Sie sich meinen Kurs Component Odyssey ansehen. Sie erfahren, wie Sie eine Komponentenbibliothek erstellen und veröffentlichen, die in jedem Frontend-Framework funktioniert.

Das obige ist der detaillierte Inhalt vonWas ist eine Komponentenbibliothek und sollten Sie eine eigene erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Allgemeine Codierungsstandards JavaScript.Nächster Artikel：Allgemeine Codierungsstandards JavaScript.

In Verbindung stehende Artikel

Mehr sehen