Brücken zwischen Entwicklern und Designern zu schlagen ist, bedingt durch unterschiedliche Blickwinkel, Herangehensweisen und Prozesse, nicht immer leicht. So gehen doch die Vorstellungen beider Gewerke öfter ziemlich auseinander. Designer haben andere Ideen zur Funktion von Komponenten und Entwickler setzen Komponenten anders um, als es das Design vorgesehen hat. Mit Storybook haben wir bei MAXIMAGO eine Möglichkeit gefunden, diese zwei Fachbereiche besser miteinander zu synchronisieren.
In diesem Blogbeitrag gehen wir darauf ein, welche Schlüsselfaktoren und Vorteile Storybook für Entwickler und Designer bietet und wie es dazu beitragen kann, den gesamten Produktlebenszyklus zu verbessern.
Wo wird Storybook eingeordnet?
Storybook kann man als Teil eines bzw. als „Fenster“ in ein Designsystem betrachten. Designsysteme sind aus der Software-Entwicklung kaum mehr wegzudenken. Viele große Unternehmen bzw. Marken haben umfangreiche Designsysteme für ihre Unternehmens-Identität entwickelt, wie z.B. Material Design von Google, Carbon von IBM oder Adobe Spectrum und viele weitere (Quelle). Diese Systeme dienen als Werkzeug, um das Design und die Entwicklung zu vereinheitlichen, zu optimieren und für alle Software Produkte bereitzustellen.
Was ist Storybook und wie funktioniert es?
Storybook ist ein Open-Source-Tool zur Entwicklung und kontextfreien Visualisierung von Komponenten. Innerhalb von Storybook können angefertigten Komponenten losgelöst von einer Anwendung visualisiert und interagierbar gemacht werden.
In Storybook werden Komponenten in den Namensgebenden Stories umgesetzt. Eine Story besteht in den meisten Fällen hierbei aus einer Ansicht der Komponente und einer Reihe an Interaktionsmöglichkeiten (Controls), um den Zustand zu ändern. Die Komponente kann innerhalb der Story isoliert und kontextunabhängig implementiert werden. Alle Änderungen, die über die Controls eingestellt werden, können live angeschaut werden. So kann mit Storybook eine interagierbare Dokumentation einer Komponente angelegt werden.
Wie unterstützt Storybook MAXIMAGO?
Die größte Stärke von Storybook liegt darin, dass es eine zentrale Komponentenbibliothek bildet, die von allen Projekt-Beteiligten wie Designern, Entwicklern und Stakeholdern als Quelle der Wahrheit verwendet werden kann.
Die Entwicklung von einzelnen Komponenten kann losgelöst von einer eigentlichen Anwendung begonnen werden, was gerade in den frühen Phasen eines Projektes die Entwicklung nicht unnötig ausbremst. Da jede Story eine Komponente isoliert darstellt, können diese ohne viel Drumherum entwickelt werden. Eine Komponente muss dementsprechend nicht zuerst umständlich in einer Anwendung eingebaut werden, um sie anzupassen.
Entwickler können innerhalb der Stories über Controls die Zustände einer Komponente konfigurieren. Zustände können hier z.B. bestimmte Farben, Interaktion mit Komponenten oder Inhalte sein. Alle gewünschten Zustände werden bei der Implementierung der Story mit angelegt. So können Entwickler ohne großen Mehraufwand eine Komponente implementieren und parallel testen und erweitern. Jede Konfiguration einer implementierten Komponente kann innerhalb der Story als Code-Beispiel angezeigt werden. Dies spart nicht nur Zeit, sondern fördert auch die konsistente Wiederverwendung aller Komponenten.
Auch die Qualitätssicherung kommt nicht zu kurz. Ebenfalls können die Stories eingesetzt werden, um Komponenten auf mehreren Ebenen automatisiert oder manuell zu testen beispielsweise für visuelle Regressionstests, Snapshot-Tests, Zugänglichkeitstest oder Interaktionstests. Diese Tests fallen alle mehr in den Bereich von End-to-End-Testing. So kann selbst auf kleinsten Komponentenebenen eine hohe Qualität gewährleistet werden.
Zu guter Letzt dient Storybook bei korrektem Einsatz als hervorragende Dokumentation für alle Beteiligten. Stories können auch während der Entwicklung noch mit weiteren Informationen wie Beschreibungen angereichert werden, um die Dokumentation zu vervollständigen. So können weitere Informationen, die im Normalfall nicht durch Storybook angezeigt werden, ebenfalls zugänglicher sein.
Das Design enthält mehrere verschiedene Themes (z.B. Dark-Theme, Light-Theme oder verschiedene Brand-Themes) oder verhält sich bei unterschiedlichen Display-Größen anders? Storybook bietet hier die Möglichkeit live und einfach zwischen verschiedenen Themes oder auch Display-Größen zu wechseln, um so alle Einsatzmöglichkeiten zu testen.
Wann sollte man auf Storybook setzen?
- Das Designsystem besteht aus vielen Komponenten, Themen und Variationen, die dadurch einfach einsehbar und testbar werden.
- Entwicklern wird eine ‚Spielwiese‘ für das Designsystem geboten, die Live-Interaktionen und aktuelle Codebeispiele ermöglicht.
- Designern wird die Möglichkeit gegeben, das Umgesetzte im Detail zu betrachten und einen direkten Vergleich zwischen Design und Implementierung zu ziehen.
- Wenn eine interaktive und hochwertige Dokumentation gewünscht ist.
- Um die Inhalte des Designsystems verständlicher zu machen und die Wiederverwendbarkeit zu fördern.
- Die Möglichkeit, losgelöst vom Frontend einer Anwendung zu arbeiten, ist besonders in frühen Projektphasen nützlich, in denen viele grundlegende Änderungen anfallen.
Wann sollte man es sich überlegen?
- Bei Projekten mit kleinem Umfang, d.h., wenigen Komponenten, einem Theme und geringen oder keinen Variationen.
- Bei Projekten, die kein Designsystem verwenden.
- Die Einarbeitung in Storybook erfordert Zeit, sodass die Komplexität der UI-Entwicklung steigen kann.
- Der Nutzen von Storybook hängt stark von der Qualität der Dokumentation ab.
Autor: Leo Rüther – Software Engineer bei MAXIMAGO
Bilder: Bilder/ GIFs (https://storybook.js.org/)
BEI INTERESSE
Interessiert an einer vertieften Einsicht in die Möglichkeiten, die Storybook Ihrem Entwicklungsprozess bieten kann? Wir laden Sie herzlich ein, direkt Kontakt mit uns aufzunehmen. Nutzen Sie einfach unser Kontaktformular oder wenden Sie sich für einen persönlichen Austausch per Telefon oder E-Mail direkt an Martin Hoppe. Er steht Ihnen gerne für ein informatives Gespräch zur Verfügung.
- Martin Hoppe
- COO
- +49 231 58 69 67-30