Awesome Standalone (Web Components)

In seinem letzten An Event Apart-Vortrag wies Dave darauf hin, dass Web Components erst jetzt wirklich eine praktische Wahl für die Produktion im Web-Development werden. Zum Beispiel ist es erst etwa ein Jahr her, dass Edge auf Chromium umgestellt wurde. Davor unterstützte Edge keine Web Component-Features. Wenn man sie schon vor langer Zeit ausgeliefert hat, dann mit ziemlich großen Polyfills oder im Stil von Progressive Enhancement, wobei sie, wenn sie fehlschlugen, dies graceful oder in einer kontrollierten Umgebung taten, z. B. in einem Intranet, in dem jeder denselben Computer hat (oder in etwas wie Electron).

Meiner Meinung nach haben Web Components noch einen Weg vor sich, um für die meisten Entwickler überzeugend zu sein, aber sie nähern sich ihm an. Eine Sache, die ihrer Verbreitung Vorschub leisten wird, ist die unglaublich einfache DX vorgefertigter Komponenten, teilweise dank ES-Modulen und der einfachen Möglichkeit, JavaScript zu importieren.

Ich habe das schon einmal erwähnt: Sehen Sie, wie lächerlich einfach es ist, den Emoji-Picker von Nolan Lawson zu verwenden

Das sind eine Zeile JavaScript und eine Zeile HTML, um es zum Laufen zu bringen, und noch eine Zeile JavaScript, um es zu verdrahten und eine JSON-Antwort einer Auswahl zurückzugeben.

Überzeugend, in der Tat. DX, könnte man es nennen.

Web Components wie diese sind nicht allein, daher der Titel dieses Beitrags. Dave hat eine Liste von Awesome Standalones zusammengestellt. Das heißt, Web Components, die nicht Teil eines größeren, komplexeren Systems sind¹, sondern nur kleine, einfach einzufügende Gadgets, die für sich allein nützlich sind, genau wie der Emoji-Picker. Daves Repository listet etwa 20 davon auf.

Nehmen Sie dieses von GitHub (dem Unternehmen), eine Web Component zum Kopieren in die Zwischenablage

Ziemlich schick für etwas, das mit ~3KB über das Netz kommt. Die Produktionsgeschichte ist, was immer Sie daraus machen wollen. Nutzen Sie es vom CDN. Bündeln Sie es mit Ihrem Zeug. Lassen Sie es als On-Demand-Einzelstück. Was auch immer. Es ist verdammt einfach zu benutzen. Im Falle dieses Standalones gibt es nicht einmal Shadow DOM zu verarbeiten.

Keine Abneigung gegen Shadow DOM, das ist vielleicht das nützlichste Feature von Web Components (und kann nicht durch eine Bibliothek nachgebildet werden, da es sich um ein natives Browserfeature handelt), aber die Optionen zum Stylen sind nicht meine Favoriten. Und wenn man drei verschiedene Standalone-Komponenten mit drei verschiedenen Meinungen zur Gestaltung über das Shadow DOM verwenden würde, würde das nervig werden.

Ich stelle mir vor, dass Entwickler sich mit so etwas vertraut machen, die Vorteile erkennen und immer mehr davon in ihre Projekte integrieren und sogar eigene erstellen. Der Aufbau eines Designsystems aus Web Components scheint mir ein wirklich guter Ansatz zu sein, wie es viele große Namen² bereits tun.

Der Traum ist, dass die Leute gemeinsame UI-Muster tatsächlich konsolidieren. Selbst wenn wir nie native HTML-"Tabs" bekommen, ist es möglich, dass eine Web Component sie bereitstellen könnte, die UI, UX und Barrierefreiheit perfekt umsetzt, aber sie so gestaltbar lässt, dass sie buchstäblich jede Website verwenden könnte. Aber zuerst muss es existieren.

---

1. Das ist auch eine coole Art, Web Components zu nutzen, aber Einfachheit erregt Aufmerksamkeit, und das ist wichtig. ⮑
2. Leute erwähnen immer das Lightning Design System als ein Web-Components-basiertes Designsystem, aber ich sehe es nicht. Zum Beispiel sieht dieses Akkordeon eher wie semantisches HTML mit Klassennamen aus, nicht wie Web Components. Was übersehe ich? ⮑