design-systems-storybook-jsdays-2021.pdf
0 gefällt mir101 aufrufe
Das Dokument beschreibt einen Workshop zur Erstellung robuster Design-Systeme mit Storybook und Angular, der sich auf die Optimierung der Zusammenarbeit zwischen Design und Entwicklung konzentriert. Es werden verschiedene Aspekte von User Experience, interdisziplinären Arbeitsflüssen und die Nutzung von Storybook zur Isolation und Dokumentation von UI-Komponenten behandelt. Das Ziel ist die Schaffung von skalierbaren, gut unterstützten Design-Systemen, die Usability und Zugänglichkeit fördern.
![Robuste Design Systems mit Storybook und Angular
Komponentenbasierte Softwareentwicklung
34
Click me!
[caption]="Click me!" (click)="…"
Clickety!
[caption]=“Clickety!" (click)="…"](https://image.slidesharecdn.com/design-systems-storybook-jsdays-2021-220322222339/85/design-systems-storybook-jsdays-2021-pdf-34-320.jpg)
![Robuste Design Systems mit Storybook und Angular
59
Lab 2
Inputs können in Storybook durch props vorbelegt werden
Wiederverwendbare
Properties mit Args-Syntax
Äquivalent zu
<app-button
[label]="'Submit'">](https://image.slidesharecdn.com/design-systems-storybook-jsdays-2021-220322222339/85/design-systems-storybook-jsdays-2021-pdf-59-320.jpg)
![Robuste Design Systems mit Storybook und Angular
79
Lab 4
Inputs können in Storybook durch props vorbelegt werden
Wiederverwendbare
Properties mit Args-Syntax
Äquivalent zu
<app-button
[label]="'Submit'">](https://image.slidesharecdn.com/design-systems-storybook-jsdays-2021-220322222339/85/design-systems-storybook-jsdays-2021-pdf-79-320.jpg)
design-systems-storybook-jsdays-2021.pdf
- 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 Intro • Tooling • framework-agnostisch • am Beispiel Angular • platform-unabhängig Was euch erwartet 2 • technischer Deep Dive • Angular Deep Dive Was euch nicht erwartet
- 3. Robuste Design Systems mit Storybook und Angular User Experience Architect Andreas Wissel 3 💡 Collaboration & Communication ❤ Design Systems 👨💻 Human-centric workflows 🏢 Freelance Consultant ✍ andreaswissel.com 🐦 @andreas_wissel
- 4. Robuste Design Systems mit Storybook und Angular User Experience Architect Andreas Wissel 4 • Designer-Developer-Schnittstelle • Workflow-Optimierung • Product-led growth • 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/jsd22s-repo Setup 6
- 7. Robuste Design Systems mit Storybook und Angular Bringt gerne jederzeit eure Projektbeispiele ein Feedback,Fragen: bit.ly/jsd22miro pw: jsdays22 Der Workshop gehört euch! 7 Agenda: 9 : 10 - 10 : 30 👨🏫 Workshop Teil 1 - mehr Intro 10 : 30 - 10 : 45 ☕ Kaffeepause 10 : 45 - 12 : 30 👩💻 Workshop Teil 2 - mehr Hands-on
- 8. 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 Anwender, Geschäftsprozesse und Umwelt beeinflussen Was ist UX? 8
- 9. Robuste Design Systems mit Storybook und Angular Soweit die Theorie. Wie sieht die Praxis aus? 9
- 10. Robuste Design Systems mit Storybook und Angular 10 UX von Alltagsgegenständen
- 11. Robuste Design Systems mit Storybook und Angular 11 UX von Alltagsgegenständen
- 12. Robuste Design Systems mit Storybook und Angular 12 UX von Alltagsgegenständen
- 13. Robuste Design Systems mit Storybook und Angular Menschen denken in Mustern 13 User Experience im Alltag
- 14. Robuste Design Systems mit Storybook und Angular Menschen denken in Mustern 14 User Experience im Alltag
- 15. Robuste Design Systems mit Storybook und Angular Menschen denken in Mustern 15 User Experience im Alltag
- 16. Robuste Design Systems mit Storybook und Angular Menschen sind Gewohnheitstiere. 16
- 17. Robuste Design Systems mit Storybook und Angular Und ohne Muster sind wir verloren.. 17 User Experience im Alltag
- 18. Robuste Design Systems mit Storybook und Angular Und ohne Muster sind wir verloren.. 18 Spot the difference!
- 19. Robuste Design Systems mit Storybook und Angular • macht Features sichtbar • macht Features benutzbar • reduziert kognitive Last • schafft Zugang: • Usability • Accessibility User Experience... 19 Access denied
- 20. Robuste Design Systems mit Storybook und Angular Verstanden. Aber wie passiert das trotzdem? 20
- 21. Robuste Design Systems mit Storybook und Angular Der übliche Arbeitsmodus 21 Konzeption Entwicklung Test Mit etwas Glück unterhalten sich hier Menschen miteinander ...aber meistens ist das eher nicht der Fall.
- 22. 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 und besserem Code Problem: Fehlende Kommunikation 22 In diesem Workshop erarbeiten wir das Handwerkszeug für enge Zusammenarbeit.
- 23. Robuste Design Systems mit Storybook und Angular Der gewünschte Arbeitsmodus: Kontinuität 23 Konzeption Entwicklung Test Alle Beteiligten liefern ständiges Feedback zum Inkrement ständiger Sync zwischen Design,Development,Testing
- 24. Robuste Design Systems mit Storybook und Angular Der Workflow den wir suchen.. 24 ...sichert Konsistenz im Produkt langfristig ... ist für alle verständlich ... bringt alle an einen Tisch ... ist auf die Anforderungen anpassbar
- 25. Robuste Design Systems mit Storybook und Angular Bauteile unseres Workflows 25 Interdisziplinäre Deliverables klare Dokumentation der Fachlichkeit Sammlung aller Komponenten
- 26. Robuste Design Systems mit Storybook und Angular Moment mal… 26 Gibt es sowas nicht schon?
- 27. Robuste Design Systems mit Storybook und Angular 27 • generische Lösung • Komponenten vorhanden • Individualisierung: nur innerhalb der Grenzen Beispiel: Angular Material
- 28. Robuste Design Systems mit Storybook und Angular • generische Lösung • geht nicht auf die Bedürfnisse der Organisation ein • Komponenten vorhanden • eine gute Sache - aber nur eine Teilmenge • Individualisierung: nur innerhalb der Grenzen • nur das anpassbar, was die Library zulässt Beispiel: Angular Material 28
- 29. Robuste Design Systems mit Storybook und Angular Moderne Design Systems: Bausteine 29 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 + }
- 30. Robuste Design Systems mit Storybook und Angular • iterative Entwicklung von Code und UX • fail early, fail often • robuster Prozess • isolierte Komponenten • enge Zusammenarbeit • starker Austausch • interdisziplinär Die Herausforderung 30
- 31. Robuste Design Systems mit Storybook und Angular Moderne Design Systems …treffen Softwareentwicklung 31
- 32. Robuste Design Systems mit Storybook und Angular Fundament für skalierbare Anwendungen: Komponentenbasierte Softwareentwicklung Moderne Design Systems treffen Softwareentwicklung 32
- 33. 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 33
- 34. Robuste Design Systems mit Storybook und Angular Komponentenbasierte Softwareentwicklung 34 Click me! [caption]="Click me!" (click)="…" Clickety! [caption]=“Clickety!" (click)="…"
- 35. Robuste Design Systems mit Storybook und Angular • 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 35
- 36. Robuste Design Systems mit Storybook und Angular Zu Beginn legen wir ein neues Angular-Projekt an. Labs: http://bit.ly/jsd22s-labs Lab 0 36
- 37. Robuste Design Systems mit Storybook und Angular • “UI component explorer for developers” • Design System in Code abbilden • Schnittstelle zwischen Design & Code • isoliertes entwickeln und testen von Komponenten • Vorbereitung auf Unit Tests • Dokumentation direkt an Komponenten Infrastruktur: Storybook 37
- 38. 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 (visuell, code) • zero config Storybook 38
- 39. Robuste Design Systems mit Storybook und Angular Storybook am konkreten Beispiel 39
- 40. Robuste Design Systems mit Storybook und Angular Demo Time! Storybook am konkreten Beispiel 40
- 41. Robuste Design Systems mit Storybook und Angular • Die Storybook-CLI erlaubt die Installation von Storybook in bestehende Projekte durch ein einziges Kommando • @storybook/cli init • 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 41
- 42. 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 42
- 43. Robuste Design Systems mit Storybook und Angular Als nächstes fügen wir dem Projekt Storybook hinzu. Labs: http://bit.ly/jsd22s-labs Lab 1 43
- 44. Robuste Design Systems mit Storybook und Angular • 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 44
- 45. Robuste Design Systems mit Storybook und Angular Figma: Komponentenbasiertes Design 45
- 46. Robuste Design Systems mit Storybook und Angular • Demo Time! • Kommt mit zur Demo: bit.ly/ngds-figma Figma: Komponentenbasiertes Design 46
- 47. Robuste Design Systems mit Storybook und Angular • Komponenten-Modell • Test von “Worst Case”-Werten • Responsive Design im Tool • Prototyping bildet Workflows ab Figma: Zusammenspiel mit Developer-Workflows 47
- 48. Robuste Design Systems mit Storybook und Angular Endprodukt 48
- 49. Robuste Design Systems mit Storybook und Angular Endprodukt 49 Form Group Header Input Input Button Login Background
- 50. Robuste Design Systems mit Storybook und Angular • Komponentenbibliothek für Angular • Viele vorgefertigte Steuerelemente im Material Design • Open source • https://material.angular.io Angular Material 50
- 51. Robuste Design Systems mit Storybook und Angular Angular Material 51
- 52. Robuste Design Systems mit Storybook und Angular Was können wir von Angular Material lernen? Angular Material 52
- 53. Robuste Design Systems mit Storybook und Angular Steuerelemente sind in einzelne Module aufgeteilt Angular Material 53
- 54. 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 54
- 55. Robuste Design Systems mit Storybook und Angular • Ein Modul • Eine (oder wenige) Komponenten • Eine Story • Erzeugung per Schematic: • ng g @ngx-storybook/schematics:c <name> 1 : 1 : 1-Regel 55
- 56. Robuste Design Systems mit Storybook und Angular 56 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
- 57. Robuste Design Systems mit Storybook und Angular 57 Lab 2 Input-Binding hinzufügen Reguläre Input- Eigenschaft
- 58. Robuste Design Systems mit Storybook und Angular Eine erste Story Storybook 58 Gruppe Name der Story Überschrift erster Ebene/Ordner/Ordner/Ordner
- 59. Robuste Design Systems mit Storybook und Angular 59 Lab 2 Inputs können in Storybook durch props vorbelegt werden Wiederverwendbare Properties mit Args-Syntax Äquivalent zu <app-button [label]="'Submit'">
- 60. Robuste Design Systems mit Storybook und Angular Wir implementieren eine erste eigene Komponente. Labs: bit.ly/jsd22s-labs Lab 2 60
- 61. Robuste Design Systems mit Storybook und Angular Lab 2: Unsere erste eigene Komponente 61
- 62. Robuste Design Systems mit Storybook und Angular • offener ES6-basierter Standard • Augenmerk auf Wiederverwendbarkeit • Integration mit anderen Tools geplant Storybook: Component Story Format 62
- 63. Robuste Design Systems mit Storybook und Angular ☕ Pause 63
- 64. Robuste Design Systems mit Storybook und Angular Lab 3: "Make it pop" 64 Wir stylen mithilfe von Figma die Button-Komponente
- 65. 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/jsd22s-labs Lab 3 65
- 66. Robuste Design Systems mit Storybook und Angular Button-Hintergrund Styling Lab 3 66
- 67. Robuste Design Systems mit Storybook und Angular Button-Label Styling Lab 3 67
- 68. Robuste Design Systems mit Storybook und Angular Button-Label Positionierung Lab 3 68
- 69. Robuste Design Systems mit Storybook und Angular Lab 3 69
- 70. Robuste Design Systems mit Storybook und Angular • machen Komponenten für Nicht-Entwickler zugänglich • Input Bindings über eine dedizierte UI befüllen • verschiedenste Eingabemöglichkeiten • werden automatisch beim Erstellen von Properties (Args) generiert • Testdaten können in Unit-/E2E-Tests wiederverwendet werden Storybook: Controls 70
- 71. Robuste Design Systems mit Storybook und Angular Storybook: Controls 71
- 72. Robuste Design Systems mit Storybook und Angular • der Typ des Controls wird wenn möglich aus dem Binding oder dessen Default-Wert abgeleitet • weitere Typen sind konfigurierbar • auch Controls die nicht direkt zu einer Komponente gehören sind möglich (bspw. Demo-Daten für komplexe Stories) 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 Storybook: Typen von Controls 74
- 75. Robuste Design Systems mit Storybook und Angular Storybook: Typen von Controls 75
- 76. Robuste Design Systems mit Storybook und Angular Storybook: Typen von Controls 76
- 77. Robuste Design Systems mit Storybook und Angular Storybook: Typen von Controls 77
- 78. Robuste Design Systems mit Storybook und Angular 78 Storybook: Typen von Controls Groups
- 79. Robuste Design Systems mit Storybook und Angular 79 Lab 4 Inputs können in Storybook durch props vorbelegt werden Wiederverwendbare Properties mit Args-Syntax Äquivalent zu <app-button [label]="'Submit'">
- 80. Robuste Design Systems mit Storybook und Angular Controls: Simpel, aber mächtig Lab 4 80 spezifischer Typ Namen und Typen werden aus Args generiert Standardwerte eigener Name
- 81. Robuste Design Systems mit Storybook und Angular Mehr Info's gibt's hier: bit.ly/jsd22s-labs Lab 4 81
- 82. Robuste Design Systems mit Storybook und Angular Lab 4: Controls 82
- 83. Robuste Design Systems mit Storybook und Angular Und,wie war's? 83
- 84. Robuste Design Systems mit Storybook und Angular • wichtigstes Standbein, ohne Dokumentation keine Akzeptanz • Varianten in Storybook • DocsPage • MDX • Doc Blocks Storybook: Dokumentation 84
- 85. Robuste Design Systems mit Storybook und Angular • automatisch generiert • zero-config Ansatz • im Addon Docs enthalten • Dokumentation direkt an Komponenten Storybook: DocsPage 85
- 86. Robuste Design Systems mit Storybook und Angular • Bindings und Methoden werden automatisch dokumentiert • Dokumentation bzw. Beschreibung wird direkt an der Angular- Komponente gepflegt Storybook: Dokumentation der ButtonComponent 86
- 87. 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 87
- 88. Robuste Design Systems mit Storybook und Angular Zum Abschluss der Button-Komponente wollen wir diese noch sauber dokumentieren. Labs: bit.ly/jsd22s-labs Lab 5 88
- 89. Robuste Design Systems mit Storybook und Angular Button-Story mit Docs und Controls Lab 5 89
- 90. Robuste Design Systems mit Storybook und Angular • als nächstes wollen wir eine Komponente bauen, die sich aus mehreren Komponenten zusammensetzt • hierbei machen wir vom Konzept der Content Projection Gebrauch (im Storybook-Sprech auch composite components genannt) Komposition von Komponenten 90
- 91. Robuste Design Systems mit Storybook und Angular • Kombiniertes Steuerelement aus Label und Eingabeelement • Ziel: Alle Eigenschaften per Control steuern Input 91 Type Label Placeholder 'text' | 'email' | 'password' string string
- 92. Robuste Design Systems mit Storybook und Angular Content Projection Form Group 92 Überschrift Projizierter Inhalt
- 93. Robuste Design Systems mit Storybook und Angular • 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 93
- 94. 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/jsd22s-labs Lab 6 94
- 95. Robuste Design Systems mit Storybook und Angular Die Input-Komponente Lab 6 95
- 96. Robuste Design Systems mit Storybook und Angular Lab 6 96 Projizierter Inhalt Spaltendefinition
- 97. Robuste Design Systems mit Storybook und Angular Lab 6 97 Inline- Templates sind möglich Deklaration von Abhängigkeiten
- 98. Robuste Design Systems mit Storybook und Angular Login-Komponente 98 Zusammenführung aller erstellten Komponenten
- 99. Robuste Design Systems mit Storybook und Angular • Input-Properties für Username und Passwort • Decorator für Imports • Mocks in Storybook Login-Komponente 99
- 100. Robuste Design Systems mit Storybook und Angular 100 Lab 7 Login-Komponente und Mocks
- 101. 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 101
- 102. Robuste Design Systems mit Storybook und Angular 102 Lab 7 Mock-Service
- 103. Robuste Design Systems mit Storybook und Angular 103 Lab 7 Story
- 104. Robuste Design Systems mit Storybook und Angular Wrap-up – Technologien 104 – überall anwendbar –
- 105. Robuste Design Systems mit Storybook und Angular 1. Designer*in erstellt eine Komponente in Figma 2. Entwickler*in generiert ein passendes Modul, eine Komponente sowie eine Story 3. Entwickler*in übernimmt die CSS-Stile aus Figma 4. Entwickler*in implementiert den HTML-Aufbau und übernimmt die Logik 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) 105
- 106. Robuste Design Systems mit Storybook und Angular • echte Komponenten • ausgiebige Dokumentation • modulare, isolierte Entwicklung • einfachere Wartbarkeit • brown field-geeignet • konsistentere User Experience • Bonus: Unit-Tests profitieren von Mock-Daten Wrap-Up - Design Systems mit Storybook 106
- 107. Robuste Design Systems mit Storybook und Angular 107 Vielen Dank! 🐦 @andreas_wissel 📨 business@andreaswissel.com ✍ andreaswissel.com
- 108. Robuste Design Systems mit Storybook und Angular Repo bit.ly/jsd22s-repo Labs bit.ly/jsd22s-labs Figma bit.ly/ng-ds-figma Slides bit.ly/jsd22s-slides 108
- 109. 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 109