Schick, performant und bitte auf allen Plattformen verfügbar! Moderne Anwendungen verlangen ihren Entwicklern einiges ab. Wo früher noch Platzhirsche wie Windows Forms und WPF mit ausgiebigen UI-Baukästen aufwarteten, muss heute selbst Hand angelegt werden. Damit das auch in Zeiten von agiler Entwicklung funktioniert, ohne sich im Detail zu verlieren, bedarf es eines robusten Workflows. Andreas Wissel zeigt Ihnen in dieser Session, wie Sie mit Angular und Storybook eine pragmatische, skalierbare Komponentenbibliothek aufbauen, die den Vorbildern großer Anbieter in nichts nachsteht. Sowohl isolierte Entwicklung als auch Testing und Dokumentation sind damit fester Bestandteil Ihres Workflows!

1. Andreas Wissel
@andreas_wissel
User Experience Architect
Figma,Storybook und Angular
Toolchain für plattformunabhängige UI-Entwicklung

2. Special Day Cross-Plattform Applications
Thema Sprecher Datum, Uhrzeit
Figma, Storybook und Angular: Toolchain für
plattformunabhängige UI-Entwicklung
Andreas Wissel
DO, 23. September 2021,
09.15 bis 10.15
Realtime Cross-Plattform-Applikationen mit
Angular, ASP.NET Core und SignalR
Fabian Gosebrink DO, 23. September 2021,
10.45 bis 11.45
Angular & Ionic –
Cross-Plattform aus einer Hand
Max Schulte DO, 23. September 2021,
12.15 bis 13.15
Electron.NET –
Neue Features, Tipps und Tricks
Gregor Biswanger DO, 23. September 2021,
15.30 bis 16.30
Electron, Capacitor, PWA –
was, wann, wie & warum?
Christian Liebel DO, 23. September 2021,
17.00 bis 18.00

3. Robuste Design Systems mit Storybook und Angular
• Design Systems Intro
• Tooling
• framework-agnostisch
• am Beispiel Angular
• platform-unabhängig
Was Sie erwartet
3
• technischer Deep Dive
• Angular Deep Dive
Was Sie nicht erwartet

4. Robuste Design Systems mit Storybook und Angular
User Experience Architect
Andreas Wissel
4
💡 Collaboration & Communication
❤ Design Systems
👨💻 Human-centric workflows
🏢 Freelance Consultant
✍ andreaswissel.com
🐦 @andreas_wissel

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

6. Robuste Design Systems mit Storybook und Angular
• 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 die
Anwender, Geschäftsprozesse und Umwelt beeinflussen
• Wichtig: nicht nur visuelles UI - sondern vor allem die
theoretische Architektur dahinter!
Was ist UX?
6

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

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

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

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

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

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

13. Robuste Design Systems mit Storybook und Angular
• Menschen denken in Systemen/Mustern
• mit ihnen sparen wir kostbare kognitive Ressourcen ein
• Gewohnheiten navigieren uns durch den Alltag
• Software ist heute Alltag
User Experience - viele bekannte Muster
13

14. Robuste Design Systems mit Storybook und Angular
• Features müssen verständlich
sein
• Features müssen benutzbar
sein
• in anderen Worten:
• Discoverability
• Usability
• Accessibility
User Experience für Developer
14
Access
denied

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

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

17. 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
17
Dieser Talk soll das nötige Handwerkszeug für enge
Zusammenarbeit geben

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

19. Robuste Design Systems mit Storybook und Angular
Der Workflow den wir suchen
19
sichert Konsistenz langfristig
für alle verständlich
nicht in Stein gemeißelt
einfach integrierbar

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

21. Robuste Design Systems mit Storybook und Angular
• echte, lebendige Komponenten
• direkt benutzbar
• gekapselt
• Use Case-spezifisch
• Technische Dokumentation
Design System: Was ist das?
21
• Styleguide
• statische, visuelle Dokumentation
der Marke
• “look & feel”
• Pattern Library
• Dokumentation der UI-Elemente

22. Robuste Design Systems mit Storybook und Angular
Moment mal..
22
Ein alter Bekannter?

23. Robuste Design Systems mit Storybook und Angular
• eine Plattform (Windows)
• eingeschränkte Geräteklassen (vorrangig Desktop)
• Microsoft Design-Sprache
• … Accessibility?
Windows Forms und WPF
23

24. Robuste Design Systems mit Storybook und Angular
“Warum muss das heute so kompliziert
sein?”
24

25. Robuste Design Systems mit Storybook und Angular
relevante Zielplattformen früher:
Windows oder Web
25

26. Robuste Design Systems mit Storybook und Angular
relevante Zielplattformen heute:
Windows, Mac, Linux, Web/PWA, iOS, Android
26

27. Robuste Design Systems mit Storybook und Angular
• extrem viele Geräteklassen
• verschiedenste Eingabemöglichkeiten
• viele Zielplattformen
• völlig neue Möglichkeiten
• völlig neue Fehlerquellen
Stetig wachsender Zielmarkt
27

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

29. Robuste Design Systems mit Storybook und Angular
Design Systems: Zusammenfassung
29
Sammlung aller
Komponenten
klar definierte
Use-Cases
Zusammenspiel
aller Disziplinen

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

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

32. Robuste Design Systems mit Storybook und Angular
Komponentenbasiertes Design
32

33. Robuste Design Systems mit Storybook und Angular
Komponentenbasiertes Design
33
Form Group Header
Input
Input
Button
Login Background

34. Robuste Design Systems mit Storybook und Angular
34

35. Robuste Design Systems mit Storybook und Angular
• Browserbasiert mit nativen Apps
• Zusammenarbeit in Echtzeit
• Prototyping
• (rudimentäre) CSS-Generierung
• Kommerziell, kostenfrei nutzbar (für öffentliche Projekte)
Figma: Komponentenbasiertes Design
35

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

37. Robuste Design Systems mit Storybook und Angular
Figma: Komponentenbasiertes Design
37
Demo Time
bit.ly/ngds-figma

38. Robuste Design Systems mit Storybook und Angular
• Komponenten-Modell
• Test von “Worst Case”-Werten
• Fluid Design im Tool
• Prototyping bildet Workflows ab
Figma: Zusammenspiel mit Developer-Workflows
38

39. Robuste Design Systems mit Storybook und Angular
39

40. Robuste Design Systems mit Storybook und Angular
• Design System in Code abbilden
• Schnittstelle zwischen Design & Code
• isolierte Entwicklung von Komponenten
• Vorbereitung auf Unit Tests
• Dokumentation direkt an Komponenten
Storybook
40

41. Robuste Design Systems mit Storybook und Angular
• framework-agnostisch
• Open Source
• Verwaltet von der JS Foundation
• vielfältiges Plugin-Ökosystem
• Möglichkeit von Snapshot Tests
Storybook
41

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

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

44. Robuste Design Systems mit Storybook und Angular
Designer
• einfache Abnahme &
Freigabe
• Testen am lebenden
Subjekt
• Konsens
Developer
• Edge Cases
• schwierig zu
erreichende States
• lebendige
Dokumentation
Tester
• Mock-Daten
• Automatisierung
• Eingrenzung auf
Komponenten
Storybook - wer profitiert davon?
44

45. Robuste Design Systems mit Storybook und Angular
Gesamtes Team
• “Shared Vocabulary”
• agile Dokumentation
• steigende Produktivität
Storybook - wer profitiert davon?
45

46. Robuste Design Systems mit Storybook und Angular
46

47. Robuste Design Systems mit Storybook und Angular
• verwendet das Konzept komponentenbasierter
Softwareentwicklung
• erlaubt die Kapselung von CSS (ViewEncapsulation) zur
Vermeidung von monolithischem CSS
• eröffnet einen möglichen Migrationspfad auf Web
Components
Angular
47

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

49. Robuste Design Systems mit Storybook und Angular
Login Komponente
49

50. Robuste Design Systems mit Storybook und Angular
Login Komponente
50
Form Group Header
Input
Input
Button
Login Background

51. Robuste Design Systems mit Storybook und Angular
• 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
• für einen Großteil der Projekte funktioniert der zero config
Ansatz
Storybook + Angular
51

52. Robuste Design Systems mit Storybook und Angular
Storybook: Aufbau von Stories
52

53. Robuste Design Systems mit Storybook und Angular
Die Button-Komponente in Storybook mit Angular
Live Coding
53

54. Robuste Design Systems mit Storybook und Angular
Wrap-Up: Technologien
54
Universell einsetzbar

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

56. Robuste Design Systems mit Storybook und Angular
56
User Experience Architect
Andreas Wissel
🐦 @andreas_wissel
📨 business@andreaswissel.com
✍ andreaswissel.com
Vielen Dank!

57. Robuste Design Systems mit Storybook und Angular
57
Figma Projekt:
bit.ly/ngds-figma
Repository:
bit.ly/b2021f-repo
Slides:
bit.ly/b2021f-slides
Links

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