SlideShare a Scribd company logo
1 of 105
Download to read offline
Andreas Wissel
@andreas_wissel
User Experience Architect
Robuste Design Systems mit Storybook und Angular
Robuste Design Systems mit Storybook und Angular
• Design Systems Intr
o

• Tooling
 

• framework-agnostisc
h

• am Beispiel Angula
r

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

• Angular Deep Div
e

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

❤ Design System
s

👨💻 Human-centric workflows
🏢 Freelance Consultan
t

✍ andreaswissel.com
🐦 @andreas_wissel
Robuste Design Systems mit Storybook und Angular
User Experience Architect
Andreas Wissel
4
• Designer-Developer-Schnittstell
e

• Workflow-Optimierun
g

• Product-led growt
h

• 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/jsdays2021-repo
Setup
6
Robuste Design Systems mit Storybook und Angular
Bringt gerne jederzeit eure
Projektbeispiele ei
n

Feedback, Fragen
:

bit.ly/jsdays2021-mir
o

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

9:10 - 10:30
 

👨🏫 Workshop Teil 1 - mehr Intr
o

10:30 - 10:45
 

☕ Kaffeepaus
e

10:45 - 12:30
 

👩💻 Workshop Teil 2 - mehr Hands-on
Robuste Design Systems mit Storybook und Angular
• Dachbegrif
f

• “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
UX: Ein Musterbeispiel
9
Robuste Design Systems mit Storybook und Angular
Menschen denken in Mustern
10
User Experience im Alltag
Robuste Design Systems mit Storybook und Angular
Menschen denken in Mustern
11
User Experience im Alltag
Robuste Design Systems mit Storybook und Angular
Menschen denken in Mustern
12
User Experience im Alltag
Robuste Design Systems mit Storybook und Angular
Menschen sind Gewohnheitstiere.
13
Robuste Design Systems mit Storybook und Angular
Und ohne Muster sind wir verloren..
14
User Experience im Alltag
Robuste Design Systems mit Storybook und Angular
• macht Features sichtba
r

• macht Features benutzba
r

• reduziert kognitive Las
t

• schafft Zugang
:

• Usabilit
y

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

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

... 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
Die Arbeitsthese
18
Dieser Talk soll das nötige Handwerkszeug für enge
Zusammenarbeit geben
Robuste Design Systems mit Storybook und Angular
Der gewünschte Arbeitsmodus
19
Iterative Entwicklung
 

der Komponente
ständiger Sync zwischen
 

Entwicklung und Design
Robuste Design Systems mit Storybook und Angular
Der Workflow den wir suchen
20
sichert Konsistenz langfristi
g

für alle verständlich
nicht in Stein gemeißel
t

einfach integrierbar
Robuste Design Systems mit Storybook und Angular
Der erste Baustein: Design System
21
Sammlung aller
Komponenten
klar definierte
Use-Cases
Zusammenspiel
aller Disziplinen
Robuste Design Systems mit Storybook und Angular
Moment mal…
22
gibt es sowas nicht schon?
Robuste Design Systems mit Storybook und Angular
23
• generische Lösun
g

• Komponenten vorhande
n

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

• geht nicht auf die Bedürfnisse der Organisation ei
n

• Komponenten vorhande
n

• eine gute Sache - aber nur eine Teilmeng
e

• Individualisierung: nur innerhalb der Grenze
n

• nur das anpassbar, was die Library zulässt
Beispiel: Angular Material
24
Robuste Design Systems mit Storybook und Angular
Moderne Design Systems: Bausteine
25
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 U
X

• fail early, fail ofte
n

• robuster Prozes
s

• isolierte Komponente
n

• enge Zusammenarbei
t

• starker Austausc
h

• interdisziplinär
Die Herausforderung
26
Robuste Design Systems mit Storybook und Angular
Moderne Design Systems

…treffen Softwareentwicklung
27
Robuste Design Systems mit Storybook und Angular
Fundament für skalierbare Anwendungen:
Komponentenbasierte Softwareentwicklung
Moderne Design Systems treffen Softwareentwicklung
28
Robuste Design Systems mit Storybook und Angular
• …ist so alt wie Softwarearchitektur selbs
t

• Idee übertragen aus der Industri
e

• abgeschlossen, black-bo
x

• wohldefinierte Ein- und Ausgäng
e

• einfach testba
r

• wiederverwendba
r

• flexibe
l

• von Drittanbietern erhältlich
Komponentenbasierte Softwareentwicklung
29
Robuste Design Systems mit Storybook und Angular
Komponentenbasierte Softwareentwicklung
30
Click me!
[caption]="Click me!" (click)="…"
Clickety!
[caption]=“Clickety!" (click)="…"
Robuste Design Systems mit Storybook und Angular
• verwendet das Konzept komponentenbasierter
Softwareentwicklun
g

• erlaubt die Kapselung von CSS-Stilen
(ViewEncapsulation) zur Vermeidung von monolithischem
CS
S

• eröffnet einen möglichen Migrationspfad auf Web
Components
Angular
31
Robuste Design Systems mit Storybook und Angular
Zu Beginn legen wir ein neues Angular-Projekt an
.

Labs: http://bit.ly/jsdays2021-labs
Lab 0
32
Robuste Design Systems mit Storybook und Angular
• “UI component explorer for developers
”

• Design System in Code abbilde
n

• Schnittstelle zwischen Design & Cod
e

• isoliertes entwickeln und testen von Komponente
n

• Vorbereitung auf Unit Test
s

• Dokumentation direkt an Komponenten
Infrastruktur: Storybook
33
Robuste Design Systems mit Storybook und Angular
• framework-agnostisc
h

• Open Sourc
e

• Verwaltet von der JS Foundatio
n

• vielfältiges Plugin-Ökosyste
m

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

• zero config
Storybook
34
Robuste Design Systems mit Storybook und Angular
Storybook am konkreten Beispiel
35
Robuste Design Systems mit Storybook und Angular
Demo Time!
Storybook am konkreten Beispiel
36
Robuste Design Systems mit Storybook und Angular
• Die Storybook-CLI erlaubt die Installation von Storybook in
bestehende Projekte durch ein einziges Kommand
o

• @storybook/cli init


• Das verwendete Framework wird automatisch erkannt und
die Installation darauf angepass
t

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

Labs: http://bit.ly/jsdays2021-labs
Lab 1
39
Robuste Design Systems mit Storybook und Angular
• Browserbasiert mit nativen App
s

• Zusammenarbeit in Echtzei
t

• Components, Constraints, Grids, uvm
.

• Prototypin
g

• (rudimentäre) CSS-Generierun
g

• Kommerziell, kostenfrei nutzbar (für öffentliche Projekte)
Figma: Komponentenbasiertes Design
40
Robuste Design Systems mit Storybook und Angular
Figma: Komponentenbasiertes Design
41
Robuste Design Systems mit Storybook und Angular
• Demo Time
!

• Kommt mit zur Demo: bit.ly/jsdays-2020-figma
Figma: Komponentenbasiertes Design
42
Robuste Design Systems mit Storybook und Angular
• Komponenten-Model
l

• Test von “Worst Case”-Werte
n

• Responsive Design im Too
l

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

• Viele vorgefertigte Steuerelemente im Material Desig
n

• Open sourc
e

• https://material.angular.io
Angular Material
46
Robuste Design Systems mit Storybook und Angular
Angular Material
47
Robuste Design Systems mit Storybook und Angular
Was können wir von Angular Material lernen?
Angular Material
48
Robuste Design Systems mit Storybook und Angular
Steuerelemente sind in einzelne Module aufgeteilt
Angular Material
49
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
50
Robuste Design Systems mit Storybook und Angular
• Ein Modu
l

• Eine (oder wenige) Komponente
n

• Eine Stor
y

• Erzeugung per Schematic
:

• ng g @ngx-storybook/schematics:c <name>
1:1:1-Regel
51
Robuste Design Systems mit Storybook und Angular
52
Lab 2
• Ein neues Steuerelement (Button) per Schematic
einführe
n

• Input-Property für die Beschriftung der Schaltfläche
hinzufüge
n

• Input-Binding in Storybook testen
Beschriftung
Robuste Design Systems mit Storybook und Angular
53
Lab 2
Input-Binding hinzufügen
Reguläre Input-
Eigenschaft
Robuste Design Systems mit Storybook und Angular
Eine erste Story
Storybook
54
Gruppe
Name der Story
Überschrift erster Ebene/Ordner/Ordner/Ordner
Robuste Design Systems mit Storybook und Angular
55
Lab 2
Inputs können in Storybook durch props vorbelegt werden
Wiederverwendbare
Properties mit Args-
Syntax
Äquivalent z
u

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

Labs: bit.ly/jsdays2021-labs
Lab 2
56
Robuste Design Systems mit Storybook und Angular
Lab 2: Unsere erste eigene Komponente
57
Robuste Design Systems mit Storybook und Angular
• offener ES6-basierter Standar
d

• Augenmerk auf
Wiederverwendbarkei
t

• Integration mit anderen Tools
geplant
Storybook: Component Story Format
58
Robuste Design Systems mit Storybook und Angular
☕
Pause
59
Robuste Design Systems mit Storybook und Angular
Lab 3: "Make it pop"
60
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/jsdays2021-labs
Lab 3
61
Robuste Design Systems mit Storybook und Angular
Button-Hintergrund Stylin
g

Lab 3
62
Robuste Design Systems mit Storybook und Angular
Button-Label Stylin
g

Lab 3
63
Robuste Design Systems mit Storybook und Angular
Button-Label Positionierun
g

Lab 3
64
Robuste Design Systems mit Storybook und Angular
Lab 3
65
Robuste Design Systems mit Storybook und Angular
• machen Komponenten für Nicht-Entwickler zugänglic
h

• Input Bindings über eine dedizierte UI befülle
n

• verschiedenste Eingabemöglichkeite
n

• werden automatisch beim Erstellen von Properties (Args)
generiert
 

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

• weitere Typen sind konfigurierba
r

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

<app-button
[label]="'Submit'">
Robuste Design Systems mit Storybook und Angular
Controls: Simpel, aber mächtig
Lab 4
76
spezifischer Typ
Namen und
Typen werden
aus Args
generiert
Standardwerte
eigener Name
Robuste Design Systems mit Storybook und Angular
bit.ly/jsdays2021-labs
Lab 4
77
Robuste Design Systems mit Storybook und Angular
Lab 4: Controls
78
Robuste Design Systems mit Storybook und Angular
Und, wie war's?
79
Robuste Design Systems mit Storybook und Angular
• wichtigstes Standbein, ohne Dokumentation keine
Akzeptan
z

• Varianten in Storyboo
k

• DocsPag
e

• MD
X

• Doc Blocks
Storybook: Dokumentation
80
Robuste Design Systems mit Storybook und Angular
• automatisch generier
t

• zero-config Ansat
z

• im Addon Docs enthalte
n

• Dokumentation direkt an
Komponenten
Storybook: DocsPage
81
Robuste Design Systems mit Storybook und Angular
• Bindings und Methoden werden
automatisch dokumentier
t

• Dokumentation bzw. Beschreibung
wird direkt an der Angular-
Komponente gepflegt
Storybook: Dokumentation der ButtonComponent
82
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
83
Robuste Design Systems mit Storybook und Angular
Zum Abschluss der Button-Komponente wollen wir diese
noch sauber dokumentieren.
 

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

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

• Ziel: Alle Eigenschaften per Control steuern
Input
87
Type
Label
Placeholder
'text' | 'email' | 'password'
string
string
Robuste Design Systems mit Storybook und Angular
Content Projection
Form Group
88
Überschrift
Projizierter
Inhalt
Robuste Design Systems mit Storybook und Angular
• Container-Komponente mit Content-Projectio
n

• ModuleMetadata-Decorator um Module in der Story zu
importiere
n

• Storybook bringt ein eigenes Angular-Modul mi
t

• Definition von Komponenten sowie Verwendung von Inline-
Templates sind auch in Storys möglic
h

• über verwendete Module muss Storybook Bescheid wissen
Form Group
89
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/jsdays2021-labs
Lab 6
90
Robuste Design Systems mit Storybook und Angular
Die Input-Komponente
Lab 6
91
Robuste Design Systems mit Storybook und Angular
Lab 6
92
Projizierter Inhalt Spaltendefinition
Robuste Design Systems mit Storybook und Angular
Lab 6
93
Inline-
Templates
sind möglich
Deklaration von
Abhängigkeiten
Robuste Design Systems mit Storybook und Angular
Login-Komponente
94
Zusammenführung aller erstellten Komponenten
Robuste Design Systems mit Storybook und Angular
• Input-Properties für Username und Passwor
t

• Decorator für Import
s

• Mocks in Storybook
Login-Komponente
95
Robuste Design Systems mit Storybook und Angular
96
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
97
Robuste Design Systems mit Storybook und Angular
98
Lab 7
Mock-Service
Robuste Design Systems mit Storybook und Angular
99
Lab 7
Story
Robuste Design Systems mit Storybook und Angular
Wrap-up – Technologien
100
– überall anwendbar –
Robuste Design Systems mit Storybook und Angular
1. Designer*in erstellt eine Komponente in Figm
a

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

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

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

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)
101
Robuste Design Systems mit Storybook und Angular
• echte Komponente
n

• ausgiebige Dokumentatio
n

• modulare, isolierte Entwicklun
g

• einfachere Wartbarkei
t

• brown field-geeigne
t

• konsistentere User Experienc
e

• Bonus: Unit-Tests profitieren von Mock-Daten
Wrap-Up - Design Systems mit Storybook
102
Robuste Design Systems mit Storybook und Angular
103
Vielen Dank!
🐦 @andreas_wisse
l

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

bit.ly/jsdays2021-repo
Labs
 

bit.ly/jsdays2021-labs
Figma
 

bit.ly/ng-ds-figma
Slides
 

bit.ly/jsdays2021-slides
104
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
105

More Related Content

Similar to Robuste Design Systems mit Storybook und Angular

Configuring in the Browser, Really!
Configuring in the Browser, Really!Configuring in the Browser, Really!
Configuring in the Browser, Really!Tim Geisler
 
Cloud-based Modelling Solutions Empowering Tool Integration
Cloud-based Modelling Solutions Empowering Tool IntegrationCloud-based Modelling Solutions Empowering Tool Integration
Cloud-based Modelling Solutions Empowering Tool IntegrationIstvan Rath
 
PHP Unconference Continuous Integration
PHP Unconference Continuous IntegrationPHP Unconference Continuous Integration
PHP Unconference Continuous IntegrationNils Hofmeister
 
Innovations in Sencha Tooling and Framework
Innovations in Sencha Tooling and FrameworkInnovations in Sencha Tooling and Framework
Innovations in Sencha Tooling and FrameworkSandeep Adwankar
 
DemoCamp Budapest 2016 - Introdcution
DemoCamp Budapest 2016 - IntrodcutionDemoCamp Budapest 2016 - Introdcution
DemoCamp Budapest 2016 - IntrodcutionÁkos Horváth
 
DevOpsCon 2015 - DevOps in Mobile Games
DevOpsCon 2015 - DevOps in Mobile GamesDevOpsCon 2015 - DevOps in Mobile Games
DevOpsCon 2015 - DevOps in Mobile GamesAndreas Katzig
 
Forge - DevCon 2016: Implementing Rich Applications in the Browser
Forge - DevCon 2016: Implementing Rich Applications in the BrowserForge - DevCon 2016: Implementing Rich Applications in the Browser
Forge - DevCon 2016: Implementing Rich Applications in the BrowserAutodesk
 
DevOps para Open Source com Azure DevOps
DevOps para Open Source com Azure DevOpsDevOps para Open Source com Azure DevOps
DevOps para Open Source com Azure DevOpsEmmanuel Gomes Brandão
 
Alessandro Osima - Making of Sandbox : CryEngine Game Editor - Codemotion Ro...
Alessandro Osima - Making of Sandbox : CryEngine Game Editor  - Codemotion Ro...Alessandro Osima - Making of Sandbox : CryEngine Game Editor  - Codemotion Ro...
Alessandro Osima - Making of Sandbox : CryEngine Game Editor - Codemotion Ro...Codemotion
 
Microsoft Tech Series 2019 - Azure DevOps
Microsoft Tech Series 2019 - Azure DevOpsMicrosoft Tech Series 2019 - Azure DevOps
Microsoft Tech Series 2019 - Azure DevOpsTomasz Wisniewski
 
The future of Prototpying
The future of PrototpyingThe future of Prototpying
The future of PrototpyingNetcetera
 
Cincom Smalltalk Roadmap ESUG 2013
Cincom Smalltalk Roadmap ESUG 2013Cincom Smalltalk Roadmap ESUG 2013
Cincom Smalltalk Roadmap ESUG 2013ESUG
 
When Opposites Attract: Agile and UX
When Opposites Attract: Agile and UXWhen Opposites Attract: Agile and UX
When Opposites Attract: Agile and UXtipik
 
Pitch Deck Teardown: Encore's $3M Pre-seed / Seed deck
Pitch Deck Teardown: Encore's $3M Pre-seed / Seed deckPitch Deck Teardown: Encore's $3M Pre-seed / Seed deck
Pitch Deck Teardown: Encore's $3M Pre-seed / Seed deckHajeJanKamps
 
Engage 2019 Software documentation is fun if you have the right tools: Introd...
Engage 2019 Software documentation is fun if you have the right tools: Introd...Engage 2019 Software documentation is fun if you have the right tools: Introd...
Engage 2019 Software documentation is fun if you have the right tools: Introd...AndrewMagerman
 
Intro Design System for Visual Designers
Intro Design System for Visual DesignersIntro Design System for Visual Designers
Intro Design System for Visual DesignersInyoung Choi
 
Introduction to angular with a simple but complete project
Introduction to angular with a simple but complete projectIntroduction to angular with a simple but complete project
Introduction to angular with a simple but complete projectJadson Santos
 
The Power of Azure DevOps
The Power of Azure DevOpsThe Power of Azure DevOps
The Power of Azure DevOpsJeff Bramwell
 
Development Processes and Tooling
Development Processes and ToolingDevelopment Processes and Tooling
Development Processes and ToolingBora Bilgin
 
Code the docs-yu liu
Code the docs-yu liuCode the docs-yu liu
Code the docs-yu liuStreamNative
 

Similar to Robuste Design Systems mit Storybook und Angular (20)

Configuring in the Browser, Really!
Configuring in the Browser, Really!Configuring in the Browser, Really!
Configuring in the Browser, Really!
 
Cloud-based Modelling Solutions Empowering Tool Integration
Cloud-based Modelling Solutions Empowering Tool IntegrationCloud-based Modelling Solutions Empowering Tool Integration
Cloud-based Modelling Solutions Empowering Tool Integration
 
PHP Unconference Continuous Integration
PHP Unconference Continuous IntegrationPHP Unconference Continuous Integration
PHP Unconference Continuous Integration
 
Innovations in Sencha Tooling and Framework
Innovations in Sencha Tooling and FrameworkInnovations in Sencha Tooling and Framework
Innovations in Sencha Tooling and Framework
 
DemoCamp Budapest 2016 - Introdcution
DemoCamp Budapest 2016 - IntrodcutionDemoCamp Budapest 2016 - Introdcution
DemoCamp Budapest 2016 - Introdcution
 
DevOpsCon 2015 - DevOps in Mobile Games
DevOpsCon 2015 - DevOps in Mobile GamesDevOpsCon 2015 - DevOps in Mobile Games
DevOpsCon 2015 - DevOps in Mobile Games
 
Forge - DevCon 2016: Implementing Rich Applications in the Browser
Forge - DevCon 2016: Implementing Rich Applications in the BrowserForge - DevCon 2016: Implementing Rich Applications in the Browser
Forge - DevCon 2016: Implementing Rich Applications in the Browser
 
DevOps para Open Source com Azure DevOps
DevOps para Open Source com Azure DevOpsDevOps para Open Source com Azure DevOps
DevOps para Open Source com Azure DevOps
 
Alessandro Osima - Making of Sandbox : CryEngine Game Editor - Codemotion Ro...
Alessandro Osima - Making of Sandbox : CryEngine Game Editor  - Codemotion Ro...Alessandro Osima - Making of Sandbox : CryEngine Game Editor  - Codemotion Ro...
Alessandro Osima - Making of Sandbox : CryEngine Game Editor - Codemotion Ro...
 
Microsoft Tech Series 2019 - Azure DevOps
Microsoft Tech Series 2019 - Azure DevOpsMicrosoft Tech Series 2019 - Azure DevOps
Microsoft Tech Series 2019 - Azure DevOps
 
The future of Prototpying
The future of PrototpyingThe future of Prototpying
The future of Prototpying
 
Cincom Smalltalk Roadmap ESUG 2013
Cincom Smalltalk Roadmap ESUG 2013Cincom Smalltalk Roadmap ESUG 2013
Cincom Smalltalk Roadmap ESUG 2013
 
When Opposites Attract: Agile and UX
When Opposites Attract: Agile and UXWhen Opposites Attract: Agile and UX
When Opposites Attract: Agile and UX
 
Pitch Deck Teardown: Encore's $3M Pre-seed / Seed deck
Pitch Deck Teardown: Encore's $3M Pre-seed / Seed deckPitch Deck Teardown: Encore's $3M Pre-seed / Seed deck
Pitch Deck Teardown: Encore's $3M Pre-seed / Seed deck
 
Engage 2019 Software documentation is fun if you have the right tools: Introd...
Engage 2019 Software documentation is fun if you have the right tools: Introd...Engage 2019 Software documentation is fun if you have the right tools: Introd...
Engage 2019 Software documentation is fun if you have the right tools: Introd...
 
Intro Design System for Visual Designers
Intro Design System for Visual DesignersIntro Design System for Visual Designers
Intro Design System for Visual Designers
 
Introduction to angular with a simple but complete project
Introduction to angular with a simple but complete projectIntroduction to angular with a simple but complete project
Introduction to angular with a simple but complete project
 
The Power of Azure DevOps
The Power of Azure DevOpsThe Power of Azure DevOps
The Power of Azure DevOps
 
Development Processes and Tooling
Development Processes and ToolingDevelopment Processes and Tooling
Development Processes and Tooling
 
Code the docs-yu liu
Code the docs-yu liuCode the docs-yu liu
Code the docs-yu liu
 

More from Andreas Wissel

design-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdfdesign-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdfAndreas Wissel
 
design-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdfdesign-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdfAndreas Wissel
 
INNOQ Tech Lunch: Design Systems mit Storybook & Angular
INNOQ Tech Lunch: Design Systems mit Storybook & AngularINNOQ Tech Lunch: Design Systems mit Storybook & Angular
INNOQ Tech Lunch: Design Systems mit Storybook & AngularAndreas Wissel
 
Design Systems mit Storybook und Angular: strukturierte User Experience für E...
Design Systems mit Storybook und Angular: strukturierte User Experience für E...Design Systems mit Storybook und Angular: strukturierte User Experience für E...
Design Systems mit Storybook und Angular: strukturierte User Experience für E...Andreas Wissel
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Andreas Wissel
 
Von Applets zu Web Components: Robuste Design Systems mit Storybook und Angular
Von Applets zu Web Components: Robuste Design Systems mit Storybook und AngularVon Applets zu Web Components: Robuste Design Systems mit Storybook und Angular
Von Applets zu Web Components: Robuste Design Systems mit Storybook und AngularAndreas Wissel
 
Von Windows Forms zu Web Components: robuste und flexible User Experience mit...
Von Windows Forms zu Web Components: robuste und flexible User Experience mit...Von Windows Forms zu Web Components: robuste und flexible User Experience mit...
Von Windows Forms zu Web Components: robuste und flexible User Experience mit...Andreas Wissel
 

More from Andreas Wissel (7)

design-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdfdesign-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdf
 
design-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdfdesign-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdf
 
INNOQ Tech Lunch: Design Systems mit Storybook & Angular
INNOQ Tech Lunch: Design Systems mit Storybook & AngularINNOQ Tech Lunch: Design Systems mit Storybook & Angular
INNOQ Tech Lunch: Design Systems mit Storybook & Angular
 
Design Systems mit Storybook und Angular: strukturierte User Experience für E...
Design Systems mit Storybook und Angular: strukturierte User Experience für E...Design Systems mit Storybook und Angular: strukturierte User Experience für E...
Design Systems mit Storybook und Angular: strukturierte User Experience für E...
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
 
Von Applets zu Web Components: Robuste Design Systems mit Storybook und Angular
Von Applets zu Web Components: Robuste Design Systems mit Storybook und AngularVon Applets zu Web Components: Robuste Design Systems mit Storybook und Angular
Von Applets zu Web Components: Robuste Design Systems mit Storybook und Angular
 
Von Windows Forms zu Web Components: robuste und flexible User Experience mit...
Von Windows Forms zu Web Components: robuste und flexible User Experience mit...Von Windows Forms zu Web Components: robuste und flexible User Experience mit...
Von Windows Forms zu Web Components: robuste und flexible User Experience mit...
 

Recently uploaded

analog-vs-digital-communication (concept of analog and digital).pptx
analog-vs-digital-communication (concept of analog and digital).pptxanalog-vs-digital-communication (concept of analog and digital).pptx
analog-vs-digital-communication (concept of analog and digital).pptxKarpagam Institute of Teechnology
 
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptxHOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptxSCMS School of Architecture
 
Path loss model, OKUMURA Model, Hata Model
Path loss model, OKUMURA Model, Hata ModelPath loss model, OKUMURA Model, Hata Model
Path loss model, OKUMURA Model, Hata ModelDrAjayKumarYadav4
 
Adsorption (mass transfer operations 2) ppt
Adsorption (mass transfer operations 2) pptAdsorption (mass transfer operations 2) ppt
Adsorption (mass transfer operations 2) pptjigup7320
 
Computer Graphics Introduction To Curves
Computer Graphics Introduction To CurvesComputer Graphics Introduction To Curves
Computer Graphics Introduction To CurvesChandrakantDivate1
 
litvinenko_Henry_Intrusion_Hong-Kong_2024.pdf
litvinenko_Henry_Intrusion_Hong-Kong_2024.pdflitvinenko_Henry_Intrusion_Hong-Kong_2024.pdf
litvinenko_Henry_Intrusion_Hong-Kong_2024.pdfAlexander Litvinenko
 
Worksharing and 3D Modeling with Revit.pptx
Worksharing and 3D Modeling with Revit.pptxWorksharing and 3D Modeling with Revit.pptx
Worksharing and 3D Modeling with Revit.pptxMustafa Ahmed
 
Introduction to Robotics in Mechanical Engineering.pptx
Introduction to Robotics in Mechanical Engineering.pptxIntroduction to Robotics in Mechanical Engineering.pptx
Introduction to Robotics in Mechanical Engineering.pptxhublikarsn
 
INTERRUPT CONTROLLER 8259 MICROPROCESSOR
INTERRUPT CONTROLLER 8259 MICROPROCESSORINTERRUPT CONTROLLER 8259 MICROPROCESSOR
INTERRUPT CONTROLLER 8259 MICROPROCESSORTanishkaHira1
 
Passive Air Cooling System and Solar Water Heater.ppt
Passive Air Cooling System and Solar Water Heater.pptPassive Air Cooling System and Solar Water Heater.ppt
Passive Air Cooling System and Solar Water Heater.pptamrabdallah9
 
UNIT 4 PTRP final Convergence in probability.pptx
UNIT 4 PTRP final Convergence in probability.pptxUNIT 4 PTRP final Convergence in probability.pptx
UNIT 4 PTRP final Convergence in probability.pptxkalpana413121
 
Dynamo Scripts for Task IDs and Space Naming.pptx
Dynamo Scripts for Task IDs and Space Naming.pptxDynamo Scripts for Task IDs and Space Naming.pptx
Dynamo Scripts for Task IDs and Space Naming.pptxMustafa Ahmed
 
Introduction to Geographic Information Systems
Introduction to Geographic Information SystemsIntroduction to Geographic Information Systems
Introduction to Geographic Information SystemsAnge Felix NSANZIYERA
 
Fundamentals of Internet of Things (IoT) Part-2
Fundamentals of Internet of Things (IoT) Part-2Fundamentals of Internet of Things (IoT) Part-2
Fundamentals of Internet of Things (IoT) Part-2ChandrakantDivate1
 
Call for Papers - Journal of Electrical Systems (JES), E-ISSN: 1112-5209, ind...
Call for Papers - Journal of Electrical Systems (JES), E-ISSN: 1112-5209, ind...Call for Papers - Journal of Electrical Systems (JES), E-ISSN: 1112-5209, ind...
Call for Papers - Journal of Electrical Systems (JES), E-ISSN: 1112-5209, ind...Christo Ananth
 
Standard vs Custom Battery Packs - Decoding the Power Play
Standard vs Custom Battery Packs - Decoding the Power PlayStandard vs Custom Battery Packs - Decoding the Power Play
Standard vs Custom Battery Packs - Decoding the Power PlayEpec Engineered Technologies
 
Fundamentals of Structure in C Programming
Fundamentals of Structure in C ProgrammingFundamentals of Structure in C Programming
Fundamentals of Structure in C ProgrammingChandrakantDivate1
 
Independent Solar-Powered Electric Vehicle Charging Station
Independent Solar-Powered Electric Vehicle Charging StationIndependent Solar-Powered Electric Vehicle Charging Station
Independent Solar-Powered Electric Vehicle Charging Stationsiddharthteach18
 
Theory of Time 2024 (Universal Theory for Everything)
Theory of Time 2024 (Universal Theory for Everything)Theory of Time 2024 (Universal Theory for Everything)
Theory of Time 2024 (Universal Theory for Everything)Ramkumar k
 
Post office management system project ..pdf
Post office management system project ..pdfPost office management system project ..pdf
Post office management system project ..pdfKamal Acharya
 

Recently uploaded (20)

analog-vs-digital-communication (concept of analog and digital).pptx
analog-vs-digital-communication (concept of analog and digital).pptxanalog-vs-digital-communication (concept of analog and digital).pptx
analog-vs-digital-communication (concept of analog and digital).pptx
 
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptxHOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx
 
Path loss model, OKUMURA Model, Hata Model
Path loss model, OKUMURA Model, Hata ModelPath loss model, OKUMURA Model, Hata Model
Path loss model, OKUMURA Model, Hata Model
 
Adsorption (mass transfer operations 2) ppt
Adsorption (mass transfer operations 2) pptAdsorption (mass transfer operations 2) ppt
Adsorption (mass transfer operations 2) ppt
 
Computer Graphics Introduction To Curves
Computer Graphics Introduction To CurvesComputer Graphics Introduction To Curves
Computer Graphics Introduction To Curves
 
litvinenko_Henry_Intrusion_Hong-Kong_2024.pdf
litvinenko_Henry_Intrusion_Hong-Kong_2024.pdflitvinenko_Henry_Intrusion_Hong-Kong_2024.pdf
litvinenko_Henry_Intrusion_Hong-Kong_2024.pdf
 
Worksharing and 3D Modeling with Revit.pptx
Worksharing and 3D Modeling with Revit.pptxWorksharing and 3D Modeling with Revit.pptx
Worksharing and 3D Modeling with Revit.pptx
 
Introduction to Robotics in Mechanical Engineering.pptx
Introduction to Robotics in Mechanical Engineering.pptxIntroduction to Robotics in Mechanical Engineering.pptx
Introduction to Robotics in Mechanical Engineering.pptx
 
INTERRUPT CONTROLLER 8259 MICROPROCESSOR
INTERRUPT CONTROLLER 8259 MICROPROCESSORINTERRUPT CONTROLLER 8259 MICROPROCESSOR
INTERRUPT CONTROLLER 8259 MICROPROCESSOR
 
Passive Air Cooling System and Solar Water Heater.ppt
Passive Air Cooling System and Solar Water Heater.pptPassive Air Cooling System and Solar Water Heater.ppt
Passive Air Cooling System and Solar Water Heater.ppt
 
UNIT 4 PTRP final Convergence in probability.pptx
UNIT 4 PTRP final Convergence in probability.pptxUNIT 4 PTRP final Convergence in probability.pptx
UNIT 4 PTRP final Convergence in probability.pptx
 
Dynamo Scripts for Task IDs and Space Naming.pptx
Dynamo Scripts for Task IDs and Space Naming.pptxDynamo Scripts for Task IDs and Space Naming.pptx
Dynamo Scripts for Task IDs and Space Naming.pptx
 
Introduction to Geographic Information Systems
Introduction to Geographic Information SystemsIntroduction to Geographic Information Systems
Introduction to Geographic Information Systems
 
Fundamentals of Internet of Things (IoT) Part-2
Fundamentals of Internet of Things (IoT) Part-2Fundamentals of Internet of Things (IoT) Part-2
Fundamentals of Internet of Things (IoT) Part-2
 
Call for Papers - Journal of Electrical Systems (JES), E-ISSN: 1112-5209, ind...
Call for Papers - Journal of Electrical Systems (JES), E-ISSN: 1112-5209, ind...Call for Papers - Journal of Electrical Systems (JES), E-ISSN: 1112-5209, ind...
Call for Papers - Journal of Electrical Systems (JES), E-ISSN: 1112-5209, ind...
 
Standard vs Custom Battery Packs - Decoding the Power Play
Standard vs Custom Battery Packs - Decoding the Power PlayStandard vs Custom Battery Packs - Decoding the Power Play
Standard vs Custom Battery Packs - Decoding the Power Play
 
Fundamentals of Structure in C Programming
Fundamentals of Structure in C ProgrammingFundamentals of Structure in C Programming
Fundamentals of Structure in C Programming
 
Independent Solar-Powered Electric Vehicle Charging Station
Independent Solar-Powered Electric Vehicle Charging StationIndependent Solar-Powered Electric Vehicle Charging Station
Independent Solar-Powered Electric Vehicle Charging Station
 
Theory of Time 2024 (Universal Theory for Everything)
Theory of Time 2024 (Universal Theory for Everything)Theory of Time 2024 (Universal Theory for Everything)
Theory of Time 2024 (Universal Theory for Everything)
 
Post office management system project ..pdf
Post office management system project ..pdfPost office management system project ..pdf
Post office management system project ..pdf
 

Robuste Design Systems mit Storybook und Angular

  • 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 Intr o • Tooling • framework-agnostisc h • am Beispiel Angula r • platform-unabhängig Was euch erwartet 2 • technischer Deep Div e • Angular Deep Div e Was euch nicht erwartet
  • 3. Robuste Design Systems mit Storybook und Angular User Experience Architect Andreas Wissel 3 💡 Collaboration & Communicatio n ❤ Design System s 👨💻 Human-centric workflows 🏢 Freelance Consultan t ✍ andreaswissel.com 🐦 @andreas_wissel
  • 4. Robuste Design Systems mit Storybook und Angular User Experience Architect Andreas Wissel 4 • Designer-Developer-Schnittstell e • Workflow-Optimierun g • Product-led growt h • 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/jsdays2021-repo Setup 6
  • 7. Robuste Design Systems mit Storybook und Angular Bringt gerne jederzeit eure Projektbeispiele ei n Feedback, Fragen : bit.ly/jsdays2021-mir o pw: jsdays21 Der Workshop gehört euch! 7 Agenda : 9:10 - 10:30 👨🏫 Workshop Teil 1 - mehr Intr o 10:30 - 10:45 ☕ Kaffeepaus e 10:45 - 12:30 👩💻 Workshop Teil 2 - mehr Hands-on
  • 8. Robuste Design Systems mit Storybook und Angular • Dachbegrif f • “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 UX: Ein Musterbeispiel 9
  • 10. Robuste Design Systems mit Storybook und Angular Menschen denken in Mustern 10 User Experience im Alltag
  • 11. Robuste Design Systems mit Storybook und Angular Menschen denken in Mustern 11 User Experience im Alltag
  • 12. Robuste Design Systems mit Storybook und Angular Menschen denken in Mustern 12 User Experience im Alltag
  • 13. Robuste Design Systems mit Storybook und Angular Menschen sind Gewohnheitstiere. 13
  • 14. Robuste Design Systems mit Storybook und Angular Und ohne Muster sind wir verloren.. 14 User Experience im Alltag
  • 15. Robuste Design Systems mit Storybook und Angular • macht Features sichtba r • macht Features benutzba r • reduziert kognitive Las t • schafft Zugang : • Usabilit y • Accessibility User Experience... 15 Access denied
  • 16. Robuste Design Systems mit Storybook und Angular Verstanden . Aber wie passiert das trotzdem? 16
  • 17. Robuste Design Systems mit Storybook und Angular Der übliche Arbeitsmodus 17 Konzeption Entwicklung Test Mit etwas Glück unterhalten sich hier Menschen miteinande r ... aber meistens ist das eher nicht der Fall.
  • 18. 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 Die Arbeitsthese 18 Dieser Talk soll das nötige Handwerkszeug für enge Zusammenarbeit geben
  • 19. Robuste Design Systems mit Storybook und Angular Der gewünschte Arbeitsmodus 19 Iterative Entwicklung der Komponente ständiger Sync zwischen Entwicklung und Design
  • 20. Robuste Design Systems mit Storybook und Angular Der Workflow den wir suchen 20 sichert Konsistenz langfristi g für alle verständlich nicht in Stein gemeißel t einfach integrierbar
  • 21. Robuste Design Systems mit Storybook und Angular Der erste Baustein: Design System 21 Sammlung aller Komponenten klar definierte Use-Cases Zusammenspiel aller Disziplinen
  • 22. Robuste Design Systems mit Storybook und Angular Moment mal… 22 gibt es sowas nicht schon?
  • 23. Robuste Design Systems mit Storybook und Angular 23 • generische Lösun g • Komponenten vorhande n • Individualisierung: nur innerhalb der Grenzen Beispiel: Angular Material
  • 24. Robuste Design Systems mit Storybook und Angular • generische Lösun g • geht nicht auf die Bedürfnisse der Organisation ei n • Komponenten vorhande n • eine gute Sache - aber nur eine Teilmeng e • Individualisierung: nur innerhalb der Grenze n • nur das anpassbar, was die Library zulässt Beispiel: Angular Material 24
  • 25. Robuste Design Systems mit Storybook und Angular Moderne Design Systems: Bausteine 25 Branding Guidelines Komponenten- bibliothek Dokumentation Animation, a11y, etc. Inhalte isoliert iterativ erweiterbar brown-field Einsatz Prozess viele Plattformen viele Geräteklassen eigene Designsprache Kapselung Anforderungen + }
  • 26. Robuste Design Systems mit Storybook und Angular • iterative Entwicklung von Code und U X • fail early, fail ofte n • robuster Prozes s • isolierte Komponente n • enge Zusammenarbei t • starker Austausc h • interdisziplinär Die Herausforderung 26
  • 27. Robuste Design Systems mit Storybook und Angular Moderne Design Systems
 …treffen Softwareentwicklung 27
  • 28. Robuste Design Systems mit Storybook und Angular Fundament für skalierbare Anwendungen: Komponentenbasierte Softwareentwicklung Moderne Design Systems treffen Softwareentwicklung 28
  • 29. Robuste Design Systems mit Storybook und Angular • …ist so alt wie Softwarearchitektur selbs t • Idee übertragen aus der Industri e • abgeschlossen, black-bo x • wohldefinierte Ein- und Ausgäng e • einfach testba r • wiederverwendba r • flexibe l • von Drittanbietern erhältlich Komponentenbasierte Softwareentwicklung 29
  • 30. Robuste Design Systems mit Storybook und Angular Komponentenbasierte Softwareentwicklung 30 Click me! [caption]="Click me!" (click)="…" Clickety! [caption]=“Clickety!" (click)="…"
  • 31. Robuste Design Systems mit Storybook und Angular • verwendet das Konzept komponentenbasierter Softwareentwicklun g • erlaubt die Kapselung von CSS-Stilen (ViewEncapsulation) zur Vermeidung von monolithischem CS S • eröffnet einen möglichen Migrationspfad auf Web Components Angular 31
  • 32. Robuste Design Systems mit Storybook und Angular Zu Beginn legen wir ein neues Angular-Projekt an . Labs: http://bit.ly/jsdays2021-labs Lab 0 32
  • 33. Robuste Design Systems mit Storybook und Angular • “UI component explorer for developers ” • Design System in Code abbilde n • Schnittstelle zwischen Design & Cod e • isoliertes entwickeln und testen von Komponente n • Vorbereitung auf Unit Test s • Dokumentation direkt an Komponenten Infrastruktur: Storybook 33
  • 34. Robuste Design Systems mit Storybook und Angular • framework-agnostisc h • Open Sourc e • Verwaltet von der JS Foundatio n • vielfältiges Plugin-Ökosyste m • Möglichkeit von Snapshot Tests (visuell, code ) • zero config Storybook 34
  • 35. Robuste Design Systems mit Storybook und Angular Storybook am konkreten Beispiel 35
  • 36. Robuste Design Systems mit Storybook und Angular Demo Time! Storybook am konkreten Beispiel 36
  • 37. Robuste Design Systems mit Storybook und Angular • Die Storybook-CLI erlaubt die Installation von Storybook in bestehende Projekte durch ein einziges Kommand o • @storybook/cli init • Das verwendete Framework wird automatisch erkannt und die Installation darauf angepass t • für einen Großteil der Projekte funktioniert der zero config Ansatz Storybook + Angular 37
  • 38. 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 38
  • 39. Robuste Design Systems mit Storybook und Angular Als nächstes fügen wir dem Projekt Storybook hinzu . Labs: http://bit.ly/jsdays2021-labs Lab 1 39
  • 40. Robuste Design Systems mit Storybook und Angular • Browserbasiert mit nativen App s • Zusammenarbeit in Echtzei t • Components, Constraints, Grids, uvm . • Prototypin g • (rudimentäre) CSS-Generierun g • Kommerziell, kostenfrei nutzbar (für öffentliche Projekte) Figma: Komponentenbasiertes Design 40
  • 41. Robuste Design Systems mit Storybook und Angular Figma: Komponentenbasiertes Design 41
  • 42. Robuste Design Systems mit Storybook und Angular • Demo Time ! • Kommt mit zur Demo: bit.ly/jsdays-2020-figma Figma: Komponentenbasiertes Design 42
  • 43. Robuste Design Systems mit Storybook und Angular • Komponenten-Model l • Test von “Worst Case”-Werte n • Responsive Design im Too l • Prototyping bildet Workflows ab Figma: Zusammenspiel mit Developer-Workflows 43
  • 44. Robuste Design Systems mit Storybook und Angular Endprodukt 44
  • 45. Robuste Design Systems mit Storybook und Angular Endprodukt 45 Form Group Header Input Input Button Login Background
  • 46. Robuste Design Systems mit Storybook und Angular • Komponentenbibliothek für Angula r • Viele vorgefertigte Steuerelemente im Material Desig n • Open sourc e • https://material.angular.io Angular Material 46
  • 47. Robuste Design Systems mit Storybook und Angular Angular Material 47
  • 48. Robuste Design Systems mit Storybook und Angular Was können wir von Angular Material lernen? Angular Material 48
  • 49. Robuste Design Systems mit Storybook und Angular Steuerelemente sind in einzelne Module aufgeteilt Angular Material 49
  • 50. 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 50
  • 51. Robuste Design Systems mit Storybook und Angular • Ein Modu l • Eine (oder wenige) Komponente n • Eine Stor y • Erzeugung per Schematic : • ng g @ngx-storybook/schematics:c <name> 1:1:1-Regel 51
  • 52. Robuste Design Systems mit Storybook und Angular 52 Lab 2 • Ein neues Steuerelement (Button) per Schematic einführe n • Input-Property für die Beschriftung der Schaltfläche hinzufüge n • Input-Binding in Storybook testen Beschriftung
  • 53. Robuste Design Systems mit Storybook und Angular 53 Lab 2 Input-Binding hinzufügen Reguläre Input- Eigenschaft
  • 54. Robuste Design Systems mit Storybook und Angular Eine erste Story Storybook 54 Gruppe Name der Story Überschrift erster Ebene/Ordner/Ordner/Ordner
  • 55. Robuste Design Systems mit Storybook und Angular 55 Lab 2 Inputs können in Storybook durch props vorbelegt werden Wiederverwendbare Properties mit Args- Syntax Äquivalent z u <app-button [label]="'Submit'">
  • 56. Robuste Design Systems mit Storybook und Angular Wir implementieren eine erste eigene Komponente . Labs: bit.ly/jsdays2021-labs Lab 2 56
  • 57. Robuste Design Systems mit Storybook und Angular Lab 2: Unsere erste eigene Komponente 57
  • 58. Robuste Design Systems mit Storybook und Angular • offener ES6-basierter Standar d • Augenmerk auf Wiederverwendbarkei t • Integration mit anderen Tools geplant Storybook: Component Story Format 58
  • 59. Robuste Design Systems mit Storybook und Angular ☕ Pause 59
  • 60. Robuste Design Systems mit Storybook und Angular Lab 3: "Make it pop" 60 Wir stylen mithilfe von Figma die Button-Komponente
  • 61. 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/jsdays2021-labs Lab 3 61
  • 62. Robuste Design Systems mit Storybook und Angular Button-Hintergrund Stylin g Lab 3 62
  • 63. Robuste Design Systems mit Storybook und Angular Button-Label Stylin g Lab 3 63
  • 64. Robuste Design Systems mit Storybook und Angular Button-Label Positionierun g Lab 3 64
  • 65. Robuste Design Systems mit Storybook und Angular Lab 3 65
  • 66. Robuste Design Systems mit Storybook und Angular • machen Komponenten für Nicht-Entwickler zugänglic h • Input Bindings über eine dedizierte UI befülle n • verschiedenste Eingabemöglichkeite n • werden automatisch beim Erstellen von Properties (Args) generiert • Testdaten können in Unit-/E2E-Tests wiederverwendet werden Storybook: Controls 66
  • 67. Robuste Design Systems mit Storybook und Angular Storybook: Controls 67
  • 68. Robuste Design Systems mit Storybook und Angular • der Typ des Controls wird wenn möglich aus dem Binding oder dessen Default-Wert abgeleite t • weitere Typen sind konfigurierba r • auch Controls die nicht direkt zu einer Komponente gehören sind möglich (bspw. Demo-Daten für komplexe Stories) Storybook: Typen von Controls 68
  • 69. Robuste Design Systems mit Storybook und Angular Storybook: Typen von Controls 69
  • 70. Robuste Design Systems mit Storybook und Angular Storybook: Typen von Controls 70
  • 71. Robuste Design Systems mit Storybook und Angular Storybook: Typen von Controls 71
  • 72. Robuste Design Systems mit Storybook und Angular 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 74 Storybook: Typen von Controls Groups
  • 75. Robuste Design Systems mit Storybook und Angular 75 Lab 4 Inputs können in Storybook durch props vorbelegt werden Wiederverwendbare Properties mit Args- Syntax Äquivalent z u <app-button [label]="'Submit'">
  • 76. Robuste Design Systems mit Storybook und Angular Controls: Simpel, aber mächtig Lab 4 76 spezifischer Typ Namen und Typen werden aus Args generiert Standardwerte eigener Name
  • 77. Robuste Design Systems mit Storybook und Angular bit.ly/jsdays2021-labs Lab 4 77
  • 78. Robuste Design Systems mit Storybook und Angular Lab 4: Controls 78
  • 79. Robuste Design Systems mit Storybook und Angular Und, wie war's? 79
  • 80. Robuste Design Systems mit Storybook und Angular • wichtigstes Standbein, ohne Dokumentation keine Akzeptan z • Varianten in Storyboo k • DocsPag e • MD X • Doc Blocks Storybook: Dokumentation 80
  • 81. Robuste Design Systems mit Storybook und Angular • automatisch generier t • zero-config Ansat z • im Addon Docs enthalte n • Dokumentation direkt an Komponenten Storybook: DocsPage 81
  • 82. Robuste Design Systems mit Storybook und Angular • Bindings und Methoden werden automatisch dokumentier t • Dokumentation bzw. Beschreibung wird direkt an der Angular- Komponente gepflegt Storybook: Dokumentation der ButtonComponent 82
  • 83. 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 83
  • 84. Robuste Design Systems mit Storybook und Angular Zum Abschluss der Button-Komponente wollen wir diese noch sauber dokumentieren. Labs: bit.ly/jsdays2021-labs Lab 5 84
  • 85. Robuste Design Systems mit Storybook und Angular Button-Story mit Docs und Controls Lab 5 85
  • 86. Robuste Design Systems mit Storybook und Angular • als nächstes wollen wir eine Komponente bauen, die sich aus mehreren Komponenten zusammensetz t • hierbei machen wir vom Konzept der Content Projection Gebrauch (im Storybook-Sprech auch composite components genannt) Komposition von Komponenten 86
  • 87. Robuste Design Systems mit Storybook und Angular • Kombiniertes Steuerelement aus Label und Eingabeelemen t • Ziel: Alle Eigenschaften per Control steuern Input 87 Type Label Placeholder 'text' | 'email' | 'password' string string
  • 88. Robuste Design Systems mit Storybook und Angular Content Projection Form Group 88 Überschrift Projizierter Inhalt
  • 89. Robuste Design Systems mit Storybook und Angular • Container-Komponente mit Content-Projectio n • ModuleMetadata-Decorator um Module in der Story zu importiere n • Storybook bringt ein eigenes Angular-Modul mi t • Definition von Komponenten sowie Verwendung von Inline- Templates sind auch in Storys möglic h • über verwendete Module muss Storybook Bescheid wissen Form Group 89
  • 90. 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/jsdays2021-labs Lab 6 90
  • 91. Robuste Design Systems mit Storybook und Angular Die Input-Komponente Lab 6 91
  • 92. Robuste Design Systems mit Storybook und Angular Lab 6 92 Projizierter Inhalt Spaltendefinition
  • 93. Robuste Design Systems mit Storybook und Angular Lab 6 93 Inline- Templates sind möglich Deklaration von Abhängigkeiten
  • 94. Robuste Design Systems mit Storybook und Angular Login-Komponente 94 Zusammenführung aller erstellten Komponenten
  • 95. Robuste Design Systems mit Storybook und Angular • Input-Properties für Username und Passwor t • Decorator für Import s • Mocks in Storybook Login-Komponente 95
  • 96. Robuste Design Systems mit Storybook und Angular 96 Lab 7 Login-Komponente und Mocks
  • 97. 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 97
  • 98. Robuste Design Systems mit Storybook und Angular 98 Lab 7 Mock-Service
  • 99. Robuste Design Systems mit Storybook und Angular 99 Lab 7 Story
  • 100. Robuste Design Systems mit Storybook und Angular Wrap-up – Technologien 100 – überall anwendbar –
  • 101. Robuste Design Systems mit Storybook und Angular 1. Designer*in erstellt eine Komponente in Figm a 2. Entwickler*in generiert ein passendes Modul, eine Komponente sowie eine Stor y 3. Entwickler*in übernimmt die CSS-Stile aus Figm a 4. Entwickler*in implementiert den HTML-Aufbau und übernimmt die Logi k 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) 101
  • 102. Robuste Design Systems mit Storybook und Angular • echte Komponente n • ausgiebige Dokumentatio n • modulare, isolierte Entwicklun g • einfachere Wartbarkei t • brown field-geeigne t • konsistentere User Experienc e • Bonus: Unit-Tests profitieren von Mock-Daten Wrap-Up - Design Systems mit Storybook 102
  • 103. Robuste Design Systems mit Storybook und Angular 103 Vielen Dank! 🐦 @andreas_wisse l 📨 business@andreaswissel.com ✍ andreaswissel.com
  • 104. Robuste Design Systems mit Storybook und Angular Repo bit.ly/jsdays2021-repo Labs bit.ly/jsdays2021-labs Figma bit.ly/ng-ds-figma Slides bit.ly/jsdays2021-slides 104
  • 105. 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 105