Vor- und Nachteile von Storybook

Die Pros & Cons von Storybook im Überblick

Frontend-Entwickler sind immer auf der Suche nach neuen Tools, um den Entwicklungsprozess für eine neue Webseite zu vereinfachen und die Effizienz zu steigern – dies gilt umso mehr in Zeiten straffer Deadlines. Hier kommt Storybook gerade recht. Wie Storybook bei der Entwicklung und beim Testen von UI-Komponenten hilft, wird im folgenden Beitrag beschrieben.

Was ist Storybook?

*Storybook bietet eine Sandbox zur isolierten Erstellung von Benutzeroberflächen. Hierbei handelt es sich um ein JavaScript-Tool, mit dem Entwickler organisierte UI-Systeme erstellen können, wodurch sowohl der Erstellungsprozess als auch die Dokumentation effizienter und benutzerfreundlicher werden.

Storybooks wird verwendet, um zukunftsfähige, flexible und natürlich auch attraktive Benutzeroberflächen für eine neue Website zu erstellen. Im Allgemeinen wird die Frontend-Entwicklung mit Storybook einfacher und effizienter.

Das Tool wird nicht umsonst als der weltweit beliebteste Komponenten-Explorer bezeichnet. Dies ist von entscheidender Bedeutung, da die Verwendung modularer Komponenten bei Benutzerschnittstellen immer häufiger vorkommt.

Es hilft Frontend-Entwicklern dabei, bestimmte Komponenten und Seiten zu dokumentieren, zu verwalten und zu verfolgen, da es sich relativ leicht durchsuchen lässt. Darüber hinaus ist das Tool flexibel und unterstützt die meistgenutzten Frontend Frameworks und Bibliotheken, darunter React, React native, Vue und Angular, um nur einige zu nennen.

Mit einem Living Style Guide werden verschiedene Zustände visuell dokumentiert, um den Feedback-Zyklus zwischen Entwicklern und der Design-Abteilung zu erleichtern.

Die Vorteile von Storybook

Unserer Meinung nach überwiegen die Vorteile bei weitem. Dies liegt vornehmlich daran, dass Storybook die Arbeit am Frontend erleichtert. Im Folgenden werden daher die für uns wichtigsten Vorteile beschrieben.

Vielseitige Anwendungen

Einer der Hauptvorteile von Storybook besteht darin, dass es außerhalb der Hauptanwendung ausgeführt wird, sodass Entwickler UI-Komponenten für verschiedene Geräte und Betriebssysteme erstellen können, ohne sich mit den App-spezifischen Abhängigkeiten befassen oder diese verwalten zu müssen.

Im Gegensatz zum traditionellen „Schritt-für-Schritt“-Ansatz ermöglicht Storybook, Probleme zu isolieren. Dies ist wahrscheinlich der Grund, warum Storybook derzeit eines der beliebtesten UI-Entwicklungstools ist.

Storybook ist eine Umgebung, die es Entwicklern ermöglicht, View-Layer-Komponenten isoliert zu erstellen. Während viele Leute das Tool „React Storybook“ nennen, kann es darüber hinaus mit Vue, Angular oder einer Reihe anderer View-Layer-Frameworks verwendet werden.

Erstellung von Komponenten und Bibliotheken

Das Raffinierte an Storybook ist u. a. die Tatsache, dass es isoliert als Webanwendung in der eigenen Umgebung ausgeführt wird. Hierdurch werden die Komponenten isoliert entwickelt und getestet.

Dies bringt vor allem bei größeren Projekten viele Vorteile mit sich, da somit nicht das gesamte Projekt immer von Neuem geladen werden muss. Unterschiedliche Zustände werden visuell hervorgehoben, wobei schwer erreichbare Zustände und Grenzfälle einfach simuliert werden können.

Du kannst mit nur einer einzigen Komponente beginnen. Mit der Zeit aber bist du in der Lage, eine individuelle Bibliothek zu erstellen, auf die auch in Zukunft zugegriffen werden kann. Das bedeutet, je länger Storybook genutzt wird, desto höher ist auch der Effekt. Nutzer können somit von enormen Zeitersparnissen profitieren.

Verringerter Zeitfaktor, verringerte Website Kosten

Normalerweise sind Anpassungen an das Design äußerst zeitintensiv. Während im Normalfall die gesamte App bereits bei kleinen Änderungen im Design neu geladen werden muss, ist dies mit Storybook in Echtzeit möglich.

Dies liegt daran, da die Komponenten außerhalb der App und innerhalb der eigenen Umgebung bearbeitet werden. In der Cloud ist es zudem möglich, dass mehrere Teams gleichzeitig an der Oberfläche arbeiten.

Website erstellen Kosten: Durch den verringerten Zeitaufwand und die verschlankten Prozessen werden förmlich alle Arbeitsabläufe im Frontend günstiger, was sich auf die Gesamtkosten auswirkt.

Komplexe Testverfahren

Wir alle wissen, wie komplex Customer Journeys sein können. Jeder Kunde reagiert anders auf eine Oberfläche, was wiederum unterschiedliche Auswirkungen mit sich bringt. Storybook verwaltet eine Bibliothek mit allen UI-Komponenten an einem Ort, sodass jeder mögliche Zustand der einzelnen Komponenten separat getestet und aufgezeichnet werden kann.

Jedes Testergebnis wird hierbei als Story betrachtet, die die kleinste Einheit in einem Storybook darstellt. Jede Story kann nur einen Zustand einer bestimmten Komponente enthalten, und nur wenn man alle verschiedenen Zustände aller verschiedenen Komponenten zusammenfügt, erhält man das vollständige Storybook.

Storyshots

Bei Storyshots handelt es sich um ein äußerst nützliches Add-on für Snapshot-Tests. Storyshots ist eine Integration zwischen Storybook und Jest Snapshot Testing. Das Add-on funktioniert, indem es zuerst alle vorhandenen Storys in Screenshots umwandelt.

Diese Screenshots beziehen sich auf das gewünschte Design der UI-Komponenten, sodass jedes Mal, wenn UI-Änderungen vorgenommen werden, neue Screenshots erstellt werden, um sie mit den gespeicherten zu vergleichen. Wenn die Tests aus irgendeinem Grund fehlschlagen, hat der Entwickler die Möglichkeit, entweder den ursprünglich gewünschten Zustand zu ändern oder der Ursache der Unregelmäßigkeit auf den Grund zu gehen.

Die Nachteile von Storybook

Wie sich zeigt, bietet Storybook eine Vielzahl von nützlichen Werkzeugen, um die Arbeit von Frontend-Entwicklern zu erleichtern und Prozesse zu verschlanken. Jedoch sollten die wenigen Nachteile nicht unerwähnt bleiben, die die Verwendung von Storybook mitunter etwas unbequem machen.

Eingeschränkte Dokumentation

Dokumentation ist mit Storybook leider nur eingeschränkt möglich. Es ist zwar möglich, Komponenten zu dokumentieren, jedoch ist dies für Codes wie Pipes oder Services nicht möglich.

Doppelte Arbeit

Die Arbeit kann sich u. U. doppelt anfühlen, wenn du deine React-Komponenten und die Storybook-Bibliothek gleichzeitig pflegst. Dies kann den allgemeinen Zeitgewinn ein wenig schmälern.

Separate Storys

Storybook erfordert die Erstellung separater Datei-Storys, manchmal sogar mehrerer Storys für große Komponenten. Hierbei kann es einige Zeit dauern, bis alle Funktionen und Vorteile des Tools vollständig genutzt werden.

Abschließende Gedanken

Das Tolle an Storybook ist die breite Anwendung. Ganz gleich, ob es um die Erstellung einer erstklassigen Benutzeroberfläche oder einer React-App geht – das Tool unterstützt Entwickler bei einer Vielzahl von Prozessen vom ersten Schritt an.

Es erleichtert auch das Sammeln von Feedback sowie die Dokumentation. Zu den weiteren Funktionen gehören ein Add-on-Array, das den Arbeitsablauf von Teams anpasst, unterschiedliche Testverfahren, Tools zum Suchen und Finden benötigter Ressourcen sowie die Möglichkeit, Komponenten gemeinsam zu nutzen.

Daher empfehlen wir als Internetagentur allen Frontend-Entwicklern, über den Tellerrand hinauszuschauen und das Tool zu testen, um sich selbst von den vielen Vorteilen zu überzeugen.

Deine Webagentur in Frankfurt

Möchtest du eine neue Webseite erstellen lassen, benötigst du Hilfe beim Webdesign, SEO Webseiten oder weitere maßgeschneiderte Lösungen? Die Frankfurt Internetagentur blackHound unterstützt Unternehmen wie E.On, Mercedes-Benz, Hugo Boss oder IKEA mit innovativen Web-, App- und 3D-Lösungen.