BROADCASTS.com

Mit Fabian Friedl, DesignOps Team Lead bei Dynatrace, sprechen Vanessa, Hans und\nStefan \xfcber Komponentenbibliotheken und Design Systeme.\n\n\nSCHAUNOTIZEN\n\n[00:00:00] KOMPONENTENBIBLIOTHEKEN UND DESIGN SYSTEME\n\nBevor ins Detail eingestiegen wird, erkl\xe4rt Fabian erst einmal was eine\nKomponentenbibliothek \xfcberhaupt ist. Ein Hauptziel von Komponentenbibliotheken\nist es, Konsistenz zwischen mehreren Applikation herzustellen. Dar\xfcberhinaus\nk\xf6nnen sie allerdings auch Mehraufwand deutlich minimieren. So muss\nbeispielsweise bei einem Redesign oder bei einer Erweiterung nicht jedes\nFeatureteam die \xc4nderung umsetzen. Stattdessen kommen \xc4nderungen vom Team der\nKomponentenbibliothek. Die Basis von Komponentenbibliotheken sind Design\nSysteme. Als i-T\xfcpfelchen k\xf6nnen Designer:innen und Entwickler:innen Design\nTokens verwenden. Design Tokens geben atomic Styles an, die f\xfcr verschiedene\nPlattformen, wie iOS, Android oder als Custom Properties f\xfcr Web, exportiert\nwerden k\xf6nnen. Selbstverst\xe4ndlich kann es auch Nachteile geben. Doch diese\nlassen sich durch Organisation umgehen. Fabians Team arbeitet eng mit dem\nDesignteam zusammen, eigentlich sind sie eher ein Team. Es gibt w\xf6chentliche\nDesignreviews, die f\xfcr einen fr\xfchen Austausch sorgen. Eine wichtige Frage, die\nsich dann beim Entwickeln stellt ist: Wer ist der Konsument? Ist es ein\nkomplettes Open Source Projekt, wie viele Feature Teams greifen auf die\nBibliothek zu? Unabh\xe4ngig davon, jeder Konsument der Bibliothek wird eine gute\nDokumentation ben\xf6tigen. Noch besser sind sogar Copy & Paste Snippets zum\nAusprobieren. Je besser die Dokumentation ist, desto mehr erspart man sich\nNachrichten \xfcber Chatsysteme mit immer den gleiche Fragen. Weiteres Material in\nden Links\n\n\nLINKS\n\nANGULAR CDK\n\nStilfreier Grundbaukasten f\xfcr barrierefreie Angular Komponenten\n\nCALENDER KIT\n\nSchon mal ein Kalender-Widget gebaut? Hier gibt\u2019s kopflose Unterst\xfctzung.\n\nREACT-ARIA\n\nReact Hooks von Adobe zur Erstellung barrierefreier Komponenten. Sehr\nqualitativ!\n\nHEADLESS UI\n\nHeadless Components von den Tailwind Machern in React und Vue\n\nREACH\n\nStilfreie, barrierefreie React Komponenten\n\nPOLARIS\n\nDas Shopify Design System\n\nBARISTA\n\nDas Dynatrace Design System\n\nLEARNINGS FROM BUILDING A COMPONENT LIBRARY\n\nFabians Vortrag auf der NG-DE