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
52
Design System for Micro frontends
Azizi Yazit
October 20, 2021
Tweet
Share
More Decks by Azizi Yazit
See All by Azizi Yazit
Effective GIT Branching Strategy for Rapid UI Development
aziziyazit
0
34
Analisa Kesusasteraan
aziziyazit
0
5
Design System 101
aziziyazit
0
86
Continuous Integration with Trunk-based and Feature toggle (JomLaunch Edition)
aziziyazit
0
200
Continuous Integration with Trunk-based and Feature toggle
aziziyazit
1
170
[Ng-keralam] Style Guide Driven Development
aziziyazit
0
170
Logo basic prog lang (Hafsa)
aziziyazit
0
17
Back to the basic (Agile Manifesto)
aziziyazit
0
200
Math Proj Based
aziziyazit
0
56
Other Decks in Education
See All in Education
Evaluation Methods - Lecture 6 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
820
(説明資料)オンラインゆっくり相談室
ytapples613
PRO
0
120
Padlet opetuksessa
matleenalaakso
4
13k
とある EM の初めての育休からの学び
clown0082
1
910
1216
cbtlibrary
0
270
Diseño de estrategia de analítica del aprendizaje en tu centro educativo.
tecuribarri
0
150
Initiatives on Bridging the Gender Gap in the Technology Sector
codeforeveryone
0
120
Web Search and SEO - Lecture 10 - Web Technologies (1019888BNR)
signer
PRO
2
2.6k
BrightonSEO, San Diego, CA 2024
mchowning
0
120
TP5_-_UV.pdf
bernhardsvt
0
140
Medidas en informática
irocho
0
1.1k
MySmartSTEAM2425
cbtlibrary
0
110
Featured
See All Featured
Unsuck your backbone
ammeep
669
57k
GraphQLとの向き合い方2022年版
quramy
44
13k
Bash Introduction
62gerente
610
210k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
YesSQL, Process and Tooling at Scale
rocio
171
14k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Docker and Python
trallard
44
3.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Being A Developer After 40
akosma
89
590k
Building Your Own Lightsaber
phodgson
104
6.2k
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