Robuste Design Systems mit Storybook und Angular
Vom Konzept zur lebendigen Anwendung
Andreas Wissel
@andreas_wissel
User Experience Architect
Christian Liebel
@christianliebel
Consultant

• Design Systems
• Architekturmuster zur
Entwicklung robuster
Komponenten
• Framework-agnostisches
Tooling, am Beispiel von
Angular
• Durchgängiger Workflow vom
Design bis zur echten
Angular-Komponente
Was Sie erwartet
• technischer Deep Dive
• Angular Deep Dive
Was Sie nicht erwartet

User Experience Architect
Andreas Wissel
💡 Enterprise UX
❤ Design Systems
# Cross-Platform Design Strategies
🏢 Freelancer
✍ andreaswissel.com
🐦 @andreas_wissel

User Experience Architect
Andreas Wissel
• Designer-Developer Schnittstelle
• Workflow Optimierung
• Beratung & Begleitung von Redesigns
• Fokus auf Design Systems mit
Storybook

Consultant
Christian Liebel
💡 Consulting cross-platform & SaaS
❤ Progressive Web Apps & Angular
' MVP & GDE
🏢 Thinktecture AG
✍ christianliebel.com
🐦 @christianliebel

Consultant
Christian Liebel
• Migration von Windows-only, online-
only, On-Premise-Anwendungen
• Plattformunabhängige, offlinefähige
Businessanwendungen in der Cloud
• Fokus auf Progressive Web Apps &
Angular

Repository: http://bit.ly/ng-ds
Setup

• Dachbegriff
• “all aspects of the user’s experience when interacting
with the product, service, environment or facility” (ISO
9241-210)
• ganzheitliche Betrachtung davon, wie unsere
Produkte Anwender, Geschäftsprozesse und Umwelt
beeinflussen
Was ist UX?

Menschen denken in Mustern
User Experience im Alltag

Menschen denken in Mustern
User Experience im Alltag

Menschen denken in Mustern
User Experience im Alltag

Und ohne Muster sind wir verloren..
User Experience im Alltag

• Features müssen sichtbar sein
• Features müssen benutzbar
sein
• UX schafft Zugang:
• Discoverability
• Usability
• Accessibility
User Experience für Entwickler
Access
denied

Enge Zusammenarbeit und gemeinsames Verständnis
führt zu guter User Experience
Dieser Talk soll das nötige Handwerkszeug für enge
Zusammenarbeit geben
Denn User Experience dreht sich vor allem um eins:
Mission Statement
Menschen.

Kollaboration ⚡ Fachbereiche
Konsistenz ⚡ Projektalltag
Skalierbarkeit ⚡ Agile Prozesse
Menschen.

Design Systems
Komponenten-
Sammlung
Dokumentation spezifische
Use-Cases

Moment mal…
Ein alter Bekannter?

• Web-only (weniger geeignet für Desktop oder native-
like)
• kein Komponentensystem
• monolithisches CSS
Beispiel: Bootstrap

„Früher war alles einfacher“

relevante Zielplattformen früher:
Windows oder Web

relevante Zielplattformen heute:
Windows, macOS, Web/PWA, iOS, Android

Doch damit nicht genug…

Verschiedenste Anzeige- und Eingabemöglichkeiten

• extrem viele Geräteklassen
• verschiedenste Eingabemöglichkeiten
• viele Zielplattformen
• völlig neue Möglichkeiten
• völlig neue Möglichkeiten Fehler zu machen
Stetig wachsender Zielmarkt

Moderne Design Systems: Bausteine
Branding Guidelines
Komponenten-
bibliothek
Dokumentation
Animation, a11y, etc.
Inhalte
isoliert
iterativ
erweiterbar
brown-field Einsatz
Prozess
viele Plattformen
viele Geräteklassen
eigene
Designsprache
Kapselung
Anforderungen
+ }

• geraten durch anspruchsvollen B2C-Markt unter Druck
• müssen einfach zu bedienen sein
• aber dabei trotzdem viele Funktionen liefern
• nach Möglichkeit auf allen Plattformen verfügbar
Moderne Business-Anwendungen
“Machen wir es doch wie Facebook”

• iterative Entwicklung von Code und UX
• fail early, fail often
• robuster Prozess
• isolierte Komponenten
• enge Zusammenarbeit
• starker Austausch
• interdisziplinär
Die Herausforderung

Moderne Design Systems
…treffen Softwareentwicklung

Fundament für skalierbare Anwendungen:
Komponentenbasierte Softwareentwicklung
Moderne Design Systems treffen Softwareentwicklung

• …ist so alt wie Softwarearchitektur selbst
• Idee übertragen aus der Industrie
• abgeschlossen, black-box
• wohldefinierte Ein- und Ausgänge
• einfach testbar
• wiederverwendbar
• flexibel
• von Drittanbietern erhältlich
Komponentenbasierte Softwareentwicklung

Komponentenbasierte Softwareentwicklung
Click me![caption]="Click me!" (click)="…"
Clickety![caption]=“Clickety!" (click)="…"

• verwendet das Konzept komponentenbasierter
Softwareentwicklung
• erlaubt die Kapselung von CSS-Stilen
(ViewEncapsulation) zur Vermeidung von
monolithischem CSS
• eröffnet einen möglichen Migrationspfad auf Web
Components
Angular

Zu Beginn legen wir ein neues Angular-Projekt an.
Labs: http://bit.ly/ng-ds-labs
Lab 0

• Design System in Code abbilden
• Schnittstelle zwischen Design & Code
• isolierte Entwicklung von Komponenten
• Vorbereitung auf Unit Tests
• Dokumentation direkt an Komponenten
Storybook

• framework-agnostisch
• Open Source
• Verwaltet von der JS Foundation
• vielfältiges Plugin-Ökosystem
• Möglichkeit von Snapshot Tests (visuell, code)
Storybook

Storybook am konkreten Beispiel

Demo Time!
Storybook am konkreten Beispiel

Designer
• einfache Abnahme
• Testen am lebenden Subjekt
• Konsens
Storybook - wer profitiert davon?

Developer
• Edge Cases
• Visual Regression Testing
• schwierig zu erreichende States
• lebendige Docs
Storybook - wer profitiert davon?

Testing
• Mock Daten
• Automatisierung
• Eingrenzung auf Komponenten
Storybook - wer profitiert davon?

Designer
• einfache Abnahme
• Testen am lebenden
Subjekt
• Konsens
Developer
• Edge Cases
• Regression
Testing
• schwierig zu
erreichende
States
• lebendige Docs
Testing
• Mock Daten
• Automatisierung
• Eingrenzung auf
Komponenten
Storybook - wer profitiert davon?

Gesamtes Team
• gemeinsames Verständnis
• einfacherer Zugang zu Komponenten
• Übersicht und Dokumentation
Storybook - wer profitiert davon?

• Die Storybook-CLI erlaubt die Installation von
Storybook in bestehende Projekte durch ein einziges
Kommando
• sb init --use-npm
• Das verwendete Framework wird automatisch erkannt
und die Installation darauf angepasst
Storybook + Angular

• Zur einfachen Verwendung von Storybook verwenden
wir in diesem Workshop nützliche Vorlagen, die durch
diesen Befehl installiert werden:
• ng add @ngx-storybook/schematics
Storybook + Angular

Als nächstes fügen wir dem Projekt Storybook hinzu.
Labs: http://bit.ly/ng-ds-labs
Lab 1

• Browserbasiert mit nativen Apps
• Zusammenarbeit in Echtzeit
• Components, Constraints, Grids, uvm.
• Prototyping
• (rudimentäre) CSS-Generierung
• Kommerziell, kostenfrei nutzbar (für öffentliche
Projekte)
Figma: Komponentenbasiertes Design

Figma: Komponentenbasiertes Design

• Demo Time!
• Kommt mit zur Demo: bit.ly/ng-ds-figma
Figma: Komponentenbasiertes Design

• Komponenten-Modell
• Test von “Worst Case”-Werten
• Responsive Design im Tool
• Prototyping bildet Workflows ab
Figma: Zusammenspiel mit Developer-Workflows

Endprodukt

Endprodukt
Form Group Header
Input
Input
Button
Login
Background

• Komponentenbibliothek für Angular
• Viele vorgefertigte Steuerelemente im Material
Design
• Open source
• https://material.angular.io
Angular Material

Angular Material

Was können wir von
Angular Material lernen?
Angular Material

Steuerelemente sind in einzelne Module aufgeteilt
Angular Material

• Seperation of concerns: Trennung von Zuständigkeiten
(vs. unscharf geschnittenes „CoreModule“)
• Erlaubt dediziertes Nachladen einzelner Module per
dynamischem import()
• Anwendungsbündel wird auch im JiT-Modus kleiner
(verglichen zum Komplettimport)
• Refactoring-sicher: Interne Umstrukturierung von
Komponenten führt nur an Stelle des Moduls zum
Umbau (Fassade)
Vorteile der Modulauftrennung

• Ein Modul
• Eine (oder wenige) Komponenten
• Eine Story
• Erzeugung per Schematic:
• ng g @ngx-storybook/schematics:c <name>
1:1:1-Regel

Lab 2
• Ein neues Steuerelement (Button) per Schematic
einführen
• Input-Property für die Beschriftung der Schaltfläche
hinzufügen
• Input-Binding in Storybook testen
Beschriftung

Lab 2
Input-Binding hinzufügen
Reguläre Input-
Eigenschaft

Eine einfache Story…
Storybook
Gruppe
Name der Story
Überschrift erster Ebene|Ordner/Ordner/Ordner

Lab 2
Inputs können in Storybook durch props vorbelegt werden
Äquivalent zu
<app-button
[label]="'Submit'">

Als nächstes übertragen wir die vom Designer erstellten
CSS-Stile aus Figma auf unsere bestehende
ButtonComponent.
Labs: http://bit.ly/ng-ds-labs
Lab 3

http://bit.ly/ng-ds-figma
Figma: Komponentenbasiertes Design

Button-Hintergrund Styling
Lab 3

Button-Label Styling
Lab 3

Button-Label Positionierung
Lab 3

• machen Komponenten für Nicht-Entwickler
zugänglich
• Input Bindings über eine dedizierte UI befüllen
• verschiedenste Eingabemöglichkeiten
Storybook: Addon Knobs

Storybook: Addon Knobs

Knobs-Addon registrieren
Lab 4

Knobs zu Button hinzufügen
Lab 4
Eingabeart
Story für die
Verwendung
von Knobs
kennzeichnen
Bezeichnung
Standardwert

Storybook: Addon Knobs

Storybook: Addon Knobs

Storybook: Addon Knobs

Storybook: Addon Knobs

Storybook: Addon Knobs

Storybook: Addon Knobs
Groups

• Kombiniertes Steuerelement aus Label und
Eingabeelement
• Ziel: Alle Eigenschaften per Knob steuern
Input
TypeLabel
Placeholder
'text' | 'email' | 'password'string
string

Als nächstes wollen wir etwas mehr praktische
Erfahrung mit Storys und weiteren Knob-Typen
sammeln. Dazu legen wir nun die Input-Component an.
Labs: http://bit.ly/ng-ds-labs
Lab 5

Knob-Typen
Lab 5
Select-Knob
Text-Knob

Containerkomponente
Form Group
Überschrift
Projizierter
Inhalt

Containerkomponente
Form Group
Spalten konfigurierbar

• Container-Komponente mit Content-Projection
• ModuleMetadata-Decorator um Module in der Story
zu importieren
• Storybook bringt ein eigenes Angular-Modul mit
• Definition von Komponenten sowie Verwendung von
Inline-Templates sind auch in Storys möglich
• über verwendete Module muss Storybook Bescheid
wissen
Form Group

Wir implementieren eine Story für eine Komponente,
deren Inhalt von der äußeren Verwendung abhängig ist.
Labs: http://bit.ly/ng-ds-labs
Lab 6

Lab 6
Projizierter Inhalt Spaltendefinition

Lab 6
Inline-
Templates
sind möglich
Deklaration von
Abhängigkeiten

Login-Komponente

• Input-Properties für Username und Passwort
• Decorator für Imports
• Mocks in Storybook
Login-Komponente

• Dieselben Mocks, die für Storybook implementiert
werden, können unverändert auch für Unit Tests
verwendet werden (und umgekehrt)
Mocking

Lab 7
Mock-Service

Lab 7
Login-Komponente

Lab 7
Story

Visual Regression Testing
Lab 8

Visual Regression Testing
Lab 8

Visual Regression Testing
Lab 8

Visual Regression Testing
Lab 8

Visual Regression Testing
Lab 8

Wrap-up – Technologien
– überall anwendbar –

1. Der Designer erstellt eine Komponente in Figma
2. Der Entwickler generiert ein passendes Modul, eine
Komponente sowie eine Story
3. Der Entwickler übernimmt die CSS-Stile aus Figma
4. Der Entwickler implementiert den HTML-Aufbau und
übernimmt die Logik
5. Der Entwickler implementiert eine passende Story
(und Unit-Tests)
6. Review mit dem Designer, bei Bedarf die obigen
Schritte wiederholen
Wrap-up – Workflow (auch für kleine Testballons)

• echte Komponenten
• modulare, isolierte Entwicklung
• einfachere Wartbarkeit
• brown field-geeignet
• Dokumentation
• konsistentere User Experience
• Bonus: Unit-Tests profitieren von Mock-Daten
Wrap-Up - Design Systems mit Storybook

Vielen Dank!
User Experience Architect
Andreas Wissel
🐦 @andreas_wissel
📨 business@andreaswissel.com
✍ andreaswissel.com
Christian Liebel
🐦 @christianliebel
📨 christian.liebel@thinktecture.com
✍ christianliebel.com
Consultant

Repo
http://bit.ly/ng-ds
Labs
http://bit.ly/ng-ds-labs
Figma
http://bit.ly/ng-ds-figma
Slides
http://bit.ly/ng-ds-slides

https://twitter.com/DougCollinsUX/status/1021789284846788609
https://www.htc.com/us/newsroom/2019-03-26/
https://www.heise.de/select/ix/2017/11/1509663159694094
https://www.samsung.com/sg/refrigerators/family-hub-rf56n9740sg/
https://www.apple.com/shop/buy-watch/apple-watch-series-3/38mm-gps-silver-aluminum-white-
sport-band
https://support.apple.com/kb/sp770?locale=de_DE
https://www.apple.com/de/shop/buy-ipad/ipad-pro
https://www.apple.com/de/shop/buy-mac/macbook-pro
https://www.apple.com/de/shop/buy-mac/imac
https://www.microsoft.com/de-de/p/surface-studio-2/8sbjxm0m58t4
https://twitter.com/rsg/status/1148421102009344000
https://twitter.com/Talk_To_The_Hat/status/1166460235982233600
https://www.reddit.com/r/CrappyDesign/comments/c55puw/piss_poor_location/
https://twitter.com/DougCollinsUX/status/1122881214040420352
Quellen