Ein neuer Stern: Storybook Add-On

Philipp Shardt Senior UX Software Engineer, • Technology Expert Web

19.01.2022 • 9 minutes reading time

In der Welt des Web Development gibt es unzählige Wege, User Interfaces zu bauen. Mit vielen Frameworks und Libraries, die alle möglichen Features bereithalten. Jedoch haben alle eins gemeinsam - sie bauen auf Komponenten auf. Die bekanntesten Frameworks sind React, Angular und Vue. Auch bei Ergosign sind diese in einem Grossteil der Projekte im Einsatz.

Ein User Interface muss fehlerfrei funktionieren, visuell ansprechend und intuitiv in der Bedienung sein. Eine Aufgabe, die Design und Development gemeinsam lösen müssen. Denn das Design muss konsistent über die Anwendung hinweg entwickelt werden.

Im Web Development gelingt das am besten durch die Verwendung von UI-Komponenten. Damit jede Komponente „sauber“ wiederverwendbar ist, liegt das Augenmerk primär auf der Eigenschaft der Kapselung in einzelnen Funktionen und dem vereinfachten Testing. Neben funktionalen Unit Tests sind manuelle Design Reviews, Mobile Responsiveness- Tests und Accessibility (a11y) Tests nötig. Mit Storybook haben wir ein Open-Source-Tool gefunden, das uns schneller und effizienter als je zuvor UI-Komponenten bauen lässt – dank unserem selbst entwickelten Add-On.

Storybook: UI Komponenten wie aus dem Bilderbuch

Nein, wir erzählen hier keine Märchen. Wer noch nicht von Storybook gehört hat, liest auf der Website folgende Beschreibung:

„Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.“

Dem können wir nur zustimmen. Storybook bietet uns viele Vorteile, wie:

  • Die isolierte Entwicklung von Komponenten, unabhängig von der späteren Anwendung.

  • Die Dokumentation von Use Cases in einfachem JavaScript. Das erleichtert die Entwicklung, das Testing und die Überprüfung in der Qualitätssicherung.

  • Eine Übersicht aller Komponenten in einer Live Gallery mit der dazugehörigen Dokumentation.

  • Einfaches (manuelles) visuelles Testen der Komponenten in verschiedenen Browsern.

  • Und der besondere Feenstaub: Storybook unterstützt alle modernen Frameworks.

Wahrlich märchenhaft für eine leichtere, effizientere und qualitätssichernde Entwicklung mit Storybook. Warum wir so am Schwärmen sind und wie uns die Idee für unser Storybook Add-On kam? Dafür müssen wir einen Blick in die Vergangenheit werfen. Wie haben wir davor eigentlich UI-Komponenten gebaut?

Es war einmal ... die UX Library

Vor der Nutzung von Storybook arbeiteten wir mit einem ähnlichen, selbst entwickelten Tool. Die UX Library bot eine Übersicht aller Komponenten eines Projektes in isolierter Umgebung an.

Hier sind alle Komponenten in den verschiedensten Ausprägungen sowie in den jeweiligen Pseudo-States (wie hover, active, focus) zu sehen. So haben Design und Development auf einen Blick alle nötigen Informationen. Jedoch hat die UX Library einige Limitationen gegenüber Storybook.

Es wurden nicht alle bei Ergosign verwendeten Frameworks unterstützt. Die Pflege der Library und regelmässige Updates der jeweiligen Frameworks war sehr zeitaufwändig. Ausserdem konnten Edge Cases, also Stories mit komplexen Beispielen, nur schwer angelegt werden. Beim Styling der Pseudo-States mussten diese manuell hinzugefügt werden, sodass Artefakte im Build Output zurückblieben.

Ein Ausflug in die technischen Gefilden

Storybook bietet für die Probleme in der UX Library gute Lösungsansätze. Allerdings gibt es keine Möglichkeit, die verschiedenen Pseudo-States und Ausprägungen gleichzeitig anzuzeigen.

Sprich, ein Button muss beispielsweise geklickt werden, um diesen im Active State zu sehen. Die einzige Möglichkeit, das Element doch noch in das Styling des Pseudo-States zu zwingen, ist es, das Aussehen ganz normal zu definieren und anzuwenden.

Dafür sind zwei Schritte notwendig:

Schritt 1: Eine normale CSS-Klasse definieren, die das gleiche Aussehen beschreibt wie der Pseudo-State selbst.

Schritt 2: Die Klasse auf das Element anwenden, d. h. es muss dem entsprechenden Klassenattribut hinzugefügt werden.

Schritt 1 im Detail: automatische Generierung des Pseudo-Stylings

Dankenswerterweise wurde bereits ein Plugin für PostCSS („A tool for transforming CSS with JavaScript“) entwickelt, das es erlaubt, automatisiert CSS-Klassen aus den definierten Pseudo-States-Stylings in CSS-Dateien zu generieren. Es ist ebenfalls als Open Source-Projekt auf Github zu finden und wurde von uns über Pull Requests mit weiteren Funktionalitäten ausgestattet. Wir bieten zusätzlich Presets an, die eine automatische Anpassung der Konfiguration mit Storybook und Webpack vornehmen. Diese integrieren und konfigurieren das Plugin in den PostCSS-Loader. Damit werden die weiteren Klassen auch nur in Storybook erzeugt und der letztendliche Build Output in Live-Systemen bleibt von den unliebsamen Artefakten verschont.

Schritt 2 im Detail: Anwendung des Pseudo-Stylings

Im nächsten Schritt müssen die verschiedenen States angezeigt werden. Dazu wird in der Story definiert, welche Pseudo States abgebildet werden sollen. Zusätzlich können weitere Attribute bzw. Framework-spezifische Properties mit Werten gefüllt werden, die auch auf die jeweilige Komponente angewendet werden (Code-Beispiel von Story Definition).

Die Komponente wird daraufhin in der Storybook Canvas mehrmals gerendert und die entsprechend generierte Pseudo-State-Klasse wird eingesetzt.

Die Idee für ein Add-On ist geboren

Unser Storybook Add-on schliesst diese Lücke. Beide Schritte werden mit dem Add-On automatisiert. Das vollständige Pseudo-States-Styling der Komponente wird automatisch in reale CSS-Klassen übersetzt und über die Story Definition wird leicht definiert, welche States überhaupt präsentiert werden. Eine wahre Erleichterung!

Hier ein Einblick zu dem Add-On:


<iframe alt="Interaktive Demo" src="https://storybook-pseudo-states-addon-demo.ergosign.de/?path=/docs/button--overview" width="100%" height="600px" style="border:1px solid black;" allowfullscreen></iframe>

Mit der Community geteilt

Bei Ergosign haben wir an einem Freitag im Monat die Möglichkeit, uns mit einem selbstgewählten (UX) Thema zu beschäftigen – die Focus Time. Das Add-On war eines davon. Mit einem extra Zeitbudget wurden die benötigten Features umgesetzt. Und das erfolgreich! Das Add-On ist als Open Source-Version auf Github verfügbar und unterstützt die Frameworks React, Vue und Angular sowie Plain HTML. In der Betaphase sind weitere Features dazugekommen, wie die Permutationen - das Kombinieren verschiedener Pseudo-States und Custom-Attribute.

Die Community zeigt sich begeistert und verteilt fleissig Sterne. Unser Storybook Add-On kam in zahlreichen Projekten zur Verwendung.

Das Fazit war stets: sehr wertvoll für die Arbeit im Web Development. Der Entwicklungsprozess wird vereinfacht, beschleunigt und viele Fälle werden abgedeckt. Einer der grossen Vorteile ist die effiziente Zusammenarbeit von Design und Development in manuellen Design Reviews.

Als Open-Source-Tool wird das Add-On stetig von uns weiterentwickelt. Alle Issues (Fehlermeldungen) werden in unserem Ticketsystem erfasst und bearbeitet. Dank der Community haben sich nicht nur viele Ergosign-Kolleginnen und -Kollegen beteiligt, auch von extern kommt Support.

... und wenn sie Storybook öffnen, dann verwenden sie das Add-On noch heute.

Quelle Headerbild: Unsplash