UI-Entwicklung leicht gemacht - Das Open-Source-Tool Storybook

Einleitung

Vor kurzem haben wir Storybook in unseren Frontend-Entwicklungs-Workflow aufgenommen. Storybook ist eine UI-Web-Entwicklungsumgebung, die im Browser läuft. Es wurde ursprünglich als Open-Source-Projekt von einem srilankischen Startup entwickelt. Als das Startup Insolvenz anmelden musste, wurde das Projekt fast eingestellt. Glücklicherweise wurde es von einer Gemeinschaft/Community von Mitwirkenden und Betreuern, die über die ganze Welt verteilt sind, wiederbelebt. Heutzutage ist es ein sehr beliebtes und modernes Werkzeug für die Erstellung modularer Benutzeroberflächen. Dies spiegelt sich in der Einführung bei großen Technologieunternehmen wie Atlassian, Airbnb und vielen anderen wider. Mit der kürzlich erfolgten Veröffentlichung der Version 5.0 hat nun ein Major Release neue, aufregende Features eingeführt. In diesem Blogpost soll nun das Tool Storybook im Allgemeinen beschrieben und zudem die vielen Möglichkeiten der Einbindung in die Projektarbeit aufgezeigt werden.

Die verschiedenen Tools in Storybook

Ein Storybook besteht aus Bausteinen, so genannten Stories. Sie lassen sich auf vielfältige Weise zusammensetzen. Im Idealfall implementiert und zeigt eine Story jedes Verhalten und jeden Zustand einer UI-Komponente. Ein einfaches Beispiel wäre eine Button-Komponente. Es kann viele Zustände wie aktiv, ladend oder deaktiviert haben. Stories können auch Grenzfälle elegant abdecken. Sie regen den Entwickler an sich tiefgreifend über mögliche Zustände der Komponenten Gedanken zu machen.

Storybook hilft, den Entwicklungsprozess zu verbessern. Durch das Zusammensetzen von Komponenten können komplette Screens zusammengestellt werden. Dies fördert die Komponentenbildung und Modularisierung. Dies ermutigt auch dazu, wiederverwendbare Komponenten zu schaffen. Indem man Zeit im Voraus in den Aufbau der Komponentenarchitektur investiert, kann man langfristig eine immense Produktivität und verringerte Komplexität erzielen. Storybook läuft außerhalb eines Programms als Webanwendung in einer eigenen Umgebung. Dies ermöglicht die Entwicklung und Anzeige einzelner Teile der Benutzeroberfläche. Es erleichtert auch das Testen, da das Bauteil isoliert getestet werden kann.

Storybook bietet viel Flexibilität und unterstützt viele gängige Frontend-Bibliotheken und Frameworks von React und React native bis Vue, Angular und mehr. Die Verwendung von Typescript kann ebenfalls einfach konfiguriert werden. Wenn ein Projekt bereits existiert, kann Storybook trotzdem eingeführt werden, da es völlig unabhängig von diesem ist. Storybook kann ohne großen Aufwand als statische Anwendung exportiert und anschließend deployed werden. Dadurch ist es sehr einfach möglich, seinen Stakeholdern und Designern die Benutzeroberfläche zu demonstrieren. Das bedeutet auch, dass Storybook als Dokumentationsform dient, bei der ein Living Style Guide und verschiedene Zustände der Anwendung visuell dokumentiert werden. Es erleichtert auch den Feedback-Zyklus zwischen Designer und Entwicklerteam.

Das Storybook selbst ist sehr anpassungsfähig und erweiterbar durch Addons wie das Action-Addon. Das Action-Addon ermöglicht die Beobachtung von Events, die von einer Komponente emittiert werden und im Falle eines Buttons bedeutet dies, dass nur ein aktiver eine beobachtbare Aktion ausführen kann. Dank der Addons API von Storybook ist es einfach, ein eigenes Addon zu erstellen. Eine der Anforderungen an das, bei der Scandio eingesetzte, Storybook ist die Authentifizierung. Wir haben mit sehr geringem Aufwand einen Login mit einem zusätzlichen API-Hook eingeführt. Es gibt viele Konfigurationsoptionen und Maßnahmen, die man ergreifen kann, um das Storybook anzupassen.

Wie verwenden wir Storybook?

In unserem Team verwenden wir Storybook in Kombination mit React und Atomic Design. Atomic Design ist eine Methodik zur Erstellung von Designsystemen, die bei Designern beliebt ist. In unserem aktuellen Projekt stehen wir auch vor der Herausforderung, die Designanforderungen zwischen mehreren Services zu synchronisieren. Da wir ein klares Erscheinungsbild in der gesamten Anwendung beibehalten wollen, muss das Design über mehrere autonome Teams hinweg vereinheitlicht werden. Hier ist das Storybook sehr hilfreich. Es dokumentiert unsere UI-Bibliothek, die von Services und Teams gemeinsam genutzt wird. Die Komponenten werden in Form einer Komponentenbibliothek extrahiert. Eine neue Version der Bibliothek kann über Artifactory jederzeit veröffentlicht werden und wird als privates npm-Paket bereitgestellt. Dies erfüllt unseren Bedarf an einer einheitlichen und versionierten UI-Bibliothek, die wir als Abhängigkeit über mehrere Anwendungen hinweg wiederverwenden können.

Obwohl Storybook im Moment mehrere Frontend-Bibliotheken und Frameworks unterstützt, planen wir nicht, etwas anderes als React zu verwenden. Die Integration eines neuen Adapters für z.B. eine Vue-Host-Anwendung in der Zukunft sollte jedoch dank Storybook kein großes Hindernis darstellen.