Angular Storybook - stilisierte, isometrische Darstellung von Code und Komponenten als Maschinenteile

Angular & Storybook: Dein Weg zu besseren UI-Komponenten

30. August 2024

Angular Storybook ist unabdingbar für Entwickler:innen, die komplexe Benutzeroberflächen erstellen und verwalten. Als Angular-Entwickler:in stehst du oft vor der Herausforderung, den Überblick über deine UI-Komponenten zu behalten, besonders wenn dein Projekt wächst. Hier kommt Storybook ins Spiel – ein mächtiges Tool, das dir hilft, deine Angular-Komponenten zu organisieren, zu testen und zu dokumentieren. In diesem Beitrag erfährst du alles über die Nutzung von Storybook in deinem Angular-Projekt und wie es deine Entwicklung auf ein neues Level heben kann.

Was ist Storybook in Angular?

Storybook ist eine Open-Source-Plattform, die es dir ermöglicht, UI-Komponenten isoliert zu entwickeln und zu präsentieren. Es bietet eine separate Umgebung, in der du deine Angular-Komponenten unabhängig vom Rest deiner Anwendung erstellen, testen und dokumentieren kannst. Mit Storybook kannst du:

  • Komponenten in verschiedenen Zuständen visualisieren
  • Interaktive Dokumentation erstellen
  • Automatisierte Tests durchführen
  • Das Design-System deines Teams verwalten

Warum brauche ich Storybook?

Warum solltest du überhaupt Storybook in deinem Workflow integrieren? Hier sind einige überzeugende Gründe:

  1. Isolierte Entwicklung: Du kannst Komponenten unabhängig vom Rest der Anwendung entwickeln und testen.
  2. Bessere Zusammenarbeit: Designer:innen und Entwickler:innen können einfacher zusammenarbeiten und Komponenten überprüfen.
  3. Konsistentes Design: Storybook hilft dir, ein einheitliches Design-System aufzubauen und zu pflegen.
  4. Schnelleres Debugging: Probleme in einzelnen Komponenten lassen sich leichter identifizieren und beheben.
  5. Automatisierte Tests: Du kannst visuelle Regressionstests durchführen und die Qualität deiner UI sicherstellen.

Bekannte Angular-Projekte, die Storybook nutzen

Viele bekannte Projekte und Unternehmen setzen auf Storybook für ihre Angular-basierten Komponentenbibliotheken. Dazu zählen beispielweise die Newport UI-Komponenten von Salesforce Vlocity oder das Clarity, das Open-Source Design-System für Angular von VMware. Diese Beispiele zeigen, wie vielseitig Storybook eingesetzt werden kann – von einzelnen Komponenten bis hin zu kompletten Design-Systemen.

Wie integriere ich Storybook in mein Angular-Projekt?

Jetzt, wo du weißt, was Storybook ist und warum es so nützlich sein kann, lass uns einen Blick darauf werfen, wie du es in dein Angular-Projekt integrierst.

Schritt 1: Installation

Öffne ein Terminal in deinem Projektverzeichnis und führe folgenden Befehl aus:

npx sb init --type angular

Dieser Befehl installiert alle notwendigen Abhängigkeiten und richtet Storybook für dein Angular-Projekt ein.

Schritt 2: Konfiguration

Nach der Installation findest du in deinem Projekt einen neuen Ordner namens .storybook. Hier kannst du die Konfiguration von Storybook anpassen. Die wichtigsten Dateien sind:

  • main.js: Hier definierst du globale Einstellungen und Addons.
  • preview.js: In dieser Datei kannst du globale Dekorationen und Parameter festlegen.

Schritt 3: Erste Story erstellen

Lass uns eine einfache Story für einen Button erstellen. Erstelle dazu eine neue Datei button.component.ts in deinem src/app Verzeichnis:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-button',
  template: '<button [ngStyle]="{'background-color': color}">{{label}}</button>',
})
export class ButtonComponent {
  @Input() label: string = 'Click me';
  @Input() color: string = 'blue';
}

Nun erstelle eine Story-Datei button.stories.ts im selben Verzeichnis:

import { Meta, Story } from '@storybook/angular';
import { ButtonComponent } from './button.component';

export default {
  title: 'Components/Button',
  component: ButtonComponent,
} as Meta;

const Template: Story<ButtonComponent> = (args: ButtonComponent) => ({
  props: args,
});

export const Primary = Template.bind({});
Primary.args = {
  label: 'Primary Button',
  color: 'blue',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Secondary Button',
  color: 'green',
};

Schritt 4: Storybook starten

Um deine Stories zu sehen, starte Storybook mit folgendem Befehl:

npm run storybook

Öffne dann deinen Browser und navigiere zu http://localhost:6006. Du solltest nun deine Button-Komponente in verschiedenen Zuständen sehen können.

Erweiterungen für Storybook in Angular

Storybook bietet eine Vielzahl von Addons, die deine Entwicklungserfahrung verbessern können. Hier sind einige nützliche Erweiterungen für dein Angular-Projekt:

  1. Accessibility Addon: Überprüfe die Barrierefreiheit deiner Komponenten direkt in Storybook.
  2. Controls Addon: Teste die Properties deiner Komponenten interaktiv.
  3. Docs Addon: Generiere automatisch Dokumentation anhand deiner Stories.
  4. Viewport Addon: Teste deine Komponenten auf verschiedenen Bildschirmgrößen.
  5. Backgrounds Addon: Sieh dir deine Komponenten auf verschiedenen Hintergründen an.

Um diese Addons zu installieren, füge sie einfach zu deiner .storybook/main.js Datei hinzu:

module.exports = {
  // ... andere Konfigurationen
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/addon-controls',
    '@storybook/addon-docs',
    '@storybook/addon-viewport',
    '@storybook/addon-backgrounds',
  ],
};

Best Practices für Storybook in Angular

Um das Beste aus Storybook in deinem Angular-Projekt herauszuholen, hier einige Tipps:

  1. Komponenten isolieren: Stelle sicher, dass deine Komponenten möglichst unabhängig sind. Dies erleichtert das Testen und die Wiederverwendbarkeit.
  2. Stories für alle Zustände: Erstelle Stories für alle möglichen Zustände deiner Komponenten, einschließlich Fehlerzustände und Edge Cases.
  3. Nutze Decorators: Verwende Angular-Decorators, um den Kontext für deine Komponenten bereitzustellen, wenn nötig.
  4. Dokumentiere ausführlich: Nutze das Docs-Addon, um detaillierte Dokumentationen zu erstellen. Dies hilft anderen Entwickler:innen, deine Komponenten zu verstehen und zu nutzen.
  5. Automatisierte Tests: Integriere visuelle Regressionstests in deinen CI/CD-Prozess, um Änderungen an deinen UI-Komponenten zu überwachen.

Fazit: Storybook als Game-Changer für dein Angular-Projekt

Die Integration von Storybook in dein Angular-Projekt kann deine Entwicklungsworkflow deutlich verbessern. Es ermöglicht dir, UI-Komponenten effizienter zu entwickeln, zu testen und zu dokumentieren. Mit isolierten Entwicklungsumgebungen, interaktiver Dokumentation und einer Vielzahl nützlicher Addons wird Storybook zu einem unverzichtbaren Werkzeug in deinem Entwicklungsarsenal.

Wenn du tiefer in die Welt von Storybook eintauchen möchtest, empfehlen wir das offizielle Storybook für Angular Tutorial. Es bietet einen umfassenden Einstieg und zeigt dir, wie du Storybook optimal in deinem Projekt einsetzen kannst.

Storybook verbessert nicht nur die Qualität deiner UI-Komponenten, sondern auch die Zusammenarbeit in deinem Team und die Wartbarkeit deines Codes.

Du benötigst Unterstützung dabei Ordnung in deine UI Komponenten zu bekommen oder strebst an ein eigenes Design System in dein Angular-Projekt zu integrieren? Wir haben langjährige Erfahrung mit Storybook, Angular und Design Systems. Kontaktiere uns noch heute für ein kostenloses Erstgespräch.