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

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.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel

October 08, 2019
Tweet

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