Design System for Micro frontends

Transcript

1. microfrontends
   Design system
   

   View Slide

2. An architectural style where independently
   deliverable frontend applications are composed
   into a greater whole
   

   View Slide

3. 1
   2
   3
   incremental
   changes
   independent
   deployment
   autonomous
   team
   

   View Slide

4. A Design system is collection of reusable
   components, guided by clear standard, that can be
   assembled together to build any number of
   application.
   

   View Slide

5. 1
   2
   3
   documented
   components
   living
   style guide
   single source
   of truth
   

   View Slide

6. Design
   System
   App 1
   App 2
   v1
   v1
   v1
   v2
   v2
   v2
   App 3
   v2
   App 4
   v1
   Centralised
   

   View Slide

7. Design
   System
   App 1
   App 2
   v1
   v1
   v1
   v2
   v2
   v2
   App 3
   v2
   App 4
   v1
   Centralised
   

   View Slide

8. Design
   System
   App 1
   App 2
   v1
   v1
   v1
   v2
   v2
   v2
   App 3
   v2
   App 4
   v1
   Centralised
   

   View Slide

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
   

   View Slide

10. App 1
    App 2
    App 3
    App 4
    Independent
    Design
    System
    

    View Slide

11. App 1
    App 2
    App 3
    App 4
    Independent
    Design
    System
    

    View Slide

12. App 1
    App 2
    App 3
    App 4
    Independent
    Design
    System
    

    View Slide

13. App 1
    App 2
    App 3
    App 4
    Independent
    Design
    System
    independent deployment
    autonomous team
    incremental changes
    

    View Slide

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
    

    View Slide

15. Headless UI
    UI Logics &
    Interaction handling
    UI look & feel
    Abstraction Implementation
    Provider Consumer
    

    View Slide

16. Headless UI
    

    View Slide

17. Headless UI
    

    View Slide

18. Headless UI
    

    View Slide

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
    

    View Slide

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
    

    View Slide