Seminarkatalog

Komponenten visuell entwickeln, testen und dokumentieren

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. Wer Komponenten zusätzlich für unterschiedliche Viewports und Layout-Anforderungen plant, findet im Responsive Webdesign Kompaktkurs eine passende Ergänzung.

Schulungsunterlagen:

• Präsentation im PDF-Format
• Zugriff auf ein GitHub-Repository mit Übungsaufgaben und Schulungsprojekt

Schulungsumgebung:

• Visual Studio Code
• Aktuelle Node.js-Version
• Front-End-Projekt mit React, Vue oder Angular

Storybook-Grundlagen und Projekt-Setup

• Rolle im Front-End-Workflow
• Installation in bestehenden Projekten
• Framework-spezifische Konfiguration
• Ordnerstruktur und Story-Organisation

Stories, Varianten und Interaktion

• Aufbau von Component Stories
• Args, Controls und Parameter
• Komponentenzustände und Varianten
• Interaktive Stories mit Actions
• Mocking von Daten und Events

Dokumentation und Design-System-Arbeit

• Automatische Docs-Seiten
• MDX für ergänzende Inhalte
• Komponentenbeschreibung und Usage Notes
• Add-ons für Design-Workflows

Testing mit Storybook

• Interaction-Tests in Stories
• Component Tests mit Vitest
• Accessibility-Checks im Storybook
• Visual Tests mit Chromatic
• Snapshot-Vergleiche und Regressionen

CI/CD, Build und Deployment

• Storybook-Build für Pipelines
• Automatisierte Testläufe in CI/CD
• Review-Workflows für Pull Requests
• Deployment der Storybook-Dokumentation

Erweiterung und Wartbarkeit

• Add-on-Auswahl für Projektanforderungen
• Theming und UI-Anpassungen
• Wiederverwendbare Preview-Konfiguration
• Pflege langlebiger Story-Strukturen

• 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
• Für App-Projekte sind Kenntnisse aus dem Flutter Apps mit Dart Grundkurs eine sinnvolle Ergänzung, aber keine Voraussetzung

• 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

Lernformate

Unsere Seminare bieten dir maximale Flexibilität: Du kannst zwischen Live-Online und Vor Ort in unseren modernen Schulungszentren im D-A-CH Raum wählen. Beide Formate garantieren dir die gleiche hohe Qualität und interaktive Lernerfahrung.

Schulungsarten

Wir bieten dir verschiedene Schulungsarten: Offene Seminare, Firmenseminare für Teams und Inhouse-Schulungen direkt bei dir vor Ort. So findest du genau das Format, das zu deinen Bedürfnissen passt.

Uhrzeiten

09:00-16:00 Uhr

Aktuelle Software

In unseren offenen Kursen arbeiten wir mit der aktuellsten Software-Version. So lernst du direkt mit den Tools und Features, die du auch in deinem Arbeitsalltag verwendest - praxisnah und zukunftsorientiert. Bei Inhouse- und Firmenschulungen bestimmt ihr die Version.

D