Design System for Micro frontends

Transcript

1. microfrontends Design system
2. An architectural style where independently deliverable frontend applications are composed into a greater whole
3. 1 2 3 incremental changes independent deployment autonomous team
4. A Design system is collection of reusable components, guided by clear standard, that can be assembled together to build any number of application.
5. 1 2 3 documented components living style guide single source of truth
6. Design System App 1 App 2 v1 v1 v1 v2 v2 v2 App 3 v2 App 4 v1 Centralised
7. Design System App 1 App 2 v1 v1 v1 v2 v2 v2 App 3 v2 App 4 v1 Centralised
8. Design System App 1 App 2 v1 v1 v1 v2 v2 v2 App 3 v2 App 4 v1 Centralised
9. 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
10. App 1 App 2 App 3 App 4 Independent Design System
11. App 1 App 2 App 3 App 4 Independent Design System
12. App 1 App 2 App 3 App 4 Independent Design System
13. App 1 App 2 App 3 App 4 Independent Design System independent deployment autonomous team incremental changes
14. 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
15. Headless UI UI Logics & Interaction handling UI look & feel Abstraction Implementation Provider Consumer
16. Headless UI
17. Headless UI
18. Headless UI
19. 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
20. 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