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: