Warum wir Storybook nutzen

Radio Button, Toggle Button, Accordion - all dies sind UI-Komponenten, die eine Navigation in einer App ermöglichen. Um diese Komponenten für unsere Web Apps nachhaltig zu entwickeln, nutzen wir Storybook.
Storybook ist ein Open Source Tool, welches die isolierte Erstellung von UI Komponenten ermöglicht. Dazu gehört nicht nur die visuelle Erscheinung an sich, sondern beispielsweise auch die möglichen Zustände einer jeweiligen Komponente (z.B. aktiv/inaktiv).

Das als Website eingesetzte Design System kann mit Hilfe von Storybook auch als Komponentenbibliothek genutzt werden und dadurch in der Entwicklung Kosten einsparen. Die Komponenten werden, wie bisher auch, mit Angular entwickelt. Storybook stellt lediglich ein Hilfsmittel zur kontextfreien Visualisierung der Komponenten dar. Dies erleichtert die Entwicklung von wiederverwendbarem Code. Die angefertigten Komponenten sind von der Logik der jeweiligen App losgelöst. Sie sind modular angelegt und können innerhalb der Anwendung ausgetauscht werden. Dies ermöglicht zusätzlich ein einfaches Testen der jeweiligen Komponenten. Neben der Umsetzung des Designs ist aber auch die Ein- und Ausgabe von Daten zu berücksichtigen. Die Bausteine bekommen daher bereits im Code die Grundsteine gelegt, um diese Informationen einheitlich verarbeiten zu können.
Aufgrund dieser Vorgehensweise kann von einer erhöhten Konsistenz der Bausteine ausgegangen werden. Die Wiederverwendbarkeit wiederum sorgt dafür, dass die Komponenten mehrfach überprüft und stetig weiterentwickelt werden. Auch Änderungen, beispielsweise der Farbe, können auf diese Weise vergleichsweise schnell vorgenommen und Doppelentwicklungen vermieden werden.
Bevor unsere Entwickler:innen die Komponenten allerdings anlegen können, benötigen sie Informationen darüber, wie diese aussehen sollen. Die Design-Entwürfe werden von unseren UX/UI-Designer:innen in Figma hinterlegt. Um etwa Maße, Farbe und Icons korrekt umsetzen zu können, erhalten unsere Entwickler:innen einen (read-only) Zugriff auf Figma.

Um auf Entwickler:innen-Seite überprüfen zu können, ob die Designanforderungen aus Figma exakt so in Storybook umgesetzt wurden, wie das Design es vorgibt, nutzen wir zusätzlich ein Figma-Plug-In in Storybook. Auf diese Weise kann schnell visuell überprüft werden, ob entwickelte Komponenten der Design-Vorlage entsprechen.

Um den Design & Entwicklungs-Prozess der Komponenten nachhaltig zu gestalten, legen wir die Dokumentation in Zeroheight ab. Diese Plattform ermöglicht die automatische Synchronisation der Figma-Design-Library, sodass die Design-Vorlagen (Farben, Schriften, Abstände, etc.) einfach integriert werden können. Zusätzlich bietet Zeroheight die Möglichkeit, ein Live Preview sowie Code Snippets aus Storybook anzeigen zu lassen. Allen Beteiligten soll dadurch ermöglicht werden, die benötigten Informationen zentral und übersichtlich abrufen zu können.
Auf diese Weise ist es uns möglich effizienter und somit am Ende kostengünstiger zu entwickeln.

Lest in diesem Artikel, wie es bei uns mit Storybook im Zusammenspiel mit Chromatic weiterging.