Storybook Whitelabel Lösungen

Die Programmierung neuer Projekte ist immer mit enormem Aufwand verbunden – und gerade in der Web-Entwicklung sind Ressourcen heiß begehrt und schwer verfügbar. Deshalb wird stetig nach neuen Wegen gesucht, Prozesse zu optimieren, um diese Ressourcen effizienter einzusetzen

Der Grundgedanke von Whitelabels in Storybook

Die Whitelabel-Lösung innerhalb Storybooks ist eine dieser Möglichkeiten. Hier können neue Projekte per Copy&Paste und in einer späteren Ausführung per Command im Terminal aufgesetzt werden. Der Vorteil liegt auf der Hand: Die komplette Struktur für die Code-Basis ist bereits vorgegeben. Allgemeine Komponenten, die höchstwahrscheinlich innerhalb des Projekts benötigt werden, sind bereits vorhanden und müssen lediglich neu gestyled werden. Durch den Aufbau in Storybook können die Komponenten direkt angeschaut werden und über eine Weboberfläche konfiguriert werden, um die Funktionalitäten zu prüfen.

Warum werden Whitelabels erstellt?

Whitelabels ermöglichen die Bereitstellung zahlreicher Grundelemente zur späteren Anpassung und Verwendung. Komponenten wie Filter, Accordions, Styled Selectboxen, Paginations sind bereits in den Grundkonzepten fertig und müssen am Ende im Optimalfall nur noch per Styling angepasst werden. Größere Logikänderungen sind im Besten Fall jedoch nicht mehr notwendig. Ebenfalls sind bereits Basis-Apps für React und Angular vorhanden. Dies ermöglicht einen leichteren Einstieg in die Projekte, da auch hier schon eine Grundstruktur vorhanden ist. Innerhalb der Whitelabels kann auch bereits der Fokus auf die Beachtung der ARIA-Richtlinien sowie der entsprechenden Keyboard-Navigation genommen werden. ARIA bezeichnet dabei Accessible Rich Internet Applications, also barrierefreies oder -armes Websitedesign.

Welche Komponenten gibt es bereits?

Grundsätzlich werden die meisten Komponenten, die in so gut wie jedem Projekt benötigt werden, bereits als Whitelabel angelegt. Dies beinhaltet in etwa

• Accordion Filter
• Navigationselemente
• Slider
• Tables
• Pager
• Cards
• Video mit Cookie-Layer, damit das Video auch DSGVO-konform angezeigt wird
• SVGs - hier werden alle SVGs als Single-Path in einen Ordner gelegt, so dass in der Komponente lediglich der Dateiname des SVGs angegeben werden muss

Logik

Die jeweilige Logik der einzelnen Objekte wird über einen Stimulus-Controller gebaut. Dies erleichtert das Event-Handling sowie die Ansprache bestimmter HTML-Elemente. So kann zum Beispiel für Akkordeon-Elemente standardisiert festgelegt werden, wie sich die einzelnen Bereiche verhalten, falls Elemente auf- oder zugeklappt werden. Die Logik wird in TypeScript geschrieben und ist somit robuster gegenüber Fehlern. Zur Beschreibung der Komponentenstruktur werden type-Files verwendet.

Zeitersparnis

Der große Vorteil der Whitelabel-Lösung ist die Zeitersparnis. Eine Filterfunktion wurde in einem spezifischen Projekt in lediglich 40% der Zeit umgesetzt, die für die Entwicklung ohne Whitelabel-Lösung benötigt worden wäre – inkl. Anpassung der Logik sowie des Stylings. In einem anderen Projekt wurde ein umfangreiches Akkordeon in 10% der Zeit umgesetzt, ein Projekt-Setup wird mit 80% Zeitersparnis umgesetzt, sofern der Terminal-Command existiert. Die eingesparte Zeit kann so effektiver für die Entwicklung anderer Komponenten, zur Code-Kontrolle oder zu individuellen Anpassungen genutzt werden.

Fazit

Kundenprojekte sind genauso individuell wie die jeweiligen Anforderungen – hierfür sind Whitelabel-Komponenten in Storybook definitiv keine passende Lösung. Für stetig wiederkehrende Elemente, die lediglich sehr einfach angepasst werden können, eignen sich Whitelabel-Lösungen jedoch perfekt. Sie sparen wertvolle Ressourcen, die an anderer Stelle wieder eingesetzt werden können. Resultat ist ein effektiverer und ressourcenschonender Projektablauf, was sowohl für unsere Kunden als auch uns als Agentur von Vorteil ist.