Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

  2. MY "WHY" 🤔 💭 WHY I DO WHAT I DO

    I believe it is possible to change the world through technology.....
  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!
  4. @vitormalencar 150K+ 05 COURSES 200H CONTENT 100+ VIDEOS 04 PODCASTS

    PEOPLE IMPACTED
  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 ?
  6. @vitormalencar Microsfot Google Airbnb Netflix You? Spotify

  7. @vitormalencar Monolith to Microservices

  8. @vitormalencar MFE similar methodology Be able to be managed from

    separate teams Deploy independently Small application set Better Domain separation
  9. @vitormalencar Is about scaling teams

  10. @vitormalencar Sharing code is Hard and it gets harder and

    harder on a large scale
  11. @vitormalencar Let's check the current state of tools out there

    for code sharing What are our options now?
  12. @vitormalencar Why is hard NPM is slow It grows in

    complexity Custom-made tools get dated fast Sharing is usually primitive
  13. @vitormalencar The Goal Performance Build Time Easy sharing

  14. @vitormalencar Module federation

  15. @vitormalencar What is module federation Share modules Share components Share

    Functions Share data Over the wire
  16. @vitormalencar The place that webpack is initialized during page load

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

    application Remote application
  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
  19. @vitormalencar Capabilities Dynamic updates over the wire Minimal overhead No

    dev env changes Can be handled by independent teams
  20. @vitormalencar

  21. @vitormalencar

  22. @vitormalencar Recap Fast updates Better control independent Deploys

  23. @vitormalencar

  24. @vitormalencar

  25. @vitormalencar Consistency and better updates Design system library

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

    white screen
  27. @vitormalencar Error boundary and similar

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

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

    .....
  30. @vitormalencar

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

    dependency fails to load.
  32. @vitormalencar

  33. @vitormalencar

  34. @vitormalencar Dynamic Federation Handeling module injection at runtime

  35. @vitormalencar And much more..

  36. None
  37. @vitormalencar

  38. Danke! @vitormalencar