#vuecember2020 #frontend

Storybook

Wir nutzen in jedem Projekt Storybook, um unsere Komponenten dort separat darzustellen und testbar zu machen. Warum wir das machen? Hier sind die Vorteile, die sich dadurch für uns ergeben:

Gekapselte Komponenten

Wir entwickeln Komponenten zunächst nur in Storybook, statt sie direkt im Interface einzubinden. Dadurch sind wir gezwungen, sie direkt in einem ideal gekapselten Umfeld zu entwickeln – denn Storybook ist für die Komponenten, die wir bauen, der erste Einsatzort. Die tatsächliche Verwendung im späteren Interface folgt später.

Durch diese Kapselung ist jeder Entwickler gezwungen, eine sinnvolle Schnittstelle für die jeweilige Komponente zu entwerfen. Zudem ist es so sehr einfach möglich, eine Vermischung zwischen Datenlogik und Darstellungslogik zu vermeiden. Diese Entkopplung erleichtert später das Refactoring, da nur der Daten- oder der Darstellungslayer angefasst werden muss.

Zudem können wir innerhalb Storybooks sicherstellen, dass das gewünschte responsive Verhalten korrekt implementiert ist.

Einfachere QA

Indem wir in den Projekten neben dem eigentlichen Interface auch Storybook beim Deployment zur Verfügung stellen, lässt sich die Abnahme der Komponenten wesentlich leichter gestalten. Wir sind in der Lage, unseren UX/UI-Designern und allen anderen Beteiligten einen spezifischen Link zu schicken. Dort können sie die Komponenten gesondert betrachten und sie in alle möglichen Zustände bringen, die nötig sind. Ohne Storybook ist es häufig schwierig, im tatsächlichen Interface einen bestimmten Komponenten-Zustand herzustellen.

image2020-12-8_14-42-0.png

Durch das noch recht neue Controls-Addon ist diese Arbeit nochmals erleichtert worden. Die Umstellung der Stories vom bisherigen Knobs-Addon ist schon in diversen Projekten erfolgt und hat den Erstellungsprozess der Stories spürbar verschlankt.

Visual Regression Tests

In einigen Projekten nutzen wir die Storybook-Stories zudem, um Visual Regression Tests mit Hilfe des Storyshots-Addons durchzuführen. Durch die Kapselung der Komponenten lassen sich sehr gut in verschiedenen Viewports Screenshots der Komponenten erstellen, die wir mit einem Grundsatz an Screenshots abgleichen. Dadurch stellen wir in unserer CI sicher, dass Komponenten nicht aus Versehen visuell geändert werden.