Micro Frontends: Necessity, Implementation, and Challenges

Micro Frontends 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 Micro Frontends 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, Micro Frontends 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 ng-India | Rainer Hahnekamp | 12. April 2025
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 Source Code: https://github.com/rainerhahnekamp/eternal • Shell Branch ◦ https://github.com/rainerhahnekamp/eternal/tree/talk/2025-04-12_ng-india/host • Remote Branch ◦ https://github.com/rainerhahnekamp/eternal/tree/talk/2025-04-12_ng-india/remote
4. RainerHahnekamp Application Code Feature (Lazy Loaded) 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native Federation
5. 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/Native Federation
6. 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/Native Federation
7. 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/Native Federation
8. 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/Native Federation
9. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs
10. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native 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
11. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native 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
12. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native 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
13. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native 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
14. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native 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
15. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native 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
16. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native 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 ? ?
17. RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native 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
18. RainerHahnekamp And they lived happily ever after…
19. RainerHahnekamp 🤔 What if I use different versions of the same lib?
20. RainerHahnekamp https://tinyurl.com/ng-india-25-matthieu-riegler
21. RainerHahnekamp Challenges • Same Version • Share Everything ◦ Singletons ◦ Bundle Size • No Tree-Shaking • Platform "Special Task Force" Team
22. RainerHahnekamp Mono Repo as Solution???
23. RainerHahnekamp Alternative Implementations iFrames Web Components
24. RainerHahnekamp Microfrontends !== Microservices No Technical Scalability Requirements No Full Isolation No Framework Support out of the Box
25. RainerHahnekamp The Problem: Too Many People Build Time Separate Deployment
26. RainerHahnekamp Microfrontends: The art of transforming an organizational problem into a technical one.
27. RainerHahnekamp Native Federation Module Federation but without Runtime Bundler coupling
28. 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
29. 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
30. 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
31. 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
32. 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
33. 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
34. 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
35. 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
36. RainerHahnekamp More Content My YouTube Channel • https://youtube.com/@rainerhahnekamp Ng-News • https://youtube.com/@ng-news Workshops • https://www.angulararchitects.io/en/training/professional-ngrx-advanced-state-management-best-practices/ • https://www.angulararchitects.io/en/training/professional-angular-testing-playwright-edition/
37. RainerHahnekamp धन्यवाद