Ich bin ein Fan der Komponentisierung des Webs. Ich halte es für eine sehr gute Methode, um eine Website in nahezu jeder Größenordnung zu erstellen (außer vielleicht für die absolut grundlegendsten). Es gibt viele Meinungen darüber, was eine gute Komponente ausmacht, aber sagen wir, wir beschränken uns im Moment auf Drittanbieter-Komponenten. Das heißt, Komponenten, die man einfach *benutzt*, im Gegensatz zu Komponenten, die man selbst als Teil des einzigartigen Setups seiner Website erstellt.
Was macht eine Drittanbieter-Komponente gut? Mein liebstes Attribut einer Drittanbieter-Komponente ist, wenn sie etwas Schwieriges nimmt und es einfach macht. Insbesondere Dinge, die Nuancen erkennen und richtig handhaben, oder Dinge, über die man vielleicht nicht einmal *genug weiß*, um sie richtig zu machen.
Vielleicht verwenden Sie eine Komponente, die kontextbezogene Pop-up-Menüs für Sie erstellt. Sie führt möglicherweise Browser-Rand-Erkennung durch, z. B. um sicherzustellen, dass das Menü nie abgeschnitten oder außerhalb des Bildschirms erscheint. Das ist ein kniffliges kleines Stück Programmierung, das man möglicherweise nicht richtig hinbekommt, wenn man es selbst macht – oder es sogar vergisst zu tun.
Ich denke an die <Link /> Komponente, die React Router hat oder die auf Gatsby-Websites verwendet wird. Sie fügt automatisch aria-current="page" für Sie zu den Links hinzu, wenn Sie sich auf dieser Seite befinden. Sie können und sollten das wahrscheinlich für einen Styling-Hook verwenden! Und Sie hätten das wahrscheinlich vergessen zu programmieren, wenn Sie Ihre eigenen Links verwalten würden.
In diesem Sinne haben Reach UI Tabs eine strenge Barrierefreiheit integriert, die Sie wahrscheinlich nicht richtig hinbekommen würden, wenn Sie sie von Hand erstellen würden. Diese React-Bildkomponente erledigt allerlei Dinge, die mit Bildern relativ schwierig zu realisieren sind, wie die komplexe Syntax für reaktionsschnelle Bilder, Lazy Loading, Platzhalter usw. Das ist in gewisser Weise, dass man Ihnen Best Practices "kostenlos" anbietet.
Hier ist eine Tabellenbibliothek, die sich nicht einmal um die Benutzeroberfläche kümmert, sondern sich stattdessen auf andere Bedürfnisse konzentriert, die Sie wahrscheinlich bei Tabellen haben, was ein weiterer faszinierender Ansatz ist.
Jedenfalls! Hier ist, was Sie alle gesagt haben, als ich danach gefragt habe. Was macht eine Drittanbieter-Komponente großartig? Was machen die besten davon? (abgesehen vom Offensichtlichen, wie gute Dokumentation und gute Barrierefreiheit)? Einige davon mögen sich widersprechen. Ich liste nur auf, was die Leute gesagt haben, dass sie es mögen.
- Plug-and-play. Es sollte mit minimaler Konfiguration "einfach funktionieren".
- Viele bearbeitbare Demos
- Hochgradig konfigurierbar
- „White-Label“-Styling. Bringen Sie keine zu starken Designentscheidungen mit.
- Gestaltet über normales CSS, damit Sie Ihre eigenen Styling-Tools mitbringen können (BYO)
- Schnell
- Klein
- Ist über einen Paketmanager installierbar
- Kann manuell instanziiert werden
- Kann einen DOM-Knoten erhalten, an dem es platziert werden kann
- Folgt einem nützlichen Versionsschema
- Wird gewartet, insbesondere im Hinblick auf die Sicherheit
- Hat eine öffentliche Roadmap
- Ist Framework-agnostisch
- Hat keine anderen Abhängigkeiten
- Verwendet intuitive Namenskonventionen
- Unterstützt Internationalisierung
- Hat viele Tests
Gibt es etwas, das Sie dieser Liste hinzufügen würden?
Die erste große Website, die ich gebaut habe, wurde komplett in ASP Perl mit handgeschriebenen Modulen und Funktionen für Verbindungen zu SQL Server, Formular- und Tabellengenerierung, Abfragen, Validierung und Bereinigung, Logins… dem Ganzen erstellt! Der einzige Editor, der Code-Checkouts aus der Ferne durchführte, war Microsoft FrontPage! Es hatte Hunderte von Seiten und Dutzende von Formularen. Und etwa 40 interne Autoren von Hawaii bis Polen. Und vielleicht 300 Benutzerkonten.
Alles lief auf Microsoft Developer Network Betas.
Es mag die einzige ASP-Perl-Site gewesen sein, die jemals geschrieben wurde. Sie war mit ziemlicher Sicherheit die größte.
Wenn etwas schiefging, gab es nur einen Menschen auf der Welt, der es beheben konnte. Jeder Benutzer hatte meine Telefonnummer. Also habe ich über zwei Jahre lang im Grunde nicht ohne Unterbrechung geschlafen.
Deshalb war ich ziemlich glücklich, zuerst Drupal und dann WordPress zu entdecken. Weil jemand anderes den Kern und die Komponenten pflegte.
Das ist also ein langer, langer Weg, um zu sagen, dass das wichtigste Kriterium für eine Komponente für mich bis heute ist: Wie groß ist die installierte Basis? #2 ist: Wie aktiv wird sie entwickelt? #3 ist: Gibt es einen Drop-in-Ersatz? #4: Kann ich ein kleines Update oder ein verteilbares Bugfix-Update synchronisieren, ohne neu installieren oder neu konfigurieren zu müssen?
In den letzten 10-15 Jahren, seit ich diese Fragen annehme, wurde ich vielleicht dreimal mitten in der Nacht gerufen. Wenn eine Komponente ausfällt, bevor ich oder einer der etwa 100 Kunden, für die ich Websites pflege, hier in den Staaten aufwacht, ist die Wahrscheinlichkeit sehr hoch, dass sie gemeldet und behoben wurde. Alles, was ich tun muss, ist, meine nächtlichen Backups zu überprüfen und Updates durchzuführen.
Also, kurz gesagt, wenn es 1.000 oder vorzugsweise 10.000+ installierte Instanzen gibt und einen aktiven Entwickler, werde ich eine Komponente verwenden. Andernfalls berechne ich extra.
Es gibt viele Leute, die es lieben, am Puls der Zeit zu reiten. Nachdem ich in ihren Schuhen gesteckt habe, bewundere, respektiere und schätze ich sie. Und danke ihnen wiederholt für das Crowdsourcing des Prüfprozesses. Aber ich möchte das nicht noch einmal tun.
Ich schätze es immer, wenn Drittanbieter-Komponentenstile eine Sass-Datei mit einigen Variablen enthalten, die ich überschreiben kann, um sie besser in ein Design einzupassen.
Wenn Sie über das React-Ökosystem sprechen, ist dies von Tag zu Tag unwahrscheinlicher. React fördert CSS-in-JS, und jetzt verwenden die meisten React-Drittanbieter-Pakete, die wir verwenden, standardmäßig dies und haben eine eingeschränkte oder fehlerhafte klassenbasierte reguläre CSS-Formatierung.
Ich weiß, dass jeder unangenehm wird, wenn man einem Framework etwas vorwirft, aber in diesem Fall denke ich, es ist ziemlich klar, dass dieses Problem bei Vue-Paketen nicht annähernd so verbreitet ist, weil Vue Tools fördert und bereitstellt, um das Schreiben von regulärem CSS zu erleichtern.
Je mehr Drittanbieter-Pakete ich verwende, desto mehr neige ich dazu, sie selbst zu entwickeln und die Zeit zu investieren, sie richtig zu machen. Barrierefreiheit kann man lernen und selbst implementieren, und man muss sich nicht mit der ganzen UX-Schludrigkeit und den nie behobenen Fehlern herumschlagen, die man bei Drittanbieter-Paketen bekommt. Sehr wenige Pakete erfüllen tatsächlich alle hier aufgeführten Kriterien.