Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Design System for Micro frontends
Search
Azizi Yazit
October 20, 2021
Education
0
70
Design System for Micro frontends
Azizi Yazit
October 20, 2021
Tweet
Share
More Decks by Azizi Yazit
See All by Azizi Yazit
Nasionalisme Melayu 1920 - 1948
aziziyazit
0
36
UKM - MFE
aziziyazit
0
68
Effective GIT Branching Strategy for Rapid UI Development
aziziyazit
0
84
Analisa Kesusasteraan
aziziyazit
0
22
Design System 101
aziziyazit
0
130
Continuous Integration with Trunk-based and Feature toggle (JomLaunch Edition)
aziziyazit
0
220
Continuous Integration with Trunk-based and Feature toggle
aziziyazit
1
200
[Ng-keralam] Style Guide Driven Development
aziziyazit
0
200
Logo basic prog lang (Hafsa)
aziziyazit
0
29
Other Decks in Education
See All in Education
実務プログラム
takenawa
0
15k
AWSと共に英語を学ぼう
amarelo_n24
0
140
自己紹介 / who-am-i
yasulab
PRO
3
5.4k
高校におけるプログラミング教育を考える
naokikato
PRO
0
150
教える側は、初学者に谷越えまで伴走すべき(ダニング・クルーガー効果からの考察)
hysmrk
3
130
『会社を知ってもらう』から『安心して活躍してもらう』までの プロセスとフロー
sasakendayo
0
260
Tutorial: Foundations of Blind Source Separation and Its Advances in Spatial Self-Supervised Learning
yoshipon
1
150
社外コミュニティの歩き方
masakiokuda
1
180
Dashboards - Lecture 11 - Information Visualisation (4019538FNR)
signer
PRO
1
2.1k
Transición del Management al Neuromanagement
jvpcubias
0
190
アントレプレナーシップ教育 ~ 自分で自分の幸せを決めるために ~
yoshizaki
0
160
American Airlines® USA Contact Numbers: The Ultimate 2025 Guide
lievliev
0
250
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
11
1.1k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Done Done
chrislema
185
16k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
185
54k
How to train your dragon (web standard)
notwaldorf
96
6.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building Applications with DynamoDB
mza
96
6.6k
Facilitating Awesome Meetings
lara
55
6.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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