Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Design System for Micro frontends
Azizi Yazit
October 20, 2021
Education
0
19
Design System for Micro frontends
Azizi Yazit
October 20, 2021
Tweet
Share
More Decks by Azizi Yazit
See All by Azizi Yazit
Continuous Integration with Trunk-based and Feature toggle
aziziyazit
1
67
[Ng-keralam] Style Guide Driven Development
aziziyazit
0
93
Logo basic prog lang (Hafsa)
aziziyazit
0
5
Back to the basic (Agile Manifesto)
aziziyazit
0
55
Math Proj Based
aziziyazit
0
11
3L-Components
aziziyazit
0
74
Build Scalable Design System Using Provider-Consumer Pattern
aziziyazit
0
46
3L-Components
aziziyazit
0
15
Idea on team, architecture & methodologies
aziziyazit
0
50
Other Decks in Education
See All in Education
0615
cbtlibrary
0
110
2021年度「コンピュータサイエンス教育」の カリキュラム開発に向けての実証研究
codeforeveryone
1
850
20220511pmtipslt
levii
0
340
Gesture-based Interaction - Lecture 8 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
700
Digital Design 2022-01
mathatelle
0
180
開源套件的經營指南 Facebook-Crawler 套件的理念、策略與收穫
tlyu0419
0
140
大学院に行くメリットについて考える (2022年度版)
imash
0
330
20220629oolpjp
levii
0
110
Lisätty todellisuus opetuksessa
matleenalaakso
0
1.1k
コミュニティ活動に精を出していたらモテモテになって転職もできた
ichimichi
1
1.1k
Studio Ghibli + Campus Júnior
joantubau
1
750
読書に悩むあなたに贈る50の読書方法カタログ / reading catalog Best50
aki_moon
9
2.2k
Featured
See All Featured
Teambox: Starting and Learning
jrom
123
7.7k
What the flash - Photography Introduction
edds
62
10k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
655
120k
Rebuilding a faster, lazier Slack
samanthasiow
62
7.3k
Designing for Performance
lara
597
64k
Gamification - CAS2011
davidbonilla
75
3.9k
The Invisible Side of Design
smashingmag
290
48k
Making the Leap to Tech Lead
cromwellryan
113
7.4k
Embracing the Ebb and Flow
colly
73
3.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
25
15k
It's Worth the Effort
3n
172
26k
Bootstrapping a Software Product
garrettdimon
296
110k
Transcript
microfrontends Design system
An architectural style where independently deliverable frontend applications are composed
into a greater whole
1 2 3 incremental changes independent deployment autonomous team
A Design system is collection of reusable components, guided by
clear standard, that can be assembled together to build any number of application.
1 2 3 documented components living style guide single source
of truth
Design System App 1 App 2 v1 v1 v1 v2
v2 v2 App 3 v2 App 4 v1 Centralised
Design System App 1 App 2 v1 v1 v1 v2
v2 v2 App 3 v2 App 4 v1 Centralised
Design System App 1 App 2 v1 v1 v1 v2
v2 v2 App 3 v2 App 4 v1 Centralised
Design System App 1 App 2 v1 v1 v1 v2
v2 v2 App 3 v2 App 4 v1 Centralised independent deployment autonomous team incremental changes
App 1 App 2 App 3 App 4 Independent Design
System
App 1 App 2 App 3 App 4 Independent Design
System
App 1 App 2 App 3 App 4 Independent Design
System
App 1 App 2 App 3 App 4 Independent Design
System independent deployment autonomous team incremental changes
Provider Design System Color System Spacing System Icons Atomic Components
Typography Fonts Composite Components Headless UI Compound Component Consumer Design System Customised Atomic Components Implemented Composite Components
Headless UI UI Logics & Interaction handling UI look &
feel Abstraction Implementation Provider Consumer
Headless UI
Headless UI
Headless UI
Provider-Consumer Provider Design System App 1 App 2 v1 v1
v1 v2 v2 v2 App 3 v2 App 4 v1 Consumer Design System Consumer Design System Consumer Design System Consumer Design System
Provider Design System App 1 App 2 v1 v1 v1
v2 v2 v2 App 3 v2 App 4 v1 Consumer Design System Consumer Design System Consumer Design System Consumer Design System independent deployment autonomous team incremental changes