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

Slide 1

Slide 1 text

Robuste Design Systems mit Storybook und Angular Vom Konzept zur lebendigen Anwendung Andreas Wissel @andreas_wissel User Experience Architect Christian Liebel @christianliebel Consultant

Slide 2

Slide 2 text

• 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

Slide 3

Slide 3 text

User Experience Architect Andreas Wissel Enterprise UX ❤ Design Systems # Cross-Platform Design Strategies Freelancer ✍ andreaswissel.com @andreas_wissel

Slide 4

Slide 4 text

User Experience Architect Andreas Wissel • Designer-Developer Schnittstelle • Workflow Optimierung • Beratung & Begleitung von Redesigns • Fokus auf Design Systems mit Storybook

Slide 5

Slide 5 text

Consultant Christian Liebel Consulting cross-platform & SaaS ❤ Progressive Web Apps & Angular ' MVP & GDE Thinktecture AG ✍ christianliebel.com @christianliebel

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Repository: http://bit.ly/ng-ds Setup erledigt?

Slide 8

Slide 8 text

• 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?

Slide 9

Slide 9 text

Menschen denken in Mustern User Experience im Alltag

Slide 10

Slide 10 text

Menschen denken in Mustern User Experience im Alltag

Slide 11

Slide 11 text

Menschen denken in Mustern User Experience im Alltag

Slide 12

Slide 12 text

Und ohne Muster sind wir verloren.. User Experience im Alltag

Slide 13

Slide 13 text

• Features müssen sichtbar sein • Features müssen benutzbar sein • UX schafft Zugang: • Discoverability • Usability • Accessibility User Experience für Entwickler Access denied

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

Kollaboration ⚡ Fachbereiche Konsistenz ⚡ Projektalltag Skalierbarkeit ⚡ Agile Prozesse Menschen.

Slide 16

Slide 16 text

Design Systems Komponenten- Sammlung Dokumentation spezifische Use-Cases

Slide 17

Slide 17 text

Moment mal… Ein alter Bekannter?

Slide 18

Slide 18 text

• Web-only (weniger geeignet für Desktop oder native- like) • kein Komponentensystem • monolithisches CSS Beispiel: Bootstrap

Slide 19

Slide 19 text

„Früher war alles einfacher“

Slide 20

Slide 20 text

relevante Zielplattformen früher: Windows oder Web

Slide 21

Slide 21 text

relevante Zielplattformen heute: Windows, macOS, Web/PWA, iOS, Android

Slide 22

Slide 22 text

Doch damit nicht genug…

Slide 23

Slide 23 text

Verschiedenste Anzeige- und Eingabemöglichkeiten

Slide 24

Slide 24 text

• 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

Slide 25

Slide 25 text

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 + }

Slide 26

Slide 26 text

• 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”

Slide 27

Slide 27 text

• iterative Entwicklung von Code und UX • fail early, fail often • robuster Prozess • isolierte Komponenten • enge Zusammenarbeit • starker Austausch • interdisziplinär Die Herausforderung

Slide 28

Slide 28 text

Moderne Design Systems  …treffen Softwareentwicklung

Slide 29

Slide 29 text

Fundament für skalierbare Anwendungen: Komponentenbasierte Softwareentwicklung Moderne Design Systems treffen Softwareentwicklung

Slide 30

Slide 30 text

• …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

Slide 31

Slide 31 text

Komponentenbasierte Softwareentwicklung Click me! [caption]="Click me!" (click)="…" Clickety! [caption]=“Clickety!" (click)="…"

Slide 32

Slide 32 text

• 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

Slide 33

Slide 33 text

Zu Beginn legen wir ein neues Angular-Projekt an. Labs: http://bit.ly/ng-ds-labs Lab 0

Slide 34

Slide 34 text

• Design System in Code abbilden • Schnittstelle zwischen Design & Code • isolierte Entwicklung von Komponenten • Vorbereitung auf Unit Tests • Dokumentation direkt an Komponenten Storybook

Slide 35

Slide 35 text

• framework-agnostisch • Open Source • Verwaltet von der JS Foundation • vielfältiges Plugin-Ökosystem • Möglichkeit von Snapshot Tests (visuell, code) Storybook

Slide 36

Slide 36 text

Designer • einfache Abnahme • Testen am lebenden Subjekt • Konsens Storybook - wer profitiert davon?

Slide 37

Slide 37 text

Developer • Edge Cases • Visual Regression Testing • schwierig zu erreichende States • lebendige Docs Storybook - wer profitiert davon?

Slide 38

Slide 38 text

Testing • Mock Daten • Automatisierung • Eingrenzung auf Komponenten Storybook - wer profitiert davon?

Slide 39

Slide 39 text

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?

Slide 40

Slide 40 text

Gesamtes Team • gemeinsames Verständnis • einfacherer Zugang zu Komponenten • Übersicht und Dokumentation Storybook - wer profitiert davon?

Slide 41

Slide 41 text

Storybook am konkreten Beispiel

Slide 42

Slide 42 text

Demo Time! Storybook am konkreten Beispiel

Slide 43

Slide 43 text

• 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

Slide 44

Slide 44 text

• 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

Slide 45

Slide 45 text

Als nächstes fügen wir dem Projekt Storybook hinzu. Labs: http://bit.ly/ng-ds-labs Lab 1

Slide 46

Slide 46 text

• 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

Slide 47

Slide 47 text

Figma: Komponentenbasiertes Design

Slide 48

Slide 48 text

• Demo Time! Figma: Komponentenbasiertes Design

Slide 49

Slide 49 text

• Komponenten-Modell • Test von “Worst Case”-Werten • Responsive Design im Tool • Prototyping bildet Workflows ab Figma: Zusammenspiel mit Developer-Workflows

Slide 50

Slide 50 text

Endprodukt

Slide 51

Slide 51 text

Endprodukt Form Group Header Input Input Button Login Background

Slide 52

Slide 52 text

• Komponentenbibliothek für Angular • Viele vorgefertigte Steuerelemente im Material Design • Open source • https://material.angular.io Angular Material

Slide 53

Slide 53 text

Angular Material

Slide 54

Slide 54 text

Was können wir von  Angular Material lernen? Angular Material

Slide 55

Slide 55 text

Steuerelemente sind in einzelne Module aufgeteilt Angular Material

Slide 56

Slide 56 text

• 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

Slide 57

Slide 57 text

• Ein Modul • Eine (oder wenige) Komponenten • Eine Story • Erzeugung per Schematic: • ng g @ngx-storybook/schematics:c 1:1:1-Regel

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Lab 2 Input-Binding hinzufügen Reguläre Input- Eigenschaft

Slide 60

Slide 60 text

Eine einfache Story… Storybook Gruppe Name der Story Überschrift erster Ebene|Ordner/Ordner/Ordner

Slide 61

Slide 61 text

Lab 2 Inputs können in Storybook durch props vorbelegt werden Äquivalent zu

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

http://bit.ly/ng-ds-figma Figma: Komponentenbasiertes Design

Slide 64

Slide 64 text

Button-Hintergrund Styling Lab 3

Slide 65

Slide 65 text

Button-Label Styling Lab 3

Slide 66

Slide 66 text

Button-Label Positionierung Lab 3

Slide 67

Slide 67 text

• machen Komponenten für Nicht-Entwickler zugänglich • Input Bindings über eine dedizierte UI befüllen • verschiedenste Eingabemöglichkeiten Storybook: Addon Knobs

Slide 68

Slide 68 text

Storybook: Addon Knobs

Slide 69

Slide 69 text

Knobs-Addon registrieren Lab 4

Slide 70

Slide 70 text

Knobs zu Button hinzufügen Lab 4 Eingabeart Story für die Verwendung von Knobs kennzeichnen Bezeichnung Standardwert

Slide 71

Slide 71 text

Storybook: Addon Knobs

Slide 72

Slide 72 text

Storybook: Addon Knobs

Slide 73

Slide 73 text

Storybook: Addon Knobs

Slide 74

Slide 74 text

Storybook: Addon Knobs

Slide 75

Slide 75 text

Storybook: Addon Knobs

Slide 76

Slide 76 text

Storybook: Addon Knobs Groups

Slide 77

Slide 77 text

• Kombiniertes Steuerelement aus Label und Eingabeelement • Ziel: Alle Eigenschaften per Knob steuern Input Type Label Placeholder 'text' | 'email' | 'password' string string

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

Knob-Typen Lab 5 Select-Knob Text-Knob

Slide 80

Slide 80 text

Containerkomponente Form Group Überschrift Projizierter Inhalt

Slide 81

Slide 81 text

Containerkomponente Form Group Spalten konfigurierbar

Slide 82

Slide 82 text

• 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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

Lab 6 Projizierter Inhalt Spaltendefinition

Slide 85

Slide 85 text

Lab 6 Inline- Templates sind möglich Deklaration von Abhängigkeiten

Slide 86

Slide 86 text

Slide 87

Slide 87 text

• Input-Properties für Username und Passwort • Decorator für Imports • Mocks in Storybook Login-Komponente

Slide 88

Slide 88 text

• Dieselben Mocks, die für Storybook implementiert werden, können unverändert auch für Unit Tests verwendet werden (und umgekehrt) Mocking

Slide 89

Slide 89 text

Lab 7 Mock-Service

Slide 90

Slide 90 text

Lab 7 Login-Komponente

Slide 91