Zielsetzung des Kurses
Der Kurs Storybook für UI Komponenten vermittelt den strukturierten Einsatz von Storybook zur Entwicklung, Dokumentation und Prüfung wiederverwendbarer UI-Bausteine. Behandelt wird die Einbettung in Frontend-Workflows sowie die Zusammenarbeit zwischen Design, Entwicklung und Qualitätssicherung. Im Fokus stehen Konfiguration, Katalogisierung von Komponenten und die Absicherung durch visuelle und funktionale Tests. Der Kurs ist im Bereich Frontend-Engineering und Design Systems verortet.
Inhalte
Einrichtung und Grundkonfiguration von Storybook inkl. Projektstruktur, Add-on-Management, Build- und Rendering-Setups für gängige Frameworks
Erstellung von Stories für UI Komponenten mit Controls, Args und Variationen sowie Dokumentation mittels MDX und Autodocs
Zustandsverwaltung und Interaktion durch Play Functions, Mocking von Datenquellen sowie Handhabung von Ereignissen und Edge Cases
Qualitätssicherung mit visuellen Regressionstests, Accessibility-Prüfungen, Interaktionstests und Linter-/CI-Integration
Integration in Design-System-Workflows, Versionierung von Komponentenbibliotheken und Veröffentlichung über Pakete oder interne Registries
Lernziele
- Identifikation der erforderlichen Projektkonfigurationen zur Inbetriebnahme von Storybook in bestehenden Frontend-Stacks
- Erstellung von aussagekräftigen Stories mit Variationen, Controls und MDX-Dokumentation
- Durchführung von Interaktionstests und visuellen Regressionstests für definierte Komponenten
- Implementierung von Accessibility-Prüfungen und Auswertung der Ergebnisse innerhalb von Storybook
- Integration von Storybook-Builds in CI-Pipelines einschließlich Linting, Testing und Deployment
- Bewertung von Komponentenstrukturen im Kontext eines Design Systems und Ableitung konsistenter Naming- und Versionierungsregeln
Berufsperspektiven
Die Kursinhalte finden Anwendung in Berufsfeldern wie Frontend-Entwicklung mit Schwerpunkt Komponentenarchitektur und Dokumentation.
Typische Tätigkeitsfelder umfassen die Pflege von Design Systemen und Komponentenbibliotheken in Produktteams.
Der Kurs adressiert Inhalte für Tätigkeiten wie Quality-Assurance-Engineering mit Fokus auf visuelle Regressionstests und Accessibility-Checks.
Ebenfalls angesprochen sind Rollen in der technischen Dokumentation von UI-Komponenten innerhalb crossfunktionaler Teams.
Zusammenfassung
Der Kurs Storybook für UI Komponenten behandelt Konfiguration, Dokumentation und Testverfahren für wiederverwendbare UI-Bausteine im Frontend. Im Rahmen dieser Weiterbildung werden Workflows für Stories, Interaktionstests, visuelle Prüfungen und die Einbindung in Design-System-Prozesse vermittelt. Die Inhalte stehen in Bezug zu Tätigkeitsfeldern in Frontend-Entwicklung, Design-System-Management und qualitätssichernden Rollen.