Micro frontend and web components

Transcript

1. Microapps
   Web Components
   @yashints yashints yashints
   

   View Slide

2. Microapps
   Web Components
   @yashints yashints yashints
   

   View Slide

3. yashints
   

   View Slide

4. yashints
   Agenda
   ▪ Intro
   ▪ Core ideas
   ▪ Meet Ali and her team
   ▪ The issue
   ▪ Trials
   ▪ Final solution
   

   View Slide

5. Lead consultant @Readify
   Yaser Adel Mehraban
   @yashints
   Almond croissant addict cleverly
   disguised as a web developer
   yashints.dev
   dev.to/yashints
   

   View Slide

6. yashints
   I a good monolith
   

   View Slide

7. yashints
   “
   Don’t even consider microservices unless you
   have a system that’s too complex to manage as
   a monolith.
   Martin Fowler
   

   View Slide

8. yashints
   “
   Don’t even consider micro frontend unless you
   can vertically slice your system to enable your
   teams to act independently.
   Me
   

   View Slide

9. yashints
   Core ideas
   ▪ Development speed
   ▪ Autonomous teams
   ▪ Customer focus
   ▪ Technology agnostic
   

   View Slide

10. yashints
    Product owner
    CarZila
    

    View Slide

11. yashints
    The issue
    Data Layer
    Business Layer
    User Interface
    

    View Slide

12. yashints
    Technology agnostic
    Independent deployment
    Team ownership
    Develop independently
    Fast loading
    Smooth user interaction
    Sharing state
    Corporate identity
    Run independently Modular
    Native support
    

    View Slide

13. yashints
    First try
    User Interface
    Search Insight
    Test Drive Order Payment
    Inventory
    

    View Slide

14. yashints
    Technology agnostic
    Independent deployment
    Team ownership
    Develop independently
    Fast loading
    Smooth user interaction
    Sharing state
    Corporate identity
    Run independently Modular
    Native support
    

    View Slide

15. yashints
    Vision
    Search Insight
    Test Drive Order Payment Inventory
    Frontend
    Backend
    Data store
    

    View Slide

16. yashints
    If you want to go fast, go alone.
    If you want to go far, go together.
    

    View Slide

17. yashints
    First attempt
    Hyperlinks
    

    View Slide

18. yashints
    Hyperlinks
    Search Order
    Search.html order.html
    

    View Slide

19. yashints
    Fast loading
    Native support
    Team ownership
    Develop independently
    Run independently
    Technology agnostic
    Independent deployment
    Corporate identity
    Sharing state
    Modular
    Smooth user interaction
    

    View Slide

20. yashints
    Integration vis composition
    ▪ Build time
    ▪ Run time on client side
    ▪ Run time on server side
    

    View Slide

21. yashints
    Build time
    

    View Slide

22. yashints
    Build time
    { Search }
    { Insight }
    { Test Drive }
    { Order }
    { Payment }
    { Inventory }
    Build Bundle
    

    View Slide

23. yashints
    Fast loading
    Native support
    Team ownership
    Develop independently
    Technology agnostic
    Independent deployment
    Run independently
    Corporate identity
    Sharing state
    Modular
    Smooth user interaction
    

    View Slide

24. yashints
    Server Side composition
    

    View Slide

25. yashints
    SSI (Server Side Includes)
    

    View Slide

26. yashints
    SSI (Server Side Include)
    

    View Slide

27. yashints
    ESI (Edge Side Includes)
    Get
    Get Order
    

    View Slide

28. yashints
    Fast loading
    Native support
    Team ownership
    Develop independently
    Technology agnostic
    Independent deployment
    Run independently
    Corporate identity
    Sharing state
    Modular
    Smooth user interaction
    

    View Slide

29. yashints
    Client Side composition
    

    View Slide

30. yashints
    IFrames
    

    View Slide

31. yashints
    Fast loading
    Native support
    Team ownership
    Develop independently
    Technology agnostic
    Independent deployment
    Run independently
    Corporate identity
    Sharing state
    Modular
    Smooth user interaction
    

    View Slide

32. yashints
    Web components
    

    View Slide

33. yashints
    Custom Elements Shadow DOM
    ES6 Modules HTML Templates
    

    View Slide

34. yashints
    API
    

    View Slide

35. yashints
    API
    

    View Slide

36. yashints
    API
    

    View Slide

37. yashints
    App Shell
    

    View Slide

38. yashints
    Framework support
    

    View Slide

39. yashints
    Angular Elements Vue CLI
    Manual
    Community Soluttions Lit
    

    View Slide

40. yashints
    Fast loading
    Native support
    Team ownership
    Develop independently
    Technology agnostic
    Independent deployment
    Run independently
    Corporate identity
    Sharing state
    Modular
    Smooth user interaction
    

    View Slide

41. yashints
    Demo
    

    View Slide

42. yashints
    Real use cases
    ▪ Migrate a large app to another framework
    ▪ Fix a bug in one app and deploy independently
    ▪ Reuse an entire app
    ▪ And more…
    

    View Slide

43. yashints
    Taking balanced decisions is the
    secret ingredient for success
    

    View Slide

44. yashints
    

    View Slide

45. yashints
    

    View Slide

46. yashints
    References
    ▪ The demo is on my GitHub repo yas.fyi/2FeIrI3
    ▪ Slides yas.fyi/2Kspzt8
    ▪ https://micro-frontends.org/
    ▪ A good reference list yas.fyi/2KXHaZD
    

    View Slide

47. yashints
    Questions?
    

    View Slide