$30 off During Our Annual Pro Sale. View Details »

React Day Berlin 🇩🇪

Vitor Alencar
November 18, 2022

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.

Vitor Alencar

November 18, 2022
Tweet

More Decks by Vitor Alencar

Other Decks in Technology

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