Seminarkatalog

Komponenten visuell entwickeln, testen und dokumentieren Erleben Sie die Kraft von Storybook, dem führenden Tool zur visuellen Entwicklung, Dokumentation und zum Testen von UI-Komponenten! In diesem 2-tägigen Intensivkurs lernen Sie, Storybook nahtlos in Ihre Projekte zu integrieren und Workflows effizient zu gestalten. Von der Erstellung interaktiver Stories über visuelles Testen bis hin zur Integration in CI/CD-Pipelines – wir vermitteln Ihnen das Know-how, um mit Storybook moderne und skalierbare Front-End-Architekturen zu meistern. Der Kurs verbindet Theorie, Live-Coding und praktische Übungen. Profitieren Sie von praxisorientiertem Lernen, direktem Austausch mit erfahrenen Trainern und einem fundierten Blick auf Best Practices, die Ihre Projekte auf das nächste Level bringen!  Schulungsunterlagen: Präsentation im PDF-Format Zugriff auf ein GitHub-Repository mit Übungsaufgaben und dem Schulungsprojekt Schulungsumgebung: Visual Studio Code Aktuelle Node.js-Version Nach dem Kurs sind Sie in der Lage: Storybook zu installieren, zu konfigurieren und in bestehende Projekte zu integrieren Komponenten visuell zu entwickeln, zu testen und zu dokumentieren Storybook Add-ons zu nutzen, um Workflows zu optimieren Stories für unterschiedliche Zustände und Szenarien zu erstellen Automatische Tests mit Storybook und Tools wie Chromatic durchzuführen Storybook in CI/CD-Workflows einzubinden Storybook individuell anzupassen und Best Practices anzuwenden

1. Einführung in Storybook

• Was ist Storybook?
• Vorteile und Einsatzmöglichkeiten

2. Installation und Setup

• Einrichtung und grundlegende Konfiguration

3. Stories erstellen

• Struktur und Aufbau von Stories
• Erstellung von Stories für unterschiedliche Zustände und Variationen
• Interaktive Stories gestalten

4. Dokumentation von Komponenten

• Detaillierte Dokumentation mit Storybook

5. Testing mit Storybook

• Visuelles Testen von Komponenten
• Erstellung von Komponententests
• Snapshots generieren und vergleichen
• Integration von Testing-Tools wie Jest oder Chromatic

6. CI/CD-Integration

• Einbindung von Storybook in CI/CD-Pipelines
• Automatisierte Tests und Überprüfung von Stories
• Deployment der Storybook-Dokumentation

7. Best Practices

• Organisation und Struktur von Stories
• Wiederverwendbarkeit von Konfigurationen
• Pflege und Aktualisierung von Stories

8. Storybook erweitern

• Anpassung von Themes
• Erstellung eigener Pages
• Erweiterung für spezifische Projektanforderungen
• Optional: Entwicklung eigener Add-ons

• Webentwickler
• App-Entwickler

09:00 bis 16:00 Uhr ( 2 Tage)

D