Revision 477: Komponentenbibliotheken und Design Systeme

Mit Fabian Friedl, DesignOps Team Lead bei Dynatrace, sprechen Vanessa, Hans und Stefan über Komponentenbibliotheken und Design Systeme.

Schaunotizen

[00:00:00] Komponentenbibliotheken und Design Systeme
Bevor ins Detail eingestiegen wird, erklärt Fabian erst einmal was eine Komponentenbibliothek überhaupt ist. Ein Hauptziel von Komponentenbibliotheken ist es, Konsistenz zwischen mehreren Applikation herzustellen. Darüberhinaus können sie allerdings auch Mehraufwand deutlich minimieren. So muss beispielsweise bei einem Redesign oder bei einer Erweiterung nicht jedes Featureteam die Änderung umsetzen. Stattdessen kommen Änderungen vom Team der Komponentenbibliothek. Die Basis von Komponentenbibliotheken sind Design Systeme. Als i-Tüpfelchen können Designer:innen und Entwickler:innen Design Tokens verwenden. Design Tokens geben atomic Styles an, die für verschiedene Plattformen, wie iOS, Android oder als Custom Properties für Web, exportiert werden können. Selbstverständlich kann es auch Nachteile geben. Doch diese lassen sich durch Organisation umgehen. Fabians Team arbeitet eng mit dem Designteam zusammen, eigentlich sind sie eher ein Team. Es gibt wöchentliche Designreviews, die für einen frühen Austausch sorgen. Eine wichtige Frage, die sich dann beim Entwickeln stellt ist: Wer ist der Konsument? Ist es ein komplettes Open Source Projekt, wie viele Feature Teams greifen auf die Bibliothek zu? Unabhängig davon, jeder Konsument der Bibliothek wird eine gute Dokumentation benötigen. Noch besser sind sogar Copy & Paste Snippets zum Ausprobieren. Je besser die Dokumentation ist, desto mehr erspart man sich Nachrichten über Chatsysteme mit immer den gleiche Fragen. Weiteres Material in den Links

Links

Angular CDK
Stilfreier Grundbaukasten für barrierefreie Angular Komponenten
Calender Kit
Schon mal ein Kalender-Widget gebaut? Hier gibt’s kopflose Unterstützung.
React-aria
React Hooks von Adobe zur Erstellung barrierefreier Komponenten. Sehr qualitativ!
Headless UI
Headless Components von den Tailwind Machern in React und Vue
Reach
Stilfreie, barrierefreie React Komponenten
Polaris
Das Shopify Design System
Barista
Das Dynatrace Design System
Learnings from building a component Library
Fabians Vortrag auf der NG-DE