Module Federation in practice with NX link

Transcript

1. Angular TLV Micro FE Module Federation+ NX eliraneliassy
2. e-square.io — Founder & CEO @ e-square.io — Angular Google Developer Expert — Writer @ AngularInDepth — Community leader About mySelf
5. jobs@e-square.io
6. e-square.io Micro FE Backof fi ce Online Orders Menu Book A Table Restaurant POS
7. e-square.io Micro FE Backof fi ce Online Orders Menu Book A Table Restaurant POS
8. e-square.io Micro FE Runtime Integration Backof fi ce Restaurant POS Backof fi ce
9. e-square.io Micro FE Separate Deployments Backof fi ce 1.0.0 Restaurant POS Book A Table 1.0.0
10. e-square.io Micro FE Separate Deployments Backof fi ce 1.0.0 Restaurant POS Book A Table 2.0.0
11. e-square.io The Challenges • Share code? NPM? • Version mismatches?
12. Module Federation!
13. e-square.io What is MFE? • Allows JavaScript application to dynamically import code from another application at runtime. • The module will build a unique JavaScript entry fi le which can be downloaded by other applications • Share dependencies between apps!
14. e-square.io Micro FE - Terminology Backof fi ce Online Orders Menu Book A Table Restaurant POS
15. e-square.io Micro FE - Terminology Remote Remote Remote Remote Host
16. e-square.io Host: webpack.con fi g
17. e-square.io Remote: webpack.con fi g
18. e-square.io Host: routing
19. MFE & Monorepo ?
20. e-square.io MFE & Monorepo • One package.json • Consume shared code easily with a simple import
21. e-square.io NX
22. e-square.io What is NX • Build system • Workspace manager for Monorepos • Rich Plugin ecosystem: • Storybook, eslint, Jest, Cypress and many more… • A ff ected builders - test, lint & build
23. e-square.io MFE & NX • NX enforce module boundaries - No applications coupling • DDD friendly architecture (apps & libs) - Fit the “modules separation” concept
24. e-square.io Sharing Libs Backof fi ce Online Orders Menu Book A Table Restaurant POS
25. e-square.io Sharing Libs Backof fi ce Online Orders Menu Book A Table Restaurant POS Application Library Auth
26. e-square.io Sharing Libs Dep Graph
27. e-square.io Sharing Libs Dep Graph
28. e-square.io Sharing Libs Dep Graph - A ff ected
29. e-square.io SharedMappings
30. e-square.io Live Demo…
31. e-square.io Sca ff olding
32. • MFE - Probably the most exciting feature coming to the world of FE • MFE & NX - as a force multiplier • Share code without publish libraries • No version mismatch • A ff ected app - deploy separately e-square.io Summary
33. Keep in Touch with me! https://e-square.io https://eliassy.dev @eliraneliassy eliran@e-square.io
34. e-square.io Ra ff le Time!
35. Thank You