Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

27 views

Published on

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.

Published in: Design
  • Be the first to comment

  • Be the first to like this

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

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

×