Prisma Typescript Berlim 🇩🇪

Abstract

Module Federation is a game-changing feature in Webpack 5 that allows developers to dynamically load code from remote servers at runtime. This new approach to JavaScript architecture allows you to break your application into smaller, independent modules that can be easily shared and integrated into larger applications. In this talk, we will dive into the details of Module Federation and explore how it can be used to create scalable, maintainable micro-frontend applications. Join us to learn how to improve the performance and flexibility of your React apps with Module Federation.

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 Hi 👋 Hi 👋 TypeScript Berlin TypeScript Berlin 🇩🇪 🇩🇪 Great to be here with you all
2. @vitormalencar Module-Federation Module-Federation A game-changer in JavaScript architecture
3. MY "WHY" 🤔 💭 WHY I DO WHAT I DO I believe it is possible to change the world through technology.....
4. @vitormalencar
5. @vitormalencar
6. 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!
7. @vitormalencar 150K+ 05 COURSES 200H CONTENT 100+ VIDEOS 04 PODCASTS PEOPLE IMPACTED
8. @vitormalencar @vitormalencar @vitormalencar github, twitter, instagram,linkedin ....
9. @vitormalencar Microfrontends are especially useful when we have projects with dozens of developers working together in a large business domain Why Micro front ends ?
10. @vitormalencar Microsfot Google Airbnb Netflix You? Spotify
11. @vitormalencar Monolith to Microservices
12. @vitormalencar MFE similar methodology Be able to be managed from separate teams Deploy independently Small application set Better Domain separation
13. @vitormalencar Is about scaling teams
14. @vitormalencar Sharing code is Hard and it gets harder and harder on a large scale
15. @vitormalencar Let's check the current state of tools out there for code sharing What are our options now?
16. @vitormalencar
17. @vitormalencar
18. @vitormalencar
19. @vitormalencar
20. @vitormalencar Why is hard NPM is slow It grows in complexity Custom-made tools get dated fast Sharing is usually primitive
21. @vitormalencar The Goal Performance Build Time Easy sharing
22. @vitormalencar Module federation
23. @vitormalencar What is module federation Share modules Share components Share Functions Share data Over the wire
24. @vitormalencar The place that webpack is initialized during page load Host application
25. @vitormalencar Another webpack build that will be consumed by other application Remote application
26. @vitormalencar What is module federation Share modules / components / functions / data deploy independent SPA's Over the wire at runtime Redundancy and self-healing powers
27. @vitormalencar Capabilities Dynamic updates over the wire Minimal overhead No dev env changes Can be handled by independent teams
28. @vitormalencar
29. @vitormalencar
30. @vitormalencar Recap Fast updates Better control independent Deploys
31. @vitormalencar
32. @vitormalencar
33. @vitormalencar Consistency and better updates Design system library
34. @vitormalencar Error Handling How to catch Errors and prevent runtime white screen
35. @vitormalencar Error boundary and similar
36. @vitormalencar TS Support ?
37. @vitormalencar Sharing State Handle state changes across MFE's
38. @vitormalencar It works, just be reactive Redux Context RXjs Zustand .....
39. @vitormalencar
40. @vitormalencar Bidirectional Hosts
41. @vitormalencar
42. @vitormalencar
43. @vitormalencar Self-Healing Capabilities Fallback to remote apps vendors if a dependency fails to load.
44. @vitormalencar
45. @vitormalencar
46. @vitormalencar Dynamic Federation Handeling module injection at runtime
47. @vitormalencar And much more..
49. @vitormalencar
50. Danke! @vitormalencar