Schick, performant und bitte auf allen Plattformen verfügbar! Moderne Anwendungen verlangen ihren Entwicklern einiges ab. Wo früher noch die Vorarbeit von Anbietern wie Microsoft in Form von UI-Baukästen geleistet wurde, muss heute selbst Hand angelegt werden. In dieser Session von Andreas Wissel erfahren Sie, wie Ihr Team mit robusten Workflows in einer agilen Welt mit diesen Anforderungen Schritt hält. Angefangen bei Grundkonzepten der User Experience über die Bausteine eines modernen Design Systems bis hin zur fertigen Implementation. Mit diesem Handwerkszeug schaffen Sie die Grundlage für konsistente, schicke und performante Oberflächen.

1. Andreas Wissel
@andreas_wissel
User Experience Architect
Robuste Design Systems mit Storybook und Angular

2. Robuste Design Systems mit Storybook und Angular
• Design Systems Intr
o
• Tooling
• framework-agnostisc
h
• am Beispiel Angula
r
• platform-unabhängig
Was euch erwartet
2
• technischer Deep Div
e
• Angular Deep Div
e
Was euch nicht erwartet

3. Robuste Design Systems mit Storybook und Angular
User Experience Architect
Andreas Wissel
3
💡 Collaboration & Communicatio
n
❤ Design System
s
👨💻 Human-centric workflows
🏢 Freelance Consultan
t
✍ andreaswissel.com
🐦 @andreas_wissel

4. Robuste Design Systems mit Storybook und Angular
User Experience Architect
Andreas Wissel
4
• Designer-Developer-Schnittstell
e
• Workflow-Optimierun
g
• Product-led growt
h
• Design Systems mit Storybook

5. Robuste Design Systems mit Storybook und Angular
Wenn's mal klappert
5

6. Robuste Design Systems mit Storybook und Angular
Repository:
bit.ly/jsdays2021-repo
Setup
6

7. Robuste Design Systems mit Storybook und Angular
Bringt gerne jederzeit eure
Projektbeispiele ei
n
Feedback, Fragen
:
bit.ly/jsdays2021-mir
o
pw: jsdays21
Der Workshop gehört euch!
7
Agenda
:
9:10 - 10:30
👨🏫 Workshop Teil 1 - mehr Intr
o
10:30 - 10:45
☕ Kaffeepaus
e
10:45 - 12:30
👩💻 Workshop Teil 2 - mehr Hands-on

8. Robuste Design Systems mit Storybook und Angular
• Dachbegrif
f
• “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?
8

9. Robuste Design Systems mit Storybook und Angular
UX: Ein Musterbeispiel
9

10. Robuste Design Systems mit Storybook und Angular
Menschen denken in Mustern
10
User Experience im Alltag

11. Robuste Design Systems mit Storybook und Angular
Menschen denken in Mustern
11
User Experience im Alltag

12. Robuste Design Systems mit Storybook und Angular
Menschen denken in Mustern
12
User Experience im Alltag

13. Robuste Design Systems mit Storybook und Angular
Menschen sind Gewohnheitstiere.
13

14. Robuste Design Systems mit Storybook und Angular
Und ohne Muster sind wir verloren..
14
User Experience im Alltag

15. Robuste Design Systems mit Storybook und Angular
• macht Features sichtba
r
• macht Features benutzba
r
• reduziert kognitive Las
t
• schafft Zugang
:
• Usabilit
y
• Accessibility
User Experience...
15
Access
denied

16. Robuste Design Systems mit Storybook und Angular
Verstanden
.
Aber wie passiert das trotzdem?
16

17. Robuste Design Systems mit Storybook und Angular
Der übliche Arbeitsmodus
17
Konzeption
Entwicklung
Test
Mit etwas Glück unterhalten sich hier Menschen miteinande
r
... aber meistens ist das eher nicht der Fall.

18. Robuste Design Systems mit Storybook und Angular
• Je besser wir miteinander kommunizieren, desto mehr
gemeinsames Verständnis entwickeln wir für das Produkt.
• Enge Zusammenarbeit und gemeinsames Verständnis
führt zu guter User Experience
Die Arbeitsthese
18
Dieser Talk soll das nötige Handwerkszeug für enge
Zusammenarbeit geben

19. Robuste Design Systems mit Storybook und Angular
Der gewünschte Arbeitsmodus
19
Iterative Entwicklung
der Komponente
ständiger Sync zwischen
Entwicklung und Design

20. Robuste Design Systems mit Storybook und Angular
Der Workflow den wir suchen
20
sichert Konsistenz langfristi
g
für alle verständlich
nicht in Stein gemeißel
t
einfach integrierbar

21. Robuste Design Systems mit Storybook und Angular
Der erste Baustein: Design System
21
Sammlung aller
Komponenten
klar definierte
Use-Cases
Zusammenspiel
aller Disziplinen

22. Robuste Design Systems mit Storybook und Angular
Moment mal…
22
gibt es sowas nicht schon?

23. Robuste Design Systems mit Storybook und Angular
23
• generische Lösun
g
• Komponenten vorhande
n
• Individualisierung: nur innerhalb der Grenzen
Beispiel: Angular Material

24. Robuste Design Systems mit Storybook und Angular
• generische Lösun
g
• geht nicht auf die Bedürfnisse der Organisation ei
n
• Komponenten vorhande
n
• eine gute Sache - aber nur eine Teilmeng
e
• Individualisierung: nur innerhalb der Grenze
n
• nur das anpassbar, was die Library zulässt
Beispiel: Angular Material
24

25. Robuste Design Systems mit Storybook und Angular
Moderne Design Systems: Bausteine
25
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
+ }

26. Robuste Design Systems mit Storybook und Angular
• iterative Entwicklung von Code und U
X
• fail early, fail ofte
n
• robuster Prozes
s
• isolierte Komponente
n
• enge Zusammenarbei
t
• starker Austausc
h
• interdisziplinär
Die Herausforderung
26

27. Robuste Design Systems mit Storybook und Angular
Moderne Design Systems
…treffen Softwareentwicklung
27

28. Robuste Design Systems mit Storybook und Angular
Fundament für skalierbare Anwendungen:
Komponentenbasierte Softwareentwicklung
Moderne Design Systems treffen Softwareentwicklung
28

29. Robuste Design Systems mit Storybook und Angular
• …ist so alt wie Softwarearchitektur selbs
t
• Idee übertragen aus der Industri
e
• abgeschlossen, black-bo
x
• wohldefinierte Ein- und Ausgäng
e
• einfach testba
r
• wiederverwendba
r
• flexibe
l
• von Drittanbietern erhältlich
Komponentenbasierte Softwareentwicklung
29

30. Robuste Design Systems mit Storybook und Angular
Komponentenbasierte Softwareentwicklung
30
Click me!
[caption]="Click me!" (click)="…"
Clickety!
[caption]=“Clickety!" (click)="…"

31. Robuste Design Systems mit Storybook und Angular
• verwendet das Konzept komponentenbasierter
Softwareentwicklun
g
• erlaubt die Kapselung von CSS-Stilen
(ViewEncapsulation) zur Vermeidung von monolithischem
CS
S
• eröffnet einen möglichen Migrationspfad auf Web
Components
Angular
31

32. Robuste Design Systems mit Storybook und Angular
Zu Beginn legen wir ein neues Angular-Projekt an
.
Labs: http://bit.ly/jsdays2021-labs
Lab 0
32

33. Robuste Design Systems mit Storybook und Angular
• “UI component explorer for developers
”
• Design System in Code abbilde
n
• Schnittstelle zwischen Design & Cod
e
• isoliertes entwickeln und testen von Komponente
n
• Vorbereitung auf Unit Test
s
• Dokumentation direkt an Komponenten
Infrastruktur: Storybook
33

34. Robuste Design Systems mit Storybook und Angular
• framework-agnostisc
h
• Open Sourc
e
• Verwaltet von der JS Foundatio
n
• vielfältiges Plugin-Ökosyste
m
• Möglichkeit von Snapshot Tests (visuell, code
)
• zero config
Storybook
34

35. Robuste Design Systems mit Storybook und Angular
Storybook am konkreten Beispiel
35

36. Robuste Design Systems mit Storybook und Angular
Demo Time!
Storybook am konkreten Beispiel
36

37. Robuste Design Systems mit Storybook und Angular
• Die Storybook-CLI erlaubt die Installation von Storybook in
bestehende Projekte durch ein einziges Kommand
o
• @storybook/cli init
• Das verwendete Framework wird automatisch erkannt und
die Installation darauf angepass
t
• für einen Großteil der Projekte funktioniert der zero config
Ansatz
Storybook + Angular
37

38. Robuste Design Systems mit Storybook und 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
38

39. Robuste Design Systems mit Storybook und Angular
Als nächstes fügen wir dem Projekt Storybook hinzu
.
Labs: http://bit.ly/jsdays2021-labs
Lab 1
39

40. Robuste Design Systems mit Storybook und Angular
• Browserbasiert mit nativen App
s
• Zusammenarbeit in Echtzei
t
• Components, Constraints, Grids, uvm
.
• Prototypin
g
• (rudimentäre) CSS-Generierun
g
• Kommerziell, kostenfrei nutzbar (für öffentliche Projekte)
Figma: Komponentenbasiertes Design
40

41. Robuste Design Systems mit Storybook und Angular
Figma: Komponentenbasiertes Design
41

42. Robuste Design Systems mit Storybook und Angular
• Demo Time
!
• Kommt mit zur Demo: bit.ly/jsdays-2020-figma
Figma: Komponentenbasiertes Design
42

43. Robuste Design Systems mit Storybook und Angular
• Komponenten-Model
l
• Test von “Worst Case”-Werte
n
• Responsive Design im Too
l
• Prototyping bildet Workflows ab
Figma: Zusammenspiel mit Developer-Workflows
43

44. Robuste Design Systems mit Storybook und Angular
Endprodukt
44

45. Robuste Design Systems mit Storybook und Angular
Endprodukt
45
Form Group Header
Input
Input
Button
Login
Background

46. Robuste Design Systems mit Storybook und Angular
• Komponentenbibliothek für Angula
r
• Viele vorgefertigte Steuerelemente im Material Desig
n
• Open sourc
e
• https://material.angular.io
Angular Material
46

47. Robuste Design Systems mit Storybook und Angular
Angular Material
47

48. Robuste Design Systems mit Storybook und Angular
Was können wir von Angular Material lernen?
Angular Material
48

49. Robuste Design Systems mit Storybook und Angular
Steuerelemente sind in einzelne Module aufgeteilt
Angular Material
49

50. Robuste Design Systems mit Storybook und Angular
• Separation 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
50

51. Robuste Design Systems mit Storybook und Angular
• Ein Modu
l
• Eine (oder wenige) Komponente
n
• Eine Stor
y
• Erzeugung per Schematic
:
• ng g @ngx-storybook/schematics:c <name>
1:1:1-Regel
51

52. Robuste Design Systems mit Storybook und Angular
52
Lab 2
• Ein neues Steuerelement (Button) per Schematic
einführe
n
• Input-Property für die Beschriftung der Schaltfläche
hinzufüge
n
• Input-Binding in Storybook testen
Beschriftung

53. Robuste Design Systems mit Storybook und Angular
53
Lab 2
Input-Binding hinzufügen
Reguläre Input-
Eigenschaft

54. Robuste Design Systems mit Storybook und Angular
Eine erste Story
Storybook
54
Gruppe
Name der Story
Überschrift erster Ebene/Ordner/Ordner/Ordner

55. Robuste Design Systems mit Storybook und Angular
55
Lab 2
Inputs können in Storybook durch props vorbelegt werden
Wiederverwendbare
Properties mit Args-
Syntax
Äquivalent z
u
<app-button
[label]="'Submit'">

56. Robuste Design Systems mit Storybook und Angular
Wir implementieren eine erste eigene Komponente
.
Labs: bit.ly/jsdays2021-labs
Lab 2
56

57. Robuste Design Systems mit Storybook und Angular
Lab 2: Unsere erste eigene Komponente
57

58. Robuste Design Systems mit Storybook und Angular
• offener ES6-basierter Standar
d
• Augenmerk auf
Wiederverwendbarkei
t
• Integration mit anderen Tools
geplant
Storybook: Component Story Format
58

59. Robuste Design Systems mit Storybook und Angular
☕
Pause
59

60. Robuste Design Systems mit Storybook und Angular
Lab 3: "Make it pop"
60
Wir stylen mithilfe von Figma die Button-Komponente

61. Robuste Design Systems mit Storybook und Angular
Als nächstes übertragen wir die vom Designer erstellten
CSS-Stile aus Figma auf unsere bestehende
ButtonComponent
.
Labs: bit.ly/jsdays2021-labs
Lab 3
61

62. Robuste Design Systems mit Storybook und Angular
Button-Hintergrund Stylin
g
Lab 3
62

63. Robuste Design Systems mit Storybook und Angular
Button-Label Stylin
g
Lab 3
63

64. Robuste Design Systems mit Storybook und Angular
Button-Label Positionierun
g
Lab 3
64

65. Robuste Design Systems mit Storybook und Angular
Lab 3
65

66. Robuste Design Systems mit Storybook und Angular
• machen Komponenten für Nicht-Entwickler zugänglic
h
• Input Bindings über eine dedizierte UI befülle
n
• verschiedenste Eingabemöglichkeite
n
• werden automatisch beim Erstellen von Properties (Args)
generiert
• Testdaten können in Unit-/E2E-Tests wiederverwendet
werden
Storybook: Controls
66

67. Robuste Design Systems mit Storybook und Angular
Storybook: Controls
67

68. Robuste Design Systems mit Storybook und Angular
• der Typ des Controls wird wenn möglich aus dem Binding
oder dessen Default-Wert abgeleite
t
• weitere Typen sind konfigurierba
r
• auch Controls die nicht direkt zu einer Komponente
gehören sind möglich (bspw. Demo-Daten für komplexe
Stories)
Storybook: Typen von Controls
68

69. Robuste Design Systems mit Storybook und Angular
Storybook: Typen von Controls
69

70. Robuste Design Systems mit Storybook und Angular
Storybook: Typen von Controls
70

71. Robuste Design Systems mit Storybook und Angular
Storybook: Typen von Controls
71

72. Robuste Design Systems mit Storybook und Angular
Storybook: Typen von Controls
72

73. Robuste Design Systems mit Storybook und Angular
Storybook: Typen von Controls
73

74. Robuste Design Systems mit Storybook und Angular
74
Storybook: Typen von Controls
Groups

75. Robuste Design Systems mit Storybook und Angular
75
Lab 4
Inputs können in Storybook durch props vorbelegt werden
Wiederverwendbare
Properties mit Args-
Syntax
Äquivalent z
u
<app-button
[label]="'Submit'">

76. Robuste Design Systems mit Storybook und Angular
Controls: Simpel, aber mächtig
Lab 4
76
spezifischer Typ
Namen und
Typen werden
aus Args
generiert
Standardwerte
eigener Name

77. Robuste Design Systems mit Storybook und Angular
bit.ly/jsdays2021-labs
Lab 4
77

78. Robuste Design Systems mit Storybook und Angular
Lab 4: Controls
78

79. Robuste Design Systems mit Storybook und Angular
Und, wie war's?
79

80. Robuste Design Systems mit Storybook und Angular
• wichtigstes Standbein, ohne Dokumentation keine
Akzeptan
z
• Varianten in Storyboo
k
• DocsPag
e
• MD
X
• Doc Blocks
Storybook: Dokumentation
80

81. Robuste Design Systems mit Storybook und Angular
• automatisch generier
t
• zero-config Ansat
z
• im Addon Docs enthalte
n
• Dokumentation direkt an
Komponenten
Storybook: DocsPage
81

82. Robuste Design Systems mit Storybook und Angular
• Bindings und Methoden werden
automatisch dokumentier
t
• Dokumentation bzw. Beschreibung
wird direkt an der Angular-
Komponente gepflegt
Storybook: Dokumentation der ButtonComponent
82

83. Robuste Design Systems mit Storybook und Angular
Um die Docs zu generieren, muss der Storybook-Prozess
einmalig durchgestartet werden. Compodoc wird nur zu
Beginn einmalig ausgeführt.
Lab 5: Nota bene
83

84. Robuste Design Systems mit Storybook und Angular
Zum Abschluss der Button-Komponente wollen wir diese
noch sauber dokumentieren.
Labs: bit.ly/jsdays2021-labs
Lab 5
84

85. Robuste Design Systems mit Storybook und Angular
Button-Story mit Docs und Controls
Lab 5
85

86. Robuste Design Systems mit Storybook und Angular
• als nächstes wollen wir eine Komponente bauen, die sich
aus mehreren Komponenten zusammensetz
t
• hierbei machen wir vom Konzept der Content Projection
Gebrauch (im Storybook-Sprech auch composite
components genannt)
Komposition von Komponenten
86

87. Robuste Design Systems mit Storybook und Angular
• Kombiniertes Steuerelement aus Label und
Eingabeelemen
t
• Ziel: Alle Eigenschaften per Control steuern
Input
87
Type
Label
Placeholder
'text' | 'email' | 'password'
string
string

88. Robuste Design Systems mit Storybook und Angular
Content Projection
Form Group
88
Überschrift
Projizierter
Inhalt

89. Robuste Design Systems mit Storybook und Angular
• Container-Komponente mit Content-Projectio
n
• ModuleMetadata-Decorator um Module in der Story zu
importiere
n
• Storybook bringt ein eigenes Angular-Modul mi
t
• Definition von Komponenten sowie Verwendung von Inline-
Templates sind auch in Storys möglic
h
• über verwendete Module muss Storybook Bescheid wissen
Form Group
89

90. Robuste Design Systems mit Storybook und Angular
Wir implementieren eine Story für eine Komponente, deren
Inhalt von der äußeren Verwendung abhängig ist
.
Labs: bit.ly/jsdays2021-labs
Lab 6
90

91. Robuste Design Systems mit Storybook und Angular
Die Input-Komponente
Lab 6
91

92. Robuste Design Systems mit Storybook und Angular
Lab 6
92
Projizierter Inhalt Spaltendefinition

93. Robuste Design Systems mit Storybook und Angular
Lab 6
93
Inline-
Templates
sind möglich
Deklaration von
Abhängigkeiten

94. Robuste Design Systems mit Storybook und Angular
Login-Komponente
94
Zusammenführung aller erstellten Komponenten

95. Robuste Design Systems mit Storybook und Angular
• Input-Properties für Username und Passwor
t
• Decorator für Import
s
• Mocks in Storybook
Login-Komponente
95

96. Robuste Design Systems mit Storybook und Angular
96
Lab 7
Login-Komponente und Mocks

97. Robuste Design Systems mit Storybook und Angular
• Dieselben Mocks, die für Storybook implementiert werden,
können dank Standard ES6 unverändert auch für Unit
Tests verwendet werden (und umgekehrt)
Mocking
97

98. Robuste Design Systems mit Storybook und Angular
98
Lab 7
Mock-Service

99. Robuste Design Systems mit Storybook und Angular
99
Lab 7
Story

100. Robuste Design Systems mit Storybook und Angular
Wrap-up – Technologien
100
– überall anwendbar –

101. Robuste Design Systems mit Storybook und Angular
1. Designer*in erstellt eine Komponente in Figm
a
2. Entwickler*in generiert ein passendes Modul, eine Komponente sowie
eine Stor
y
3. Entwickler*in übernimmt die CSS-Stile aus Figm
a
4. Entwickler*in implementiert den HTML-Aufbau und übernimmt die Logi
k
5. Entwickler*in implementiert eine passende Story (und Unit-Tests
)
6. Review mit der Designer*in, bei Bedarf die obigen Schritte wiederholen
Wrap-Up – Workflow (auch für kleine Testballons)
101

102. Robuste Design Systems mit Storybook und Angular
• echte Komponente
n
• ausgiebige Dokumentatio
n
• modulare, isolierte Entwicklun
g
• einfachere Wartbarkei
t
• brown field-geeigne
t
• konsistentere User Experienc
e
• Bonus: Unit-Tests profitieren von Mock-Daten
Wrap-Up - Design Systems mit Storybook
102

103. Robuste Design Systems mit Storybook und Angular
103
Vielen Dank!
🐦 @andreas_wisse
l
📨 business@andreaswissel.com
✍ andreaswissel.com

104. Robuste Design Systems mit Storybook und Angular
Repo
bit.ly/jsdays2021-repo
Labs
bit.ly/jsdays2021-labs
Figma
bit.ly/ng-ds-figma
Slides
bit.ly/jsdays2021-slides
104

105. Robuste Design Systems mit Storybook und Angular
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
105