Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Robuste Design Systems mit Storybook und Angula...

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.

Christian Liebel

October 08, 2019
Tweet

More Decks by Christian Liebel

Other Decks in Programming

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. • 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. • Features müssen sichtbar sein • Features müssen benutzbar sein

    • UX schafft Zugang: • Discoverability • Usability • Accessibility User Experience für Entwickler Access denied
  9. 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.
  10. • Web-only (weniger geeignet für Desktop oder native- like) •

    kein Komponentensystem • monolithisches CSS Beispiel: Bootstrap
  11. • 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
  12. 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 + }
  13. • 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”
  14. • iterative Entwicklung von Code und UX • fail early,

    fail often • robuster Prozess • isolierte Komponenten • enge Zusammenarbeit • starker Austausch • interdisziplinär Die Herausforderung
  15. • …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
  16. • 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
  17. • Design System in Code abbilden • Schnittstelle zwischen Design

    & Code • isolierte Entwicklung von Komponenten • Vorbereitung auf Unit Tests • Dokumentation direkt an Komponenten Storybook
  18. • framework-agnostisch • Open Source • Verwaltet von der JS

    Foundation • vielfältiges Plugin-Ökosystem • Möglichkeit von Snapshot Tests (visuell, code) Storybook
  19. Designer • einfache Abnahme • Testen am lebenden Subjekt •

    Konsens Storybook - wer profitiert davon?
  20. Developer • Edge Cases • Visual Regression Testing • schwierig

    zu erreichende States • lebendige Docs Storybook - wer profitiert davon?
  21. 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?
  22. Gesamtes Team • gemeinsames Verständnis • einfacherer Zugang zu Komponenten

    • Übersicht und Dokumentation Storybook - wer profitiert davon?
  23. • 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
  24. • 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
  25. • 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
  26. • Komponenten-Modell • Test von “Worst Case”-Werten • Responsive Design

    im Tool • Prototyping bildet Workflows ab Figma: Zusammenspiel mit Developer-Workflows
  27. • Komponentenbibliothek für Angular • Viele vorgefertigte Steuerelemente im Material

    Design • Open source • https://material.angular.io Angular Material
  28. • 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
  29. • Ein Modul • Eine (oder wenige) Komponenten • Eine

    Story • Erzeugung per Schematic: • ng g @ngx-storybook/schematics:c <name> 1:1:1-Regel
  30. 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
  31. Lab 2 Inputs können in Storybook durch props vorbelegt werden

    Äquivalent zu <app-button [label]="'Submit'">
  32. 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
  33. • machen Komponenten für Nicht-Entwickler zugänglich • Input Bindings über

    eine dedizierte UI befüllen • verschiedenste Eingabemöglichkeiten Storybook: Addon Knobs
  34. Knobs zu Button hinzufügen Lab 4 Eingabeart Story für die

    Verwendung von Knobs kennzeichnen Bezeichnung Standardwert
  35. • Kombiniertes Steuerelement aus Label und Eingabeelement • Ziel: Alle

    Eigenschaften per Knob steuern Input Type Label Placeholder 'text' | 'email' | 'password' string string
  36. 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
  37. • 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
  38. 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
  39. • Dieselben Mocks, die für Storybook implementiert werden, können unverändert

    auch für Unit Tests verwendet werden (und umgekehrt) Mocking
  40. 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)
  41. • 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
  42. Vielen Dank! User Experience Architect Andreas Wissel @andreas_wissel [email protected]

    andreaswissel.com Christian Liebel @christianliebel [email protected] ✍ christianliebel.com Consultant