UI Design mit Storybook

Storybook – Usability Interface erstellen leicht gemacht

Storybook revolutioniert die Usability Interface (UI) Erstellung


Storybook ist ein Tool für die Frameworks React, React-Native, HTML, Vue und Angular, das es einem ermöglicht mit Leichtigkeit individuelle User Interface (UI) Komponenten zu designen und zu entwickeln. Das Besondere an Storybook ist, dass die zu bearbeitende App nicht einmal gestartet werden muss.

Storybook lässt sich mit wenigen Schritten in jedes existierende React, Vue oder Angular Projekt installieren und ermöglicht einem in erster Linie eine Liste an “Storys” zu erstellen. Diese “Storys” sind die “Schaukästen” einzelner für die App geschriebener Komponenten, auf die sich nun mit einem Klick zugreifen lässt und sich einfach und schnell testen lassen. Storybook läuft außerhalb der Anwendung. Die Programmierung geschieht in Isolation zur eigentlichen App, somit müssen App-spezifische Abhängigkeiten und Voraussetzungen nicht beachtet werden.

Die Installation ist denkbar einfach und besteht aus drei Zeilen:

cd my-project-directory
npm i -g @storybook/cli
getstorybook

Danach lässt es sich mit dem Befehl

“npm run storybook” oder “yarn storybook” starten

Storybook erleichtert das Wiederverwenden von Elementen

Storybook hilft dabei die Usability Elemente einer App in kleine, wiederverwendbare Komponenten aufzuspalten, die sich später nach dem Baukastenprinzip zusammensetzen lassen. Unter dieser Voraussetzung ist es einfacher, den Überblick über sämtliche Komponenten eines Projektes zu behalten. Dies ist bei größeren Projekten, an dem mehrere Entwickler gleichzeitig arbeiten wichtig.

Ein weiterer Vorteil an dieser isolierten Entwicklungsumgebung ist der, dass sich an beliebigen Komponenten “rumspielen” lässt ohne dabei Gefahr zu laufen etwas unbemerkt kaputtzumachen. Die Funktionsfähigkeit der App ist zu keiner Zeit der Entwicklung gefährdet.

Storybook besitzt eine große Palette an einfach hinzuzufügenden Add-ons, die von dem Storybook Team gepflegt und instand gehalten werden. So lassen sich Storys mit Kommentaren versehen oder mit Projekten aus den bekannten UI Designer Tools “Sketch” und “Figma” verknüpfen.  

Wie erleichtert  Storybook die Arbeit eines Entwicklerteams?

Das Offensichtlichste ist der Vorteil derjenigen, die an dem UI der der App arbeiten. Gerade das Anpassen der sichtbaren Benutzeroberfläche strickt nach einer Vorlage, ist oft ein schrittweises Anpassen an das gewünschte Design. Jedes Mal wenn eine kleine Änderung in den Code eingegeben wird und diese überprüft werden soll, muss die App neu geladen werden. Dieser Prozess, wiederholt ausgeführt, kostet dem Entwickler eine Menge an Zeit, die anderweitig investiert sinnvoller ist. Mit Storybook hat der Programmierer die Werkzeuge direkt an der Komponente zu arbeiten und seine vorgenommenen Änderungen sofort präsentiert zu bekommen, ohne dabei die eigentliche App zu starten.  Storybook dient gleichzeitig als Werkzeug zur Dokumentation und als Nachschlagewerk, über die Zeit bildet sich allein durch seine Nutzung eine Bibliothek an Komponenten, auf die sich in zukünftigen Projekten zurückgreifen lässt. Es zwingt den Programmierer dazu in überschaubaren Komponenten zu denken, was der gesamten App-Architektur zugute kommt, da einzelne Abhängigkeiten sinnvoll und übersichtlich gesetzt werden müssen.

Der Wegfall der beiden oben genannten Punkte führt bei der Entwicklung zu enormen Zeitersparnissen, was einem Gerade in der Entwickler Branche einen Vorteil vor den Konkurrenten verschafft, denn Zeit ist Geld.

Mit Storybook steht Modularität im Vordergrund, was zu einem sauberen Code führt, der einfacher zu lesen ist. Gerade für Mitarbeiter, die neu in einem Projekt sind, stellt dies eine große Erleichterung dar.

Hinterlassen Sie einen Kommentar

Möchtest du mitdiskutieren?
Fühl dich frei, beizutragen!

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

This site uses Akismet to reduce spam. Learn how your comment data is processed.