Microfrontends: Necessities - Implementations - Challenges

Microfrontends are a hot topic, promising an architecture where multiple teams can work independently on a single application, making their own technical choices while remaining isolated from each other. Sounds ideal, right?

But it’s worth considering the trade-offs. While Microfrontends offer unique benefits, they also introduce overhead and can come with unexpected challenges. In this talk, I’ll provide an honest overview of the technical possibilities, along with the pros and cons of each approach. You’ll learn about iFrame integration, Web Components, Native & Module Federation, and see these techniques in action.

For some, Microfrontends are a no-go; for others, they’re an option or even an absolute necessity. By the end of my talk, you should know which group you belong to.

Transcript

1. RainerHahnekamp Micro Frontends Necessities Implementations Necessities Implementations Challenges Microfrontends Ng-Glühwein Rainer Hahnekamp 16. December 2024
2. About Me... https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff • Rainer Hahnekamp ANGULARarchitects.io NgRx Team (Trusted Collaborator) • Developer / Trainer / Speaker @RainerHahnekamp Workshops NgRx • Testing • Spring • Quality
3. RainerHahnekamp Microfrontends: The art of transforming an organizational problem into a technical one.
4. RainerHahnekamp The Problem: Too Many People Build Time Separate Deployment
5. RainerHahnekamp Microfrontends !== Microservices No Technical Scalability Requirements No Full Isolation No Framework Support out of the Box
7. RainerHahnekamp Application Shell MF (MicroFrontend) Main Building Blocks
8. RainerHahnekamp Common Implementations iFrames Web Components Native & Module Federation
9. RainerHahnekamp Web Components
10. RainerHahnekamp Web Components • Supported by Angular Elements • Custom Elements + HTML Templates + Shadow DOM • Squeeze a whole app into a tag
11. RainerHahnekamp Web Components Shell
12. RainerHahnekamp Web Components • Bundle Size • Multiple Angular Instances • Issues with Router • Multiple Zones ◦ Go zoneless! • Perfect fit for UI Components • High Isolation / Little Inter-Communication • Tricks to share dependencies ◦ One zone.js ◦ WebPack Externals
13. RainerHahnekamp Module Federation
14. RainerHahnekamp Application Code Feature (Lazy Loaded) 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation
15. RainerHahnekamp Application Code Feature (Lazy Loaded) Application 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Feature (Lazy Loaded) Application 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation
16. RainerHahnekamp Application Code Feature (Lazy Loaded) Application 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Feature (Lazy Loaded) Application 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation
17. RainerHahnekamp Application Code Feature (Lazy Loaded) Application 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Feature (Lazy Loaded) Application 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation
18. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 1 (Remote 1) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Feature (Lazy Loaded) MF 2 (Remote 2) 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation
19. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs
20. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs
21. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs JS JS JS JS
22. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs JS JS JS JS
23. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) Runtime JS JS JS JS JS JS JS https://host2 https://host3 https://host1
24. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Runtime JS JS JS JS
25. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) Runtime JS JS JS JS JS JS JS
26. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) Runtime JS JS JS JS JS JS JS JS
27. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) Runtime JS JS JS JS JS JS JS JS JS
28. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) Runtime JS JS JS JS JS JS JS JS JS ? ?
29. RainerHahnekamp Shared Libraries & Constraints • Libraries can & should be shared ◦ Multiple Libraries (different or same version) as Edge Case • "Compiled Angular" doesn't follow semantic versioning ◦ Divering (even on Patch-Level) is risky ◦ Runtime protection built-in
30. RainerHahnekamp
31. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) Runtime JS JS JS JS JS JS JS JS JS
32. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) Runtime JS JS JS JS JS JS JS JS JS
33. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) Runtime JS JS JS JS JS JS JS JS JS
34. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) Runtime JS JS JS JS JS JS JS JS JS
35. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) Runtime JS JS JS JS JS JS JS JS JS Module Federation Logic
36. RainerHahnekamp RainerHahnekamp
37. RainerHahnekamp Module Federation ✅ No Issues because of multiple Angular applications • Same Zone.js, Router, Store, HttpClient, UserService... ✅ Small Bundle Size • No Treeshaking for shared libraries ⛔ Compromise • Full Autonomy except Versioning • Return of the Monorepo? ⛔ Bound to Bundler • WebPack, Rspack
38. RainerHahnekamp Native Federation
39. RainerHahnekamp Native Federation Module Federation but without Runtime Bundler coupling
40. RainerHahnekamp Application Code Feature (Lazy Loaded) 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Runtime Module & Native Federation Module Federation
41. RainerHahnekamp Application Code Feature (Lazy Loaded) 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Runtime Module & Native Federation Module Federation
42. RainerHahnekamp Application Code Feature (Lazy Loaded) 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Runtime Module & Native Federation Module Federation
43. RainerHahnekamp Application Code Feature (Lazy Loaded) 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Runtime Module & Native Federation Module Federation
44. RainerHahnekamp Application Code Feature (Lazy Loaded) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Feature (Lazy Loaded) 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Runtime JS JS JS JS Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Module & Native Federation Module Federation Native Federation
45. RainerHahnekamp Application Code Feature (Lazy Loaded) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Feature (Lazy Loaded) 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Runtime JS JS JS JS Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Module & Native Federation Module Federation Native Federation
46. RainerHahnekamp Application Code Feature (Lazy Loaded) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Feature (Lazy Loaded) 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Runtime JS JS JS JS Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Module & Native Federation Module Federation Native Federation
47. RainerHahnekamp Native Federation vs. Module Federation ✅ Decoupled from Bundler during Runtime • Multiple & Different Bundlers during Build Time (Adapter is necessary) • CDN as Supplier • Web Standards ✅ Module Federation embeddable ⛔ Requires ESM
48. RainerHahnekamp • Hyperlink • SingleSPA • Custom Solutions ◦ e.g. Google Cloud • Hybrids ◦ Module Federation & Native Federation & Web Components • Web Fragments Alternative Implementations
49. RainerHahnekamp Thanks