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
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..
37. @vitormalencar
38. Danke! @vitormalencar