Storybook – Komponenten entwickeln und testen
UI-Komponenten isoliert entwickeln, dokumentieren und automatisiert in Front-End-Workflows absichern
Über den Workshop
Storybook unterstützt Front-End-Teams dabei, UI-Komponenten isoliert vom Anwendungskontext zu entwickeln, unterschiedliche Zustände nachvollziehbar abzubilden und die Zusammenarbeit zwischen Entwicklung, Design und Qualitätssicherung zu verbessern. Im Storybook Komplettkurs arbeitest du mit Stories, Add-ons, Dokumentation, Tests und CI/CD-Integration, damit Komponenten nicht nur funktionieren, sondern auch dauerhaft wartbar bleiben.
Der Kurs richtet sich an Entwicklerinnen und Entwickler, die Storybook in bestehenden React-, Vue- oder Angular-Projekten einsetzen oder eine belastbare Grundlage für Component-Driven Development schaffen möchten. Dabei geht es nicht nur um die Installation, sondern auch um sinnvolle Story-Strukturen, Args und Controls, Dokumentationsseiten, visuelle Regressionstests, Interaction-Tests und den Einsatz in Build- und Review-Prozessen. Für Teams mit stärkerem UX- und Strukturanspruch ergänzt der Website Usability und Informationsarchitektur Workshop die technische Komponentenarbeit um konzeptionelle Aspekte.
Live-Coding, Übungen und ein durchgängiges Schulungsprojekt sorgen dafür, dass die Inhalte direkt auf reale Front-End-Workflows übertragbar sind.
Tagesablauf
Setup, Stories und Dokumentation
- 01Einordnung von Storybook im Entwicklungsprozess
- 02Installation und Konfiguration in React-, Vue- oder Angular-Projekten
- 03Stories für Komponentenvarianten erstellen
- 04Args, Controls, Actions und Parameter einsetzen
- 05Dokumentation mit Docs und MDX strukturieren
Tests, Add-ons und CI/CD
- 01Interaction-Tests und Component Tests ausführen
- 02Accessibility-Checks in Stories nutzen
- 03Storybook-Builds in CI/CD integrieren
- 04Add-ons auswählen und Konfiguration pflegen
Für wen ist der Workshop geeignet?
Zielgruppe
- ✓Front-End-Entwicklerinnen und Front-End-Entwickler mit React-, Vue- oder Angular-Projekten
- ✓App-Entwicklerinnen und App-Entwickler mit komponentenbasierten UI-Architekturen
- ✓UX- und Design-System-Teams, die Komponenten dokumentieren und abstimmen
- ✓QA- und Test-Engineers, die UI-Regressionen früher im Entwicklungsprozess prüfen
Voraussetzungen
- ✓Sichere Kenntnisse in TypeScript
- ✓Erfahrung mit React, Vue oder Angular
- ✓Grundlagen in HTML, CSS und komponentenbasierter Front-End-Entwicklung
- ✓Erste Berührungspunkte mit Testing-Tools wie Vitest, Cypress oder Playwright hilfreich
Was Sie mitnehmen
Über den Trainer
Manuel Kübler
Manuel Kübler ist freiberuflicher Full-Stack-Entwickler und IT-Trainer mit über 12 Jahren Projekterfahrung in der Softwareentwicklung. Er begleitet Unternehmen als Entwickler und Berater – von der Konzeption moderner Webanwendungen bis hin zur Anbindung und Erweiterung von ERP-Systemen. Seine Schwerpunkte liegen in der Entwicklung mit React, Vue.js, Angular, Laravel und Node.js sowie in der SAP Business One-Entwicklung mit C# und dem coresuite Country Package. Als erfahrener Trainer konzipiert und leitet er Intensivschulungen für Softwareunternehmen und Hochschulen zu Themen wie React, Vue.js, Laravel, Git, ASP.NET und weiteren modernen Technologien. Seine Beispielprojekte und Lehrmaterialien sind auf GitHub unter SoftwareDesign-Solution öffentlich einsehbar.