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
Wir implementieren eine erste eigene Komponente.


Labs: bit.ly/jsd22s-labs


Lab 2
57
Robuste Design Systems mit Storybook und Angular
58
Lab 2
Input-Binding hinzufügen
Reguläre Input-
Eigenschaft
Robuste Design Systems mit Storybook und Angular
Eine erste Story
Storybook
59
Gruppe
Name der Story
Überschrift erster Ebene/Ordner/Ordner/Ordner
Robuste Design Systems mit Storybook und Angular
60
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
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: Einfache Typen von Controls
73
Robuste Design Systems mit Storybook und Angular
Storybook: Komplexere Typen von Controls
74
Robuste Design Systems mit Storybook und Angular
Storybook: Komplexere Typen von Controls
75
Robuste Design Systems mit Storybook und Angular
76
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
77
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
78
Robuste Design Systems mit Storybook und Angular
Lab 4: Controls
79
Robuste Design Systems mit Storybook und Angular
Und,wie war's?
80
Robuste Design Systems mit Storybook und Angular
• wichtigstes Standbein, ohne Dokumentation keine Akzeptanz


• Varianten in Storybook


• DocsPage


• MDX


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


• zero-config Ansatz


• im Addon Docs enthalten


• Dokumentation direkt an
Komponenten
Storybook: DocsPage
82
Robuste Design Systems mit Storybook und Angular
• Markdown + TSX


• Format zur Dokumentation in
Storybook


• Komponenten können direkt im
Markdown eingebunden werden


• vorgefertigte Komponenten von
Storybook: Doc Blocks
MDX Format
83
Robuste Design Systems mit Storybook und Angular
• einzelne Blöcke zur
Dokumentation, wie z.B. Source
Code, Story oder Canvas


• verwendbar um Dokumentation
und Komponenten zu
verschmelzen
Doc Blocks
84
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
85
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
86
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
87
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
88
Robuste Design Systems mit Storybook und Angular
• Markdown + TSX


• Format zur Dokumentation in
Storybook


• Komponenten können direkt im
Markdown eingebunden werden


• vorgefertigte Komponenten von
Storybook: Doc Blocks
MDX Format
89
Robuste Design Systems mit Storybook und Angular
• einzelne Blöcke zur
Dokumentation, wie z.B. Source
Code, Story oder Canvas


• verwendbar um Dokumentation
und Komponenten zu
verschmelzen
Doc Blocks
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
91
Robuste Design Systems mit Storybook und Angular
• Kombiniertes Steuerelement aus Label und Eingabeelement


• Ziel: Alle Eigenschaften per Control steuern
Input
92
Type
Label
Placeholder
'text' | 'email' | 'password'
string
string
Robuste Design Systems mit Storybook und Angular
Content Projection
Form Group
93
Ü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
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
95
Robuste Design Systems mit Storybook und Angular
Die Input-Komponente
Lab 6
96
Robuste Design Systems mit Storybook und Angular
Lab 6
97
Projizierter Inhalt Spaltendefinition
Robuste Design Systems mit Storybook und Angular
Lab 6
98
Inline-
Templates sind
möglich
Deklaration von
Abhängigkeiten
Robuste Design Systems mit Storybook und Angular
Login-Komponente
99
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
100
Robuste Design Systems mit Storybook und Angular
101
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
102
Robuste Design Systems mit Storybook und Angular
103
Lab 7
Mock-Service
Robuste Design Systems mit Storybook und Angular
104
Lab 7
Story
Robuste Design Systems mit Storybook und Angular
105
Figma,Storybook,Angular,Cypress
Wrap-Up: Technologien
Konzeption Entwicklung Test
Robuste Design Systems mit Storybook und Angular
• Browserbasiert mit nativen Apps


• Design Libraries


• Components, Constraints, Grids, uvm.


• Prototyping


• (rudimentäre) CSS-Generierung


• Kommerziell, kostenfrei nutzbar (für öffentliche Projekte)
Figma: Komponentenbasiertes Design
106
Robuste Design Systems mit Storybook und Angular
• Open Source


• “UI component explorer for developers”


• Design System in Code abbilden


• Schnittstelle zwischen Design & Code


• isoliertes entwickeln und testen von Komponenten


• Dokumentation direkt an Komponenten
Storybook
107
Robuste Design Systems mit Storybook und Angular
• verwendet das Konzept komponentenbasierter
Softwareentwicklung


• bietet ein starkes Architekturfundament


• eröffnet einen möglichen Migrationspfad auf Web
Components
Angular
108
Robuste Design Systems mit Storybook und Angular
Storybook
Component
109
Component Design Lifecycle
Learning
Fachliches
Konzept
Review:
Konzept
Dev
UX PM
Design-
konzept
Review:
Konzept
Dev
UX Dev
Review:
Component
Dev
UX
Release
QA
Implementation
im Produkt
Feedback: Real
World Usage
Refinement
Dev
Dev
UX QA
Robuste Design Systems mit Storybook und Angular
110
Ubiquitous Language: Eine Sprache für alle
Learning
• Idee kommt aus Domain Driven Design


• Verwendung von gleichem Vokabular in
Requirements und Code (aber auch
Design)


• weniger Mehrdeutigkeit


• Angleichung der Komponentenschnitte
Robuste Design Systems mit Storybook und Angular
111
So helfen Design Systems der Organisation
Convince Your Manager Package
• reduziert drastisch die Bugrate für visuelle Fehler


• Standardkomponenten reduzieren
Implementierungsaufwand in Produktteams


• Entwicklungsphasen sind nicht mehr zyklisch,
Probleme werden sofort behoben


• Business Requirements werden schärfer,
Verständnis der Devs wächst
Robuste Design Systems mit Storybook und Angular
112
So helfen Design Systems der Organisation
Convince Your Manager Package
• Innovation durch Iteration: MVP's können mittels
Standardkomponenten sehr schnell an den
Markt gebracht werden


• weniger Wissenssilos: im Design System wird
klar dokumentiert, der Code basiert nicht auf
impliziten Wissen
Robuste Design Systems mit Storybook und Angular
113
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
114
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
115

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 Praxis
Roberto 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.0
thoemmes
 
Cusy Developer-Baukasten
Cusy Developer-BaukastenCusy Developer-Baukasten
Cusy Developer-Baukasten
cusy GmbH
 
Continuous Everything
Continuous EverythingContinuous Everything
Continuous Everything
cusy 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 Zukunft
David 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-Erfahrungen
Symposia 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 Minuten
Roland Mast
 
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...
IKS Gesellschaft für Informations- und Kommunikationssysteme mbH
 
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
Alexander 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 | ZbW
Christian 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? MTC2010
Markus Kopf
 
Akzeptanz-Test getriebene Produktentwicklung
Akzeptanz-Test getriebene ProduktentwicklungAkzeptanz-Test getriebene Produktentwicklung
Akzeptanz-Test getriebene Produktentwicklung
Michael Brandt
 
Quo vadis DevOps
Quo vadis DevOpsQuo vadis DevOps
Quo vadis DevOps
cusy 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
 
Webtools studium
Webtools studiumWebtools studium
Webtools studium
Elsy Zollikofer
 

Ä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)
 
Webtools studium
Webtools studiumWebtools studium
Webtools 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 Wir implementieren eine erste eigene Komponente. Labs: bit.ly/jsd22s-labs Lab 2 57
  • 58. Robuste Design Systems mit Storybook und Angular 58 Lab 2 Input-Binding hinzufügen Reguläre Input- Eigenschaft
  • 59. Robuste Design Systems mit Storybook und Angular Eine erste Story Storybook 59 Gruppe Name der Story Überschrift erster Ebene/Ordner/Ordner/Ordner
  • 60. Robuste Design Systems mit Storybook und Angular 60 Lab 2 Inputs können in Storybook durch props vorbelegt werden Wiederverwendbare Properties mit Args-Syntax Äquivalent zu <app-button [label]="'Submit'">
  • 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: Einfache Typen von Controls 73
  • 74. Robuste Design Systems mit Storybook und Angular Storybook: Komplexere Typen von Controls 74
  • 75. Robuste Design Systems mit Storybook und Angular Storybook: Komplexere Typen von Controls 75
  • 76. Robuste Design Systems mit Storybook und Angular 76 Lab 4 Inputs können in Storybook durch props vorbelegt werden Wiederverwendbare Properties mit Args-Syntax Äquivalent zu <app-button [label]="'Submit'">
  • 77. Robuste Design Systems mit Storybook und Angular Controls: Simpel, aber mächtig Lab 4 77 spezifischer Typ Namen und Typen werden aus Args generiert Standardwerte eigener Name
  • 78. Robuste Design Systems mit Storybook und Angular Mehr Info's gibt's hier: bit.ly/jsd22s-labs Lab 4 78
  • 79. Robuste Design Systems mit Storybook und Angular Lab 4: Controls 79
  • 80. Robuste Design Systems mit Storybook und Angular Und,wie war's? 80
  • 81. Robuste Design Systems mit Storybook und Angular • wichtigstes Standbein, ohne Dokumentation keine Akzeptanz • Varianten in Storybook • DocsPage • MDX • Doc Blocks Storybook: Dokumentation 81
  • 82. Robuste Design Systems mit Storybook und Angular • automatisch generiert • zero-config Ansatz • im Addon Docs enthalten • Dokumentation direkt an Komponenten Storybook: DocsPage 82
  • 83. Robuste Design Systems mit Storybook und Angular • Markdown + TSX • Format zur Dokumentation in Storybook • Komponenten können direkt im Markdown eingebunden werden • vorgefertigte Komponenten von Storybook: Doc Blocks MDX Format 83
  • 84. Robuste Design Systems mit Storybook und Angular • einzelne Blöcke zur Dokumentation, wie z.B. Source Code, Story oder Canvas • verwendbar um Dokumentation und Komponenten zu verschmelzen Doc Blocks 84
  • 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 85
  • 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 86
  • 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 87
  • 88. 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 88
  • 89. Robuste Design Systems mit Storybook und Angular • Markdown + TSX • Format zur Dokumentation in Storybook • Komponenten können direkt im Markdown eingebunden werden • vorgefertigte Komponenten von Storybook: Doc Blocks MDX Format 89
  • 90. Robuste Design Systems mit Storybook und Angular • einzelne Blöcke zur Dokumentation, wie z.B. Source Code, Story oder Canvas • verwendbar um Dokumentation und Komponenten zu verschmelzen Doc Blocks 90
  • 91. 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 91
  • 92. Robuste Design Systems mit Storybook und Angular • Kombiniertes Steuerelement aus Label und Eingabeelement • Ziel: Alle Eigenschaften per Control steuern Input 92 Type Label Placeholder 'text' | 'email' | 'password' string string
  • 93. Robuste Design Systems mit Storybook und Angular Content Projection Form Group 93 Überschrift Projizierter Inhalt
  • 94. 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 94
  • 95. 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 95
  • 96. Robuste Design Systems mit Storybook und Angular Die Input-Komponente Lab 6 96
  • 97. Robuste Design Systems mit Storybook und Angular Lab 6 97 Projizierter Inhalt Spaltendefinition
  • 98. Robuste Design Systems mit Storybook und Angular Lab 6 98 Inline- Templates sind möglich Deklaration von Abhängigkeiten
  • 99. Robuste Design Systems mit Storybook und Angular Login-Komponente 99 Zusammenführung aller erstellten Komponenten
  • 100. Robuste Design Systems mit Storybook und Angular • Input-Properties für Username und Passwort • Decorator für Imports • Mocks in Storybook Login-Komponente 100
  • 101. Robuste Design Systems mit Storybook und Angular 101 Lab 7 Login-Komponente und Mocks
  • 102. 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 102
  • 103. Robuste Design Systems mit Storybook und Angular 103 Lab 7 Mock-Service
  • 104. Robuste Design Systems mit Storybook und Angular 104 Lab 7 Story
  • 105. Robuste Design Systems mit Storybook und Angular 105 Figma,Storybook,Angular,Cypress Wrap-Up: Technologien Konzeption Entwicklung Test
  • 106. Robuste Design Systems mit Storybook und Angular • Browserbasiert mit nativen Apps • Design Libraries • Components, Constraints, Grids, uvm. • Prototyping • (rudimentäre) CSS-Generierung • Kommerziell, kostenfrei nutzbar (für öffentliche Projekte) Figma: Komponentenbasiertes Design 106
  • 107. Robuste Design Systems mit Storybook und Angular • Open Source • “UI component explorer for developers” • Design System in Code abbilden • Schnittstelle zwischen Design & Code • isoliertes entwickeln und testen von Komponenten • Dokumentation direkt an Komponenten Storybook 107
  • 108. Robuste Design Systems mit Storybook und Angular • verwendet das Konzept komponentenbasierter Softwareentwicklung • bietet ein starkes Architekturfundament • eröffnet einen möglichen Migrationspfad auf Web Components Angular 108
  • 109. Robuste Design Systems mit Storybook und Angular Storybook Component 109 Component Design Lifecycle Learning Fachliches Konzept Review: Konzept Dev UX PM Design- konzept Review: Konzept Dev UX Dev Review: Component Dev UX Release QA Implementation im Produkt Feedback: Real World Usage Refinement Dev Dev UX QA
  • 110. Robuste Design Systems mit Storybook und Angular 110 Ubiquitous Language: Eine Sprache für alle Learning • Idee kommt aus Domain Driven Design • Verwendung von gleichem Vokabular in Requirements und Code (aber auch Design) • weniger Mehrdeutigkeit • Angleichung der Komponentenschnitte
  • 111. Robuste Design Systems mit Storybook und Angular 111 So helfen Design Systems der Organisation Convince Your Manager Package • reduziert drastisch die Bugrate für visuelle Fehler • Standardkomponenten reduzieren Implementierungsaufwand in Produktteams • Entwicklungsphasen sind nicht mehr zyklisch, Probleme werden sofort behoben • Business Requirements werden schärfer, Verständnis der Devs wächst
  • 112. Robuste Design Systems mit Storybook und Angular 112 So helfen Design Systems der Organisation Convince Your Manager Package • Innovation durch Iteration: MVP's können mittels Standardkomponenten sehr schnell an den Markt gebracht werden • weniger Wissenssilos: im Design System wird klar dokumentiert, der Code basiert nicht auf impliziten Wissen
  • 113. Robuste Design Systems mit Storybook und Angular 113 Vielen Dank! 🐦 @andreas_wissel 📨 business@andreaswissel.com ✍ andreaswissel.com
  • 114. 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 114
  • 115. 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 115