React Day Berlin 🇩🇪

Abstract

Module Federation is a new feature in Webpack 5 that allows you to dynamically load code from remote servers at runtime. This is a game-changer in JavaScript architecture, as it allows you to break your application into smaller pieces and load them on demand. In this talk, we will explore the new feature and how it can be used to create micro-frontends.

Pitch

What excites me the most about this talk is the opportunity of showing how Module Federation can be used to create micro-frontends. I have been working with micro-frontends for a while now, and I have seen how it can be a game-changer in JavaScript architecture. I have also seen how it can be difficult to implement, and I think that Module Federation can be a great tool to make it easier.

Transcript

1. @vitormalencar
   Module-Federation
   Module-Federation
   A game-changer in JavaScript architecture
   

   View Slide

2. MY "WHY" 🤔 💭
   WHY I DO WHAT I DO
   I believe it is possible to change
   the world through technology.....
   

   View Slide

3. Hi 👋,
   I'm Vitor Alencar.
   I'm a software engineer!
   I helped improve Brazil education I helped
   people share their opinions online now I'm
   helping people get their money back!
   

   View Slide

4. @vitormalencar
   150K+
   05
   COURSES
   200H
   CONTENT
   100+
   VIDEOS
   04
   PODCASTS
   PEOPLE
   IMPACTED
   

   View Slide

5. @vitormalencar
   Microfrontends are especially useful when we have
   projects with dozens of developers working together
   in a large business domain
   Why Micro
   front ends ?
   

   View Slide

6. @vitormalencar
   Microsfot
   Google
   
   Airbnb
   Netflix
   
   You?
   Spotify
   

   View Slide

7. @vitormalencar
   Monolith to Microservices
   

   View Slide

8. @vitormalencar
   MFE similar methodology
   Be able to be managed from separate teams
   Deploy independently
   Small application set
   Better Domain separation
   

   View Slide

9. @vitormalencar
   Is about scaling teams
   

   View Slide

10. @vitormalencar
    Sharing code is Hard
    and it gets harder and harder on a large scale
    

    View Slide

11. @vitormalencar
    Let's check the current state of tools out there for
    code sharing
    What are our
    options now?
    

    View Slide

12. @vitormalencar
    Why is hard
    NPM is slow
    It grows in complexity
    Custom-made tools get dated fast
    Sharing is usually primitive
    

    View Slide

13. @vitormalencar
    The Goal
    Performance
    
    
    Build Time Easy sharing
    

    View Slide

14. @vitormalencar
    Module federation
    

    View Slide

15. @vitormalencar
    What is module federation
    Share modules
    Share components
    Share Functions
    Share data
    Over the wire
    

    View Slide

16. @vitormalencar
    The place that webpack is initialized during page
    load
    Host
    application
    

    View Slide

17. @vitormalencar
    Another webpack build that will be consumed by
    other application
    Remote
    application
    

    View Slide

18. @vitormalencar
    What is module federation
    Share modules / components / functions / data
    deploy independent SPA's
    Over the wire at runtime
    Redundancy and self-healing powers
    

    View Slide

19. @vitormalencar
    Capabilities
    Dynamic updates over the wire
    Minimal overhead
    No dev env changes
    Can be handled by independent teams
    

    View Slide

20. @vitormalencar
    

    View Slide

21. @vitormalencar
    

    View Slide

22. @vitormalencar
    Recap
    Fast updates
    Better control
    independent Deploys
    

    View Slide

23. @vitormalencar
    

    View Slide

24. @vitormalencar
    

    View Slide

25. @vitormalencar
    Consistency and better updates
    Design system
    library
    

    View Slide

26. @vitormalencar
    Error Handling
    How to catch Errors and prevent runtime white screen
    

    View Slide

27. @vitormalencar
    Error
    boundary and
    similar
    

    View Slide

28. @vitormalencar
    Sharing State
    Handle state changes across MFE's
    

    View Slide

29. @vitormalencar
    It works, just be reactive
    Redux
    Context
    RXjs
    Zustand
    .....
    

    View Slide

30. @vitormalencar
    

    View Slide

31. @vitormalencar
    Self-Healing Capabilities
    
    
    Fallback to remote apps vendors if a dependency fails to load.
    

    View Slide

32. @vitormalencar
    

    View Slide

33. @vitormalencar
    

    View Slide

34. @vitormalencar
    Dynamic Federation
    Handeling module injection at runtime
    

    View Slide

35. @vitormalencar
    And much more..
    

    View Slide

36. View Slide

37. @vitormalencar
    

    View Slide

38. Danke!
    @vitormalencar
    

    View Slide