SlideShare ist ein Scribd-Unternehmen logo
Andreas Wissel
@andreas_wissel
User Experience Architect
Robuste Design Systems mit Storybook und Angular
Robuste Design Systems mit Storybook und Angular
• Design Systems Intro


• Tooling


• framework-agnostisch


• am Beispiel Angular


• platform-unabhängig
Was euch erwartet
2
• technischer Deep Dive


• Angular Deep Dive


Was euch nicht erwartet
Robuste Design Systems mit Storybook und Angular
User Experience Architect
Andreas Wissel
3
💡 Collaboration & Communication


❤ Design Systems


👨💻 Human-centric workflows
🏢 Freelance Consultant


✍ andreaswissel.com


🐦 @andreas_wissel
Robuste Design Systems mit Storybook und Angular
User Experience Architect
Andreas Wissel
4
• Designer-Developer-Schnittstelle


• Workflow-Optimierung


• Product-led growth


• Design Systems mit Storybook
Robuste Design Systems mit Storybook und Angular
Wenn's mal klappert
5
Robuste Design Systems mit Storybook und Angular
Repository:


bit.ly/jsd22s-repo
Setup
6
Robuste Design Systems mit Storybook und Angular
Bringt gerne jederzeit eure
Projektbeispiele ein


Feedback,Fragen:


bit.ly/jsd22miro


pw: jsdays22
Der Workshop gehört euch!
7
Agenda:


9
:
10 - 10
:
30


👨🏫 Workshop Teil 1 - mehr Intro


10
:
30 - 10
:
45


☕ Kaffeepause


10
:
45 - 12
:
30


👩💻 Workshop Teil 2 - mehr Hands-on
Robuste Design Systems mit Storybook und Angular
• 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
Robuste Design Systems mit Storybook und Angular
Soweit die Theorie.


Wie sieht die Praxis aus?
9
Robuste Design Systems mit Storybook und Angular
10
UX von Alltagsgegenständen
Robuste Design Systems mit Storybook und Angular
11
UX von Alltagsgegenständen
Robuste Design Systems mit Storybook und Angular
12
UX von Alltagsgegenständen
Robuste Design Systems mit Storybook und Angular
Menschen denken in Mustern
13
User Experience im Alltag
Robuste Design Systems mit Storybook und Angular
Menschen denken in Mustern
14
User Experience im Alltag
Robuste Design Systems mit Storybook und Angular
Menschen denken in Mustern
15
User Experience im Alltag
Robuste Design Systems mit Storybook und Angular
Menschen sind Gewohnheitstiere.
16
Robuste Design Systems mit Storybook und Angular
Und ohne Muster sind wir verloren..
17
User Experience im Alltag
Robuste Design Systems mit Storybook und Angular
Und ohne Muster sind wir verloren..
18
Spot the difference!
Robuste Design Systems mit Storybook und Angular
• macht Features sichtbar


• macht Features benutzbar


• reduziert kognitive Last


• schafft Zugang:


• Usability


• Accessibility
User Experience...
19
Access
denied
Robuste Design Systems mit Storybook und Angular
Verstanden.


Aber wie passiert das trotzdem?
20
Robuste Design Systems mit Storybook und Angular
Der übliche Arbeitsmodus
21
Konzeption
Entwicklung
Test
Mit etwas Glück unterhalten sich hier Menschen miteinander


...aber meistens ist das eher nicht der Fall.
Robuste Design Systems mit Storybook und Angular
• Je besser wir miteinander kommunizieren, desto mehr
gemeinsames Verständnis entwickeln wir für das Produkt.


• Enge Zusammenarbeit und gemeinsames Verständnis führt zu
guter User Experience und besserem Code
Problem: Fehlende Kommunikation
22
In diesem Workshop erarbeiten wir das Handwerkszeug
für enge Zusammenarbeit.
Robuste Design Systems mit Storybook und Angular
Der gewünschte Arbeitsmodus: Kontinuität
23
Konzeption Entwicklung Test
Alle Beteiligten liefern ständiges
Feedback zum Inkrement
ständiger Sync zwischen


Design,Development,Testing
Robuste Design Systems mit Storybook und Angular
Der Workflow den wir suchen..
24
...sichert Konsistenz im Produkt
langfristig


... ist für alle verständlich
... bringt alle an einen Tisch


... ist auf die Anforderungen anpassbar
Robuste Design Systems mit Storybook und Angular
Bauteile unseres Workflows
25
Interdisziplinäre
Deliverables
klare
Dokumentation
der Fachlichkeit
Sammlung aller
Komponenten
Robuste Design Systems mit Storybook und Angular
Moment mal…
26
Gibt es sowas nicht
schon?
Robuste Design Systems mit Storybook und Angular
27
• generische Lösung


• Komponenten vorhanden


• Individualisierung: nur innerhalb der Grenzen
Beispiel: Angular Material
Robuste Design Systems mit Storybook und Angular
• generische Lösung


• geht nicht auf die Bedürfnisse der Organisation ein


• Komponenten vorhanden


• eine gute Sache - aber nur eine Teilmenge


• Individualisierung: nur innerhalb der Grenzen


• nur das anpassbar, was die Library zulässt
Beispiel: Angular Material
28
Robuste Design Systems mit Storybook und Angular
Moderne Design Systems: Bausteine
29
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
+ }
Robuste Design Systems mit Storybook und Angular
• iterative Entwicklung von Code und UX


• fail early, fail often


• robuster Prozess


• isolierte Komponenten


• enge Zusammenarbeit


• starker Austausch


• interdisziplinär
Die Herausforderung
30
Robuste Design Systems mit Storybook und Angular
Moderne Design Systems
…treffen Softwareentwicklung
31
Robuste Design Systems mit Storybook und Angular
Fundament für skalierbare Anwendungen:
Komponentenbasierte Softwareentwicklung
Moderne Design Systems treffen Softwareentwicklung
32
Robuste Design Systems mit Storybook und Angular
• …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
33
Robuste Design Systems mit Storybook und Angular
Komponentenbasierte Softwareentwicklung
34
Click me!
[caption]="Click me!" (click)="…"
Clickety!
[caption]=“Clickety!" (click)="…"
Robuste Design Systems mit Storybook und Angular
• 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
35
Robuste Design Systems mit Storybook und Angular
Zu Beginn legen wir ein neues Angular-Projekt an.


Labs: http://bit.ly/jsd22s-labs


Lab 0
36
Robuste Design Systems mit Storybook und Angular
• “UI component explorer for developers”


• Design System in Code abbilden


• Schnittstelle zwischen Design & Code


• isoliertes entwickeln und testen von Komponenten


• Vorbereitung auf Unit Tests


• Dokumentation direkt an Komponenten
Infrastruktur: Storybook
37
Robuste Design Systems mit Storybook und Angular
• framework-agnostisch


• Open Source


• Verwaltet von der JS Foundation


• vielfältiges Plugin-Ökosystem


• Möglichkeit von Snapshot Tests (visuell, code)


• zero config
Storybook
38
Robuste Design Systems mit Storybook und Angular
Storybook am konkreten Beispiel
39
Robuste Design Systems mit Storybook und Angular
Demo Time!
Storybook am konkreten Beispiel
40
Robuste Design Systems mit Storybook und Angular
• Die Storybook-CLI erlaubt die Installation von Storybook in
bestehende Projekte durch ein einziges Kommando


• @storybook/cli init


• Das verwendete Framework wird automatisch erkannt und die
Installation darauf angepasst


• für einen Großteil der Projekte funktioniert der zero config
Ansatz
Storybook + Angular
41
Robuste Design Systems mit Storybook und Angular
• 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
42
Robuste Design Systems mit Storybook und Angular
Als nächstes fügen wir dem Projekt Storybook hinzu.


Labs: http://bit.ly/jsd22s-labs


Lab 1
43
Robuste Design Systems mit Storybook und Angular
• 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
44
Robuste Design Systems mit Storybook und Angular
Figma: Komponentenbasiertes Design
45
Robuste Design Systems mit Storybook und Angular
• Demo Time!


• Kommt mit zur Demo: bit.ly/ngds-figma
Figma: Komponentenbasiertes Design
46
Robuste Design Systems mit Storybook und Angular
• Komponenten-Modell


• Test von “Worst Case”-Werten


• Responsive Design im Tool


• Prototyping bildet Workflows ab
Figma: Zusammenspiel mit Developer-Workflows
47
Robuste Design Systems mit Storybook und Angular
Endprodukt
48
Robuste Design Systems mit Storybook und Angular
Endprodukt
49
Form Group Header
Input
Input
Button
Login Background
Robuste Design Systems mit Storybook und Angular
• Komponentenbibliothek für Angular


• Viele vorgefertigte Steuerelemente im Material Design


• Open source


• https://material.angular.io
Angular Material
50
Robuste Design Systems mit Storybook und Angular
Angular Material
51
Robuste Design Systems mit Storybook und Angular
Was können wir von Angular Material lernen?
Angular Material
52
Robuste Design Systems mit Storybook und Angular
Steuerelemente sind in einzelne Module aufgeteilt
Angular Material
53
Robuste Design Systems mit Storybook und Angular
• Separation 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
54
Robuste Design Systems mit Storybook und Angular
• Ein Modul


• Eine (oder wenige) Komponenten


• Eine Story


• Erzeugung per Schematic:


• ng g @ngx-storybook/schematics:c <name>
1
:
1
:
1-Regel
55
Robuste Design Systems mit Storybook und Angular
56
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
Robuste Design Systems mit Storybook und Angular
57
Lab 2
Input-Binding hinzufügen
Reguläre Input-
Eigenschaft
Robuste Design Systems mit Storybook und Angular
Eine erste Story
Storybook
58
Gruppe
Name der Story
Überschrift erster Ebene/Ordner/Ordner/Ordner
Robuste Design Systems mit Storybook und Angular
59
Lab 2
Inputs können in Storybook durch props vorbelegt werden
Wiederverwendbare
Properties mit Args-Syntax
Äquivalent zu


<app-button
[label]="'Submit'">
Robuste Design Systems mit Storybook und Angular
Wir implementieren eine erste eigene Komponente.


Labs: bit.ly/jsd22s-labs


Lab 2
60
Robuste Design Systems mit Storybook und Angular
Lab 2: Unsere erste eigene Komponente
61
Robuste Design Systems mit Storybook und Angular
• offener ES6-basierter Standard


• Augenmerk auf Wiederverwendbarkeit


• Integration mit anderen Tools geplant
Storybook: Component Story Format
62
Robuste Design Systems mit Storybook und Angular
☕
Pause
63
Robuste Design Systems mit Storybook und Angular
Lab 3: "Make it pop"
64
Wir stylen mithilfe von Figma die Button-Komponente
Robuste Design Systems mit Storybook und Angular
Als nächstes übertragen wir die vom Designer erstellten CSS-
Stile aus Figma auf unsere bestehende ButtonComponent.


Labs: bit.ly/jsd22s-labs


Lab 3
65
Robuste Design Systems mit Storybook und Angular
Button-Hintergrund Styling


Lab 3
66
Robuste Design Systems mit Storybook und Angular
Button-Label Styling


Lab 3
67
Robuste Design Systems mit Storybook und Angular
Button-Label Positionierung


Lab 3
68
Robuste Design Systems mit Storybook und Angular
Lab 3
69
Robuste Design Systems mit Storybook und Angular
• machen Komponenten für Nicht-Entwickler zugänglich


• Input Bindings über eine dedizierte UI befüllen


• verschiedenste Eingabemöglichkeiten


• werden automatisch beim Erstellen von Properties (Args)
generiert


• Testdaten können in Unit-/E2E-Tests wiederverwendet werden
Storybook: Controls
70
Robuste Design Systems mit Storybook und Angular
Storybook: Controls
71
Robuste Design Systems mit Storybook und Angular
• der Typ des Controls wird wenn möglich aus dem Binding oder
dessen Default-Wert abgeleitet


• weitere Typen sind konfigurierbar


• auch Controls die nicht direkt zu einer Komponente gehören
sind möglich (bspw. Demo-Daten für komplexe Stories)
Storybook: Typen von Controls
72
Robuste Design Systems mit Storybook und Angular
Storybook: Typen von Controls
73
Robuste Design Systems mit Storybook und Angular
Storybook: Typen von Controls
74
Robuste Design Systems mit Storybook und Angular
Storybook: Typen von Controls
75
Robuste Design Systems mit Storybook und Angular
Storybook: Typen von Controls
76
Robuste Design Systems mit Storybook und Angular
Storybook: Typen von Controls
77
Robuste Design Systems mit Storybook und Angular
78
Storybook: Typen von Controls
Groups
Robuste Design Systems mit Storybook und Angular
79
Lab 4
Inputs können in Storybook durch props vorbelegt werden
Wiederverwendbare
Properties mit Args-Syntax
Äquivalent zu


<app-button
[label]="'Submit'">
Robuste Design Systems mit Storybook und Angular
Controls: Simpel, aber mächtig
Lab 4
80
spezifischer Typ
Namen und
Typen werden aus
Args generiert
Standardwerte
eigener Name
Robuste Design Systems mit Storybook und Angular
Mehr Info's gibt's hier: bit.ly/jsd22s-labs
Lab 4
81
Robuste Design Systems mit Storybook und Angular
Lab 4: Controls
82
Robuste Design Systems mit Storybook und Angular
Und,wie war's?
83
Robuste Design Systems mit Storybook und Angular
• wichtigstes Standbein, ohne Dokumentation keine Akzeptanz


• Varianten in Storybook


• DocsPage


• MDX


• Doc Blocks
Storybook: Dokumentation
84
Robuste Design Systems mit Storybook und Angular
• automatisch generiert


• zero-config Ansatz


• im Addon Docs enthalten


• Dokumentation direkt an
Komponenten
Storybook: DocsPage
85
Robuste Design Systems mit Storybook und Angular
• Bindings und Methoden werden
automatisch dokumentiert


• Dokumentation bzw. Beschreibung
wird direkt an der Angular-
Komponente gepflegt
Storybook: Dokumentation der ButtonComponent
86
Robuste Design Systems mit Storybook und Angular
Um die Docs zu generieren, muss der Storybook-Prozess
einmalig durchgestartet werden. Compodoc wird nur zu Beginn
einmalig ausgeführt.
Lab 5: Nota bene
87
Robuste Design Systems mit Storybook und Angular
Zum Abschluss der Button-Komponente wollen wir diese noch
sauber dokumentieren.


Labs: bit.ly/jsd22s-labs
Lab 5
88
Robuste Design Systems mit Storybook und Angular
Button-Story mit Docs und Controls
Lab 5
89
Robuste Design Systems mit Storybook und Angular
• als nächstes wollen wir eine Komponente bauen, die sich aus
mehreren Komponenten zusammensetzt


• hierbei machen wir vom Konzept der Content Projection
Gebrauch (im Storybook-Sprech auch composite components
genannt)
Komposition von Komponenten
90
Robuste Design Systems mit Storybook und Angular
• Kombiniertes Steuerelement aus Label und Eingabeelement


• Ziel: Alle Eigenschaften per Control steuern
Input
91
Type
Label
Placeholder
'text' | 'email' | 'password'
string
string
Robuste Design Systems mit Storybook und Angular
Content Projection
Form Group
92
Überschrift
Projizierter
Inhalt
Robuste Design Systems mit Storybook und Angular
• 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
93
Robuste Design Systems mit Storybook und Angular
Wir implementieren eine Story für eine Komponente, deren Inhalt
von der äußeren Verwendung abhängig ist.


Labs: bit.ly/jsd22s-labs
Lab 6
94
Robuste Design Systems mit Storybook und Angular
Die Input-Komponente
Lab 6
95
Robuste Design Systems mit Storybook und Angular
Lab 6
96
Projizierter Inhalt Spaltendefinition
Robuste Design Systems mit Storybook und Angular
Lab 6
97
Inline-
Templates sind
möglich
Deklaration von
Abhängigkeiten
Robuste Design Systems mit Storybook und Angular
Login-Komponente
98
Zusammenführung aller erstellten Komponenten
Robuste Design Systems mit Storybook und Angular
• Input-Properties für Username und Passwort


• Decorator für Imports


• Mocks in Storybook
Login-Komponente
99
Robuste Design Systems mit Storybook und Angular
100
Lab 7
Login-Komponente und Mocks
Robuste Design Systems mit Storybook und Angular
• Dieselben Mocks, die für Storybook implementiert werden,
können dank Standard ES6 unverändert auch für Unit Tests
verwendet werden (und umgekehrt)
Mocking
101
Robuste Design Systems mit Storybook und Angular
102
Lab 7
Mock-Service
Robuste Design Systems mit Storybook und Angular
103
Lab 7
Story
Robuste Design Systems mit Storybook und Angular
Wrap-up – Technologien
104
– überall anwendbar –
Robuste Design Systems mit Storybook und Angular
1. Designer*in erstellt eine Komponente in Figma


2. Entwickler*in generiert ein passendes Modul, eine Komponente sowie
eine Story


3. Entwickler*in übernimmt die CSS-Stile aus Figma


4. Entwickler*in implementiert den HTML-Aufbau und übernimmt die Logik


5. Entwickler*in implementiert eine passende Story (und Unit-Tests)


6. Review mit der Designer*in, bei Bedarf die obigen Schritte wiederholen
Wrap-Up – Workflow (auch für kleine Testballons)
105
Robuste Design Systems mit Storybook und Angular
• echte Komponenten


• ausgiebige Dokumentation


• modulare, isolierte Entwicklung


• einfachere Wartbarkeit


• brown field-geeignet


• konsistentere User Experience


• Bonus: Unit-Tests profitieren von Mock-Daten
Wrap-Up - Design Systems mit Storybook
106
Robuste Design Systems mit Storybook und Angular
107
Vielen Dank!
🐦 @andreas_wissel


📨 business@andreaswissel.com


✍ andreaswissel.com
Robuste Design Systems mit Storybook und Angular
Repo


bit.ly/jsd22s-repo


Labs


bit.ly/jsd22s-labs


Figma


bit.ly/ng-ds-figma


Slides


bit.ly/jsd22s-slides
108
Robuste Design Systems mit Storybook und Angular
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
109

Weitere ähnliche Inhalte

Ähnlich wie design-systems-storybook-jsdays-2021.pdf

Welche Prototyping-Methode passt zu meinen Anforderungen? – World Usability D...
Welche Prototyping-Methode passt zu meinen Anforderungen? – World Usability D...Welche Prototyping-Methode passt zu meinen Anforderungen? – World Usability D...
Welche Prototyping-Methode passt zu meinen Anforderungen? – World Usability D...Lena Königsberger
 
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...Community ITmitte.de
 
30. Treffen der .NET User Group Rhein-Neckar mit Constantin Klein - „Bekommen...
30. Treffen der .NET User Group Rhein-Neckar mit Constantin Klein - „Bekommen...30. Treffen der .NET User Group Rhein-Neckar mit Constantin Klein - „Bekommen...
30. Treffen der .NET User Group Rhein-Neckar mit Constantin Klein - „Bekommen....NET User Group Rhein-Neckar
 
Responsive Multichannel-E-Commerce: Vorgehen und Learnings aus der Praxis
Responsive Multichannel-E-Commerce: Vorgehen und Learnings aus der PraxisResponsive Multichannel-E-Commerce: Vorgehen und Learnings aus der Praxis
Responsive Multichannel-E-Commerce: Vorgehen und Learnings aus der PraxisRoberto Rizzi
 
XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0thoemmes
 
Cusy Developer-Baukasten
Cusy Developer-BaukastenCusy Developer-Baukasten
Cusy Developer-Baukastencusy GmbH
 
Continuous Everything
Continuous EverythingContinuous Everything
Continuous Everythingcusy GmbH
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftDavid Schneider
 
Dr. Ingo Laue - Microsoft Azure | Projekt-Erfahrungen
Dr. Ingo Laue - Microsoft Azure | Projekt-ErfahrungenDr. Ingo Laue - Microsoft Azure | Projekt-Erfahrungen
Dr. Ingo Laue - Microsoft Azure | Projekt-ErfahrungenSymposia Media
 
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 Minuten
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 MinutenGerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 Minuten
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 MinutenRoland Mast
 
Implementierung der Knowledge Engineering Workbench in myCBR
Implementierung der Knowledge Engineering Workbench in myCBRImplementierung der Knowledge Engineering Workbench in myCBR
Implementierung der Knowledge Engineering Workbench in myCBRAlexander Hundt
 
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...DNUG e.V.
 
Tag der offenen Tür 2012 | Basislehrjahr Informatik | ZbW
Tag der offenen Tür 2012 | Basislehrjahr Informatik | ZbWTag der offenen Tür 2012 | Basislehrjahr Informatik | ZbW
Tag der offenen Tür 2012 | Basislehrjahr Informatik | ZbWChristian Schlegel
 
FMK 2013 Design, Gestaltungsmittel in Layouts, Arnold Kegebein
FMK 2013 Design, Gestaltungsmittel in Layouts, Arnold KegebeinFMK 2013 Design, Gestaltungsmittel in Layouts, Arnold Kegebein
FMK 2013 Design, Gestaltungsmittel in Layouts, Arnold KegebeinVerein FM Konferenz
 
CI und Android - Wie geht das? MTC2010
CI und Android - Wie geht das? MTC2010CI und Android - Wie geht das? MTC2010
CI und Android - Wie geht das? MTC2010Markus Kopf
 
Akzeptanz-Test getriebene Produktentwicklung
Akzeptanz-Test getriebene ProduktentwicklungAkzeptanz-Test getriebene Produktentwicklung
Akzeptanz-Test getriebene ProduktentwicklungMichael Brandt
 
Quo vadis DevOps
Quo vadis DevOpsQuo vadis DevOps
Quo vadis DevOpscusy GmbH
 
Agile Methoden in der Medizintechnik - Über die Software hinaus (CONSANIS)
Agile Methoden in der Medizintechnik - Über die Software hinaus (CONSANIS)Agile Methoden in der Medizintechnik - Über die Software hinaus (CONSANIS)
Agile Methoden in der Medizintechnik - Über die Software hinaus (CONSANIS)Marc Bless
 

Ähnlich wie design-systems-storybook-jsdays-2021.pdf (20)

Welche Prototyping-Methode passt zu meinen Anforderungen? – World Usability D...
Welche Prototyping-Methode passt zu meinen Anforderungen? – World Usability D...Welche Prototyping-Methode passt zu meinen Anforderungen? – World Usability D...
Welche Prototyping-Methode passt zu meinen Anforderungen? – World Usability D...
 
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...
 
30. Treffen der .NET User Group Rhein-Neckar mit Constantin Klein - „Bekommen...
30. Treffen der .NET User Group Rhein-Neckar mit Constantin Klein - „Bekommen...30. Treffen der .NET User Group Rhein-Neckar mit Constantin Klein - „Bekommen...
30. Treffen der .NET User Group Rhein-Neckar mit Constantin Klein - „Bekommen...
 
Responsive Multichannel-E-Commerce: Vorgehen und Learnings aus der Praxis
Responsive Multichannel-E-Commerce: Vorgehen und Learnings aus der PraxisResponsive Multichannel-E-Commerce: Vorgehen und Learnings aus der Praxis
Responsive Multichannel-E-Commerce: Vorgehen und Learnings aus der Praxis
 
XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0
 
Cusy Developer-Baukasten
Cusy Developer-BaukastenCusy Developer-Baukasten
Cusy Developer-Baukasten
 
Continuous Everything
Continuous EverythingContinuous Everything
Continuous Everything
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
 
Dr. Ingo Laue - Microsoft Azure | Projekt-Erfahrungen
Dr. Ingo Laue - Microsoft Azure | Projekt-ErfahrungenDr. Ingo Laue - Microsoft Azure | Projekt-Erfahrungen
Dr. Ingo Laue - Microsoft Azure | Projekt-Erfahrungen
 
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 Minuten
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 MinutenGerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 Minuten
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 Minuten
 
Thementag 2023 06 Dieses Mal machen wir alles richtig - 9 Hacks für wandelbar...
Thementag 2023 06 Dieses Mal machen wir alles richtig - 9 Hacks für wandelbar...Thementag 2023 06 Dieses Mal machen wir alles richtig - 9 Hacks für wandelbar...
Thementag 2023 06 Dieses Mal machen wir alles richtig - 9 Hacks für wandelbar...
 
Implementierung der Knowledge Engineering Workbench in myCBR
Implementierung der Knowledge Engineering Workbench in myCBRImplementierung der Knowledge Engineering Workbench in myCBR
Implementierung der Knowledge Engineering Workbench in myCBR
 
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...
 
Tag der offenen Tür 2012 | Basislehrjahr Informatik | ZbW
Tag der offenen Tür 2012 | Basislehrjahr Informatik | ZbWTag der offenen Tür 2012 | Basislehrjahr Informatik | ZbW
Tag der offenen Tür 2012 | Basislehrjahr Informatik | ZbW
 
FMK 2013 Design, Gestaltungsmittel in Layouts, Arnold Kegebein
FMK 2013 Design, Gestaltungsmittel in Layouts, Arnold KegebeinFMK 2013 Design, Gestaltungsmittel in Layouts, Arnold Kegebein
FMK 2013 Design, Gestaltungsmittel in Layouts, Arnold Kegebein
 
CI und Android - Wie geht das? MTC2010
CI und Android - Wie geht das? MTC2010CI und Android - Wie geht das? MTC2010
CI und Android - Wie geht das? MTC2010
 
Akzeptanz-Test getriebene Produktentwicklung
Akzeptanz-Test getriebene ProduktentwicklungAkzeptanz-Test getriebene Produktentwicklung
Akzeptanz-Test getriebene Produktentwicklung
 
Quo vadis DevOps
Quo vadis DevOpsQuo vadis DevOps
Quo vadis DevOps
 
Agile Methoden in der Medizintechnik - Über die Software hinaus (CONSANIS)
Agile Methoden in der Medizintechnik - Über die Software hinaus (CONSANIS)Agile Methoden in der Medizintechnik - Über die Software hinaus (CONSANIS)
Agile Methoden in der Medizintechnik - Über die Software hinaus (CONSANIS)
 
Web-Tools für das Studium
Web-Tools für das StudiumWeb-Tools für das Studium
Web-Tools für das Studium
 

design-systems-storybook-jsdays-2021.pdf

  • 1. Andreas Wissel @andreas_wissel User Experience Architect Robuste Design Systems mit Storybook und Angular
  • 2. Robuste Design Systems mit Storybook und Angular • Design Systems Intro • Tooling • framework-agnostisch • am Beispiel Angular • platform-unabhängig Was euch erwartet 2 • technischer Deep Dive • Angular Deep Dive Was euch nicht erwartet
  • 3. Robuste Design Systems mit Storybook und Angular User Experience Architect Andreas Wissel 3 💡 Collaboration & Communication ❤ Design Systems 👨💻 Human-centric workflows 🏢 Freelance Consultant ✍ andreaswissel.com 🐦 @andreas_wissel
  • 4. Robuste Design Systems mit Storybook und Angular User Experience Architect Andreas Wissel 4 • Designer-Developer-Schnittstelle • Workflow-Optimierung • Product-led growth • Design Systems mit Storybook
  • 5. Robuste Design Systems mit Storybook und Angular Wenn's mal klappert 5
  • 6. Robuste Design Systems mit Storybook und Angular Repository: bit.ly/jsd22s-repo Setup 6
  • 7. Robuste Design Systems mit Storybook und Angular Bringt gerne jederzeit eure Projektbeispiele ein Feedback,Fragen: bit.ly/jsd22miro pw: jsdays22 Der Workshop gehört euch! 7 Agenda: 9 : 10 - 10 : 30 👨🏫 Workshop Teil 1 - mehr Intro 10 : 30 - 10 : 45 ☕ Kaffeepause 10 : 45 - 12 : 30 👩💻 Workshop Teil 2 - mehr Hands-on
  • 8. Robuste Design Systems mit Storybook und Angular • 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
  • 9. Robuste Design Systems mit Storybook und Angular Soweit die Theorie. Wie sieht die Praxis aus? 9
  • 10. Robuste Design Systems mit Storybook und Angular 10 UX von Alltagsgegenständen
  • 11. Robuste Design Systems mit Storybook und Angular 11 UX von Alltagsgegenständen
  • 12. Robuste Design Systems mit Storybook und Angular 12 UX von Alltagsgegenständen
  • 13. Robuste Design Systems mit Storybook und Angular Menschen denken in Mustern 13 User Experience im Alltag
  • 14. Robuste Design Systems mit Storybook und Angular Menschen denken in Mustern 14 User Experience im Alltag
  • 15. Robuste Design Systems mit Storybook und Angular Menschen denken in Mustern 15 User Experience im Alltag
  • 16. Robuste Design Systems mit Storybook und Angular Menschen sind Gewohnheitstiere. 16
  • 17. Robuste Design Systems mit Storybook und Angular Und ohne Muster sind wir verloren.. 17 User Experience im Alltag
  • 18. Robuste Design Systems mit Storybook und Angular Und ohne Muster sind wir verloren.. 18 Spot the difference!
  • 19. Robuste Design Systems mit Storybook und Angular • macht Features sichtbar • macht Features benutzbar • reduziert kognitive Last • schafft Zugang: • Usability • Accessibility User Experience... 19 Access denied
  • 20. Robuste Design Systems mit Storybook und Angular Verstanden. Aber wie passiert das trotzdem? 20
  • 21. Robuste Design Systems mit Storybook und Angular Der übliche Arbeitsmodus 21 Konzeption Entwicklung Test Mit etwas Glück unterhalten sich hier Menschen miteinander ...aber meistens ist das eher nicht der Fall.
  • 22. Robuste Design Systems mit Storybook und Angular • Je besser wir miteinander kommunizieren, desto mehr gemeinsames Verständnis entwickeln wir für das Produkt. • Enge Zusammenarbeit und gemeinsames Verständnis führt zu guter User Experience und besserem Code Problem: Fehlende Kommunikation 22 In diesem Workshop erarbeiten wir das Handwerkszeug für enge Zusammenarbeit.
  • 23. Robuste Design Systems mit Storybook und Angular Der gewünschte Arbeitsmodus: Kontinuität 23 Konzeption Entwicklung Test Alle Beteiligten liefern ständiges Feedback zum Inkrement ständiger Sync zwischen Design,Development,Testing
  • 24. Robuste Design Systems mit Storybook und Angular Der Workflow den wir suchen.. 24 ...sichert Konsistenz im Produkt langfristig ... ist für alle verständlich ... bringt alle an einen Tisch ... ist auf die Anforderungen anpassbar
  • 25. Robuste Design Systems mit Storybook und Angular Bauteile unseres Workflows 25 Interdisziplinäre Deliverables klare Dokumentation der Fachlichkeit Sammlung aller Komponenten
  • 26. Robuste Design Systems mit Storybook und Angular Moment mal… 26 Gibt es sowas nicht schon?
  • 27. Robuste Design Systems mit Storybook und Angular 27 • generische Lösung • Komponenten vorhanden • Individualisierung: nur innerhalb der Grenzen Beispiel: Angular Material
  • 28. Robuste Design Systems mit Storybook und Angular • generische Lösung • geht nicht auf die Bedürfnisse der Organisation ein • Komponenten vorhanden • eine gute Sache - aber nur eine Teilmenge • Individualisierung: nur innerhalb der Grenzen • nur das anpassbar, was die Library zulässt Beispiel: Angular Material 28
  • 29. Robuste Design Systems mit Storybook und Angular Moderne Design Systems: Bausteine 29 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 + }
  • 30. Robuste Design Systems mit Storybook und Angular • iterative Entwicklung von Code und UX • fail early, fail often • robuster Prozess • isolierte Komponenten • enge Zusammenarbeit • starker Austausch • interdisziplinär Die Herausforderung 30
  • 31. Robuste Design Systems mit Storybook und Angular Moderne Design Systems …treffen Softwareentwicklung 31
  • 32. Robuste Design Systems mit Storybook und Angular Fundament für skalierbare Anwendungen: Komponentenbasierte Softwareentwicklung Moderne Design Systems treffen Softwareentwicklung 32
  • 33. Robuste Design Systems mit Storybook und Angular • …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 33
  • 34. Robuste Design Systems mit Storybook und Angular Komponentenbasierte Softwareentwicklung 34 Click me! [caption]="Click me!" (click)="…" Clickety! [caption]=“Clickety!" (click)="…"
  • 35. Robuste Design Systems mit Storybook und Angular • 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 35
  • 36. Robuste Design Systems mit Storybook und Angular Zu Beginn legen wir ein neues Angular-Projekt an. Labs: http://bit.ly/jsd22s-labs Lab 0 36
  • 37. Robuste Design Systems mit Storybook und Angular • “UI component explorer for developers” • Design System in Code abbilden • Schnittstelle zwischen Design & Code • isoliertes entwickeln und testen von Komponenten • Vorbereitung auf Unit Tests • Dokumentation direkt an Komponenten Infrastruktur: Storybook 37
  • 38. Robuste Design Systems mit Storybook und Angular • framework-agnostisch • Open Source • Verwaltet von der JS Foundation • vielfältiges Plugin-Ökosystem • Möglichkeit von Snapshot Tests (visuell, code) • zero config Storybook 38
  • 39. Robuste Design Systems mit Storybook und Angular Storybook am konkreten Beispiel 39
  • 40. Robuste Design Systems mit Storybook und Angular Demo Time! Storybook am konkreten Beispiel 40
  • 41. Robuste Design Systems mit Storybook und Angular • Die Storybook-CLI erlaubt die Installation von Storybook in bestehende Projekte durch ein einziges Kommando • @storybook/cli init • Das verwendete Framework wird automatisch erkannt und die Installation darauf angepasst • für einen Großteil der Projekte funktioniert der zero config Ansatz Storybook + Angular 41
  • 42. Robuste Design Systems mit Storybook und Angular • 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 42
  • 43. Robuste Design Systems mit Storybook und Angular Als nächstes fügen wir dem Projekt Storybook hinzu. Labs: http://bit.ly/jsd22s-labs Lab 1 43
  • 44. Robuste Design Systems mit Storybook und Angular • 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 44
  • 45. Robuste Design Systems mit Storybook und Angular Figma: Komponentenbasiertes Design 45
  • 46. Robuste Design Systems mit Storybook und Angular • Demo Time! • Kommt mit zur Demo: bit.ly/ngds-figma Figma: Komponentenbasiertes Design 46
  • 47. Robuste Design Systems mit Storybook und Angular • Komponenten-Modell • Test von “Worst Case”-Werten • Responsive Design im Tool • Prototyping bildet Workflows ab Figma: Zusammenspiel mit Developer-Workflows 47
  • 48. Robuste Design Systems mit Storybook und Angular Endprodukt 48
  • 49. Robuste Design Systems mit Storybook und Angular Endprodukt 49 Form Group Header Input Input Button Login Background
  • 50. Robuste Design Systems mit Storybook und Angular • Komponentenbibliothek für Angular • Viele vorgefertigte Steuerelemente im Material Design • Open source • https://material.angular.io Angular Material 50
  • 51. Robuste Design Systems mit Storybook und Angular Angular Material 51
  • 52. Robuste Design Systems mit Storybook und Angular Was können wir von Angular Material lernen? Angular Material 52
  • 53. Robuste Design Systems mit Storybook und Angular Steuerelemente sind in einzelne Module aufgeteilt Angular Material 53
  • 54. Robuste Design Systems mit Storybook und Angular • Separation 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 54
  • 55. Robuste Design Systems mit Storybook und Angular • Ein Modul • Eine (oder wenige) Komponenten • Eine Story • Erzeugung per Schematic: • ng g @ngx-storybook/schematics:c <name> 1 : 1 : 1-Regel 55
  • 56. Robuste Design Systems mit Storybook und Angular 56 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
  • 57. Robuste Design Systems mit Storybook und Angular 57 Lab 2 Input-Binding hinzufügen Reguläre Input- Eigenschaft
  • 58. Robuste Design Systems mit Storybook und Angular Eine erste Story Storybook 58 Gruppe Name der Story Überschrift erster Ebene/Ordner/Ordner/Ordner
  • 59. Robuste Design Systems mit Storybook und Angular 59 Lab 2 Inputs können in Storybook durch props vorbelegt werden Wiederverwendbare Properties mit Args-Syntax Äquivalent zu <app-button [label]="'Submit'">
  • 60. Robuste Design Systems mit Storybook und Angular Wir implementieren eine erste eigene Komponente. Labs: bit.ly/jsd22s-labs Lab 2 60
  • 61. Robuste Design Systems mit Storybook und Angular Lab 2: Unsere erste eigene Komponente 61
  • 62. Robuste Design Systems mit Storybook und Angular • offener ES6-basierter Standard • Augenmerk auf Wiederverwendbarkeit • Integration mit anderen Tools geplant Storybook: Component Story Format 62
  • 63. Robuste Design Systems mit Storybook und Angular ☕ Pause 63
  • 64. Robuste Design Systems mit Storybook und Angular Lab 3: "Make it pop" 64 Wir stylen mithilfe von Figma die Button-Komponente
  • 65. Robuste Design Systems mit Storybook und Angular Als nächstes übertragen wir die vom Designer erstellten CSS- Stile aus Figma auf unsere bestehende ButtonComponent. Labs: bit.ly/jsd22s-labs Lab 3 65
  • 66. Robuste Design Systems mit Storybook und Angular Button-Hintergrund Styling Lab 3 66
  • 67. Robuste Design Systems mit Storybook und Angular Button-Label Styling Lab 3 67
  • 68. Robuste Design Systems mit Storybook und Angular Button-Label Positionierung Lab 3 68
  • 69. Robuste Design Systems mit Storybook und Angular Lab 3 69
  • 70. Robuste Design Systems mit Storybook und Angular • machen Komponenten für Nicht-Entwickler zugänglich • Input Bindings über eine dedizierte UI befüllen • verschiedenste Eingabemöglichkeiten • werden automatisch beim Erstellen von Properties (Args) generiert • Testdaten können in Unit-/E2E-Tests wiederverwendet werden Storybook: Controls 70
  • 71. Robuste Design Systems mit Storybook und Angular Storybook: Controls 71
  • 72. Robuste Design Systems mit Storybook und Angular • der Typ des Controls wird wenn möglich aus dem Binding oder dessen Default-Wert abgeleitet • weitere Typen sind konfigurierbar • auch Controls die nicht direkt zu einer Komponente gehören sind möglich (bspw. Demo-Daten für komplexe Stories) Storybook: Typen von Controls 72
  • 73. Robuste Design Systems mit Storybook und Angular Storybook: Typen von Controls 73
  • 74. Robuste Design Systems mit Storybook und Angular Storybook: Typen von Controls 74
  • 75. Robuste Design Systems mit Storybook und Angular Storybook: Typen von Controls 75
  • 76. Robuste Design Systems mit Storybook und Angular Storybook: Typen von Controls 76
  • 77. Robuste Design Systems mit Storybook und Angular Storybook: Typen von Controls 77
  • 78. Robuste Design Systems mit Storybook und Angular 78 Storybook: Typen von Controls Groups
  • 79. Robuste Design Systems mit Storybook und Angular 79 Lab 4 Inputs können in Storybook durch props vorbelegt werden Wiederverwendbare Properties mit Args-Syntax Äquivalent zu <app-button [label]="'Submit'">
  • 80. Robuste Design Systems mit Storybook und Angular Controls: Simpel, aber mächtig Lab 4 80 spezifischer Typ Namen und Typen werden aus Args generiert Standardwerte eigener Name
  • 81. Robuste Design Systems mit Storybook und Angular Mehr Info's gibt's hier: bit.ly/jsd22s-labs Lab 4 81
  • 82. Robuste Design Systems mit Storybook und Angular Lab 4: Controls 82
  • 83. Robuste Design Systems mit Storybook und Angular Und,wie war's? 83
  • 84. Robuste Design Systems mit Storybook und Angular • wichtigstes Standbein, ohne Dokumentation keine Akzeptanz • Varianten in Storybook • DocsPage • MDX • Doc Blocks Storybook: Dokumentation 84
  • 85. Robuste Design Systems mit Storybook und Angular • automatisch generiert • zero-config Ansatz • im Addon Docs enthalten • Dokumentation direkt an Komponenten Storybook: DocsPage 85
  • 86. Robuste Design Systems mit Storybook und Angular • Bindings und Methoden werden automatisch dokumentiert • Dokumentation bzw. Beschreibung wird direkt an der Angular- Komponente gepflegt Storybook: Dokumentation der ButtonComponent 86
  • 87. Robuste Design Systems mit Storybook und Angular Um die Docs zu generieren, muss der Storybook-Prozess einmalig durchgestartet werden. Compodoc wird nur zu Beginn einmalig ausgeführt. Lab 5: Nota bene 87
  • 88. Robuste Design Systems mit Storybook und Angular Zum Abschluss der Button-Komponente wollen wir diese noch sauber dokumentieren. Labs: bit.ly/jsd22s-labs Lab 5 88
  • 89. Robuste Design Systems mit Storybook und Angular Button-Story mit Docs und Controls Lab 5 89
  • 90. Robuste Design Systems mit Storybook und Angular • als nächstes wollen wir eine Komponente bauen, die sich aus mehreren Komponenten zusammensetzt • hierbei machen wir vom Konzept der Content Projection Gebrauch (im Storybook-Sprech auch composite components genannt) Komposition von Komponenten 90
  • 91. Robuste Design Systems mit Storybook und Angular • Kombiniertes Steuerelement aus Label und Eingabeelement • Ziel: Alle Eigenschaften per Control steuern Input 91 Type Label Placeholder 'text' | 'email' | 'password' string string
  • 92. Robuste Design Systems mit Storybook und Angular Content Projection Form Group 92 Überschrift Projizierter Inhalt
  • 93. Robuste Design Systems mit Storybook und Angular • 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 93
  • 94. Robuste Design Systems mit Storybook und Angular Wir implementieren eine Story für eine Komponente, deren Inhalt von der äußeren Verwendung abhängig ist. Labs: bit.ly/jsd22s-labs Lab 6 94
  • 95. Robuste Design Systems mit Storybook und Angular Die Input-Komponente Lab 6 95
  • 96. Robuste Design Systems mit Storybook und Angular Lab 6 96 Projizierter Inhalt Spaltendefinition
  • 97. Robuste Design Systems mit Storybook und Angular Lab 6 97 Inline- Templates sind möglich Deklaration von Abhängigkeiten
  • 98. Robuste Design Systems mit Storybook und Angular Login-Komponente 98 Zusammenführung aller erstellten Komponenten
  • 99. Robuste Design Systems mit Storybook und Angular • Input-Properties für Username und Passwort • Decorator für Imports • Mocks in Storybook Login-Komponente 99
  • 100. Robuste Design Systems mit Storybook und Angular 100 Lab 7 Login-Komponente und Mocks
  • 101. Robuste Design Systems mit Storybook und Angular • Dieselben Mocks, die für Storybook implementiert werden, können dank Standard ES6 unverändert auch für Unit Tests verwendet werden (und umgekehrt) Mocking 101
  • 102. Robuste Design Systems mit Storybook und Angular 102 Lab 7 Mock-Service
  • 103. Robuste Design Systems mit Storybook und Angular 103 Lab 7 Story
  • 104. Robuste Design Systems mit Storybook und Angular Wrap-up – Technologien 104 – überall anwendbar –
  • 105. Robuste Design Systems mit Storybook und Angular 1. Designer*in erstellt eine Komponente in Figma 2. Entwickler*in generiert ein passendes Modul, eine Komponente sowie eine Story 3. Entwickler*in übernimmt die CSS-Stile aus Figma 4. Entwickler*in implementiert den HTML-Aufbau und übernimmt die Logik 5. Entwickler*in implementiert eine passende Story (und Unit-Tests) 6. Review mit der Designer*in, bei Bedarf die obigen Schritte wiederholen Wrap-Up – Workflow (auch für kleine Testballons) 105
  • 106. Robuste Design Systems mit Storybook und Angular • echte Komponenten • ausgiebige Dokumentation • modulare, isolierte Entwicklung • einfachere Wartbarkeit • brown field-geeignet • konsistentere User Experience • Bonus: Unit-Tests profitieren von Mock-Daten Wrap-Up - Design Systems mit Storybook 106
  • 107. Robuste Design Systems mit Storybook und Angular 107 Vielen Dank! 🐦 @andreas_wissel 📨 business@andreaswissel.com ✍ andreaswissel.com
  • 108. Robuste Design Systems mit Storybook und Angular Repo bit.ly/jsd22s-repo Labs bit.ly/jsd22s-labs Figma bit.ly/ng-ds-figma Slides bit.ly/jsd22s-slides 108
  • 109. Robuste Design Systems mit Storybook und Angular 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 109