Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen Anwendung

Mit den stetig wachsenden Möglichkeiten, die Cross-Platform-Anwendungen bieten, wachsen auch die Anforderungen an deren Design. Skalierbarkeit, Flexibilität und Wandelbarkeit gehören zu den Grundprinzipien eines modernen User-Interfaces. Andreas Wissel und Christian Liebel erarbeiten mit Ihnen in diesem Workshop anhand von Praxisbeispielen einen robusten Workflow. Mit Storybook und Angular lassen sich so isolierte, test- und wartbare Komponenten im Handumdrehen umsetzen. Ihre Designer und Entwickler werden es lieben.

Transcript

1. Robuste Design Systems mit Storybook und Angular Vom Konzept zur lebendigen Anwendung Andreas Wissel @andreas_wissel User Experience Architect Christian Liebel @christianliebel Consultant
2. • 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
3. User Experience Architect Andreas Wissel Enterprise UX ❤ Design Systems # Cross-Platform Design Strategies Freelancer ✍ andreaswissel.com @andreas_wissel
4. User Experience Architect Andreas Wissel • Designer-Developer Schnittstelle • Workflow Optimierung • Beratung & Begleitung von Redesigns • Fokus auf Design Systems mit Storybook
5. Consultant Christian Liebel Consulting cross-platform & SaaS ❤ Progressive Web Apps & Angular ' MVP & GDE Thinktecture AG ✍ christianliebel.com @christianliebel
6. 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
7. Repository: http://bit.ly/ng-ds Setup erledigt?
8. • 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?
9. Menschen denken in Mustern User Experience im Alltag
10. Menschen denken in Mustern User Experience im Alltag
11. Menschen denken in Mustern User Experience im Alltag
12. Und ohne Muster sind wir verloren.. User Experience im Alltag
13. • Features müssen sichtbar sein • Features müssen benutzbar sein • UX schafft Zugang: • Discoverability • Usability • Accessibility User Experience für Entwickler Access denied
14. 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.
15. Kollaboration ⚡ Fachbereiche Konsistenz ⚡ Projektalltag Skalierbarkeit ⚡ Agile Prozesse Menschen.
16. Design Systems Komponenten- Sammlung Dokumentation spezifische Use-Cases
17. Moment mal… Ein alter Bekannter?
18. • Web-only (weniger geeignet für Desktop oder native- like) • kein Komponentensystem • monolithisches CSS Beispiel: Bootstrap
19. „Früher war alles einfacher“
20. relevante Zielplattformen früher: Windows oder Web
21. relevante Zielplattformen heute: Windows, macOS, Web/PWA, iOS, Android
22. Doch damit nicht genug…
23. Verschiedenste Anzeige- und Eingabemöglichkeiten
24. • 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
25. 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 + }
26. • 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”
27. • iterative Entwicklung von Code und UX • fail early, fail often • robuster Prozess • isolierte Komponenten • enge Zusammenarbeit • starker Austausch • interdisziplinär Die Herausforderung
28. Moderne Design Systems
 …treffen Softwareentwicklung
29. Fundament für skalierbare Anwendungen: Komponentenbasierte Softwareentwicklung Moderne Design Systems treffen Softwareentwicklung
30. • …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. Komponentenbasierte Softwareentwicklung Click me! [caption]="Click me!" (click)="…" Clickety! [caption]=“Clickety!" (click)="…"
32. • 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
33. Zu Beginn legen wir ein neues Angular-Projekt an. Labs: http://bit.ly/ng-ds-labs Lab 0
34. • Design System in Code abbilden • Schnittstelle zwischen Design & Code • isolierte Entwicklung von Komponenten • Vorbereitung auf Unit Tests • Dokumentation direkt an Komponenten Storybook
35. • framework-agnostisch • Open Source • Verwaltet von der JS Foundation • vielfältiges Plugin-Ökosystem • Möglichkeit von Snapshot Tests (visuell, code) Storybook
36. Designer • einfache Abnahme • Testen am lebenden Subjekt • Konsens Storybook - wer profitiert davon?
37. Developer • Edge Cases • Visual Regression Testing • schwierig zu erreichende States • lebendige Docs Storybook - wer profitiert davon?
38. Testing • Mock Daten • Automatisierung • Eingrenzung auf Komponenten Storybook - wer profitiert davon?
39. 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?
40. Gesamtes Team • gemeinsames Verständnis • einfacherer Zugang zu Komponenten • Übersicht und Dokumentation Storybook - wer profitiert davon?
41. Storybook am konkreten Beispiel
42. Demo Time! Storybook am konkreten Beispiel
43. • 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
44. • 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
45. Als nächstes fügen wir dem Projekt Storybook hinzu. Labs: http://bit.ly/ng-ds-labs Lab 1
46. • 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
47. Figma: Komponentenbasiertes Design
48. • Demo Time! Figma: Komponentenbasiertes Design
49. • Komponenten-Modell • Test von “Worst Case”-Werten • Responsive Design im Tool • Prototyping bildet Workflows ab Figma: Zusammenspiel mit Developer-Workflows
50. Endprodukt
51. Endprodukt Form Group Header Input Input Button Login Background
52. • Komponentenbibliothek für Angular • Viele vorgefertigte Steuerelemente im Material Design • Open source • https://material.angular.io Angular Material
53. Angular Material
54. Was können wir von
 Angular Material lernen? Angular Material
55. Steuerelemente sind in einzelne Module aufgeteilt Angular Material
56. • 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
57. • Ein Modul • Eine (oder wenige) Komponenten • Eine Story • Erzeugung per Schematic: • ng g @ngx-storybook/schematics:c <name> 1:1:1-Regel
58. 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
59. Lab 2 Input-Binding hinzufügen Reguläre Input- Eigenschaft
60. Eine einfache Story… Storybook Gruppe Name der Story Überschrift erster Ebene|Ordner/Ordner/Ordner
61. Lab 2 Inputs können in Storybook durch props vorbelegt werden Äquivalent zu <app-button [label]="'Submit'">
62. 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
63. http://bit.ly/ng-ds-figma Figma: Komponentenbasiertes Design
64. Button-Hintergrund Styling Lab 3
65. Button-Label Styling Lab 3
66. Button-Label Positionierung Lab 3
67. • machen Komponenten für Nicht-Entwickler zugänglich • Input Bindings über eine dedizierte UI befüllen • verschiedenste Eingabemöglichkeiten Storybook: Addon Knobs
68. Storybook: Addon Knobs
69. Knobs-Addon registrieren Lab 4
70. Knobs zu Button hinzufügen Lab 4 Eingabeart Story für die Verwendung von Knobs kennzeichnen Bezeichnung Standardwert
71. Storybook: Addon Knobs
72. Storybook: Addon Knobs
73. Storybook: Addon Knobs
74. Storybook: Addon Knobs
75. Storybook: Addon Knobs
76. Storybook: Addon Knobs Groups
77. • Kombiniertes Steuerelement aus Label und Eingabeelement • Ziel: Alle Eigenschaften per Knob steuern Input Type Label Placeholder 'text' | 'email' | 'password' string string
78. 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
79. Knob-Typen Lab 5 Select-Knob Text-Knob
80. Containerkomponente Form Group Überschrift Projizierter Inhalt
81. Containerkomponente Form Group Spalten konfigurierbar
82. • 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
83. 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
84. Lab 6 Projizierter Inhalt Spaltendefinition
85. Lab 6 Inline- Templates sind möglich Deklaration von Abhängigkeiten
86. Login-Komponente
87. • Input-Properties für Username und Passwort • Decorator für Imports • Mocks in Storybook Login-Komponente
88. • Dieselben Mocks, die für Storybook implementiert werden, können unverändert auch für Unit Tests verwendet werden (und umgekehrt) Mocking
89. Lab 7 Mock-Service
90. Lab 7 Login-Komponente
91. Lab 7 Story
92. Visual Regression Testing Lab 8
93. Visual Regression Testing Lab 8
94. Visual Regression Testing Lab 8
95. Visual Regression Testing Lab 8
96. Visual Regression Testing Lab 8
97. Wrap-up – Technologien – überall anwendbar –
98. 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)
99. • 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
100. Vielen Dank! User Experience Architect Andreas Wissel @andreas_wissel business@andreaswissel.com ✍ andreaswissel.com Christian Liebel @christianliebel christian.liebel@thinktecture.com ✍ christianliebel.com Consultant
101. 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
102. 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