Micro Frontends with Module Federation: Why and How? @WeAreDevelopers 2021

# Free eBook on this Topic:
https://www.angulararchitects.io/book

# Example:
https://github.com/manfredsteyer/module-federation-plugin-example/

Transcript

1. @ManfredSteyer ManfredSteyer Manfred Steyer, ANGULARarchitects.io Micro Frontends with Module Federation: Why and How?
2. @ManfredSteyer Which one is the best?
3. @ManfredSteyer It’s all about consequences in your very situation!
4. @ManfredSteyer Micro Frontends
5. @ManfredSteyer Micro Frontends
6. @ManfredSteyer Contents #1 Why: Real-World Case Studies #2 How: Module Federation
7. @ManfredSteyer Manfred Steyer
8. @ManfredSteyer
9. @ManfredSteyer Deadalus Health Care (formerly AGFA Health Care)
10. @ManfredSteyer DATEV eG (~8000 Employees, 200 Products)
11. @ManfredSteyer Huge European Bank Domain A Domain B Domain C Domain D Domain E Domain F eBanking
12. @ManfredSteyer Quality Bytes (No Micro Frontends but Domain Cutting)
13. @ManfredSteyer Reasons for Micro Frontends Huge Product/ Product Suite Scaling Teams & Domains Switching out Technologies Rapitely Changing Requirements
14. @ManfredSteyer
15. @ManfredSteyer Implementation iframes: Legacy & Isolation Web Components: Load into SPA, Hide Frameworks Hyper Links: Easy – No Meta Framework needed
16. @ManfredSteyer Consequences Effort for „Meta Framework“ Sharing Code at Runtime and Bundle Size Common Look and Feel
17. @ManfredSteyer
18. @ManfredSteyer Idea const Component = await import('http://other-app/xyz') Does not work with webpack/ Angular CLI Even lazy parts must be known at compile time!
19. @ManfredSteyer Webpack 5 Module Federation Shell (Host) Microfrontend (Remote) // Maps Urls in // webpack config remotes: { mfe1: "mfe1" } // Expose files in // webpack config exposes: { './Cmp': './my.cmp.ts' } import('mfe1/Cmp')
20. @ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend (Remote) RemoteEntry.js <script src="…"></script>
21. @ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
22. @ManfredSteyer 1) Adjust Your webpack.config 2) Start/ Build Project
23. @ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3) ng serve
24. @ManfredSteyer
25. @ManfredSteyer
26. @ManfredSteyer
27. @ManfredSteyer
28. @ManfredSteyer https://red-ocean-0fe4c4610.azurestaticapps.net
29. @ManfredSteyer Free eBook ANGULARarchitects.io/book
30. @ManfredSteyer Conclusion No free Lunch: Consequences Scaling Teams & Domains Module Federation
31. @ManfredSteyer
32. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io