Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen Anwendung
•
0 gefällt mir•190 views
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.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen Anwendung
Ähnlich wie Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen Anwendung (20)
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen Anwendung
- 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
- 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.
- 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. Storybook am konkreten Beispiel
- 37. Demo Time! Storybook am konkreten Beispiel
- 38. Designer • einfache Abnahme • Testen am lebenden Subjekt • Konsens Storybook - wer profitiert davon?
- 39. Developer • Edge Cases • Visual Regression Testing • schwierig zu erreichende States • lebendige Docs Storybook - wer profitiert davon?
- 40. Testing • Mock Daten • Automatisierung • Eingrenzung auf Komponenten Storybook - wer profitiert davon?
- 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. Gesamtes Team • gemeinsames Verständnis • einfacherer Zugang zu Komponenten • Übersicht und Dokumentation Storybook - wer profitiert davon?
- 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
- 48. • Demo Time! • Kommt mit zur Demo: bit.ly/ng-ds-figma 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
- 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
- 67. • machen Komponenten für Nicht-Entwickler zugänglich • Input Bindings über eine dedizierte UI befüllen • verschiedenste Eingabemöglichkeiten Storybook: Addon Knobs
- 70. Knobs zu Button hinzufügen Lab 4 Eingabeart Story für die Verwendung von Knobs kennzeichnen Bezeichnung Standardwert
- 77. • Kombiniertes Steuerelement aus Label und Eingabeelement • Ziel: Alle Eigenschaften per Knob steuern Input TypeLabel 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
- 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
- 91. Lab 7 Story
- 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