Micro Frontends with Module Federation @MicroFrontend Summit 2023

Transcript

1. @ManfredSteyer ManfredSteyer Micro Frontends with Module Federation Manfred Steyer, ANGULARarchitects.io
2. @ManfredSteyer Booking App Check-in App Boarding App Luggage App
3. @ManfredSteyer
4. @ManfredSteyer
5. @ManfredSteyer
6. @ManfredSteyer const Component = await import('other-app/cmp');
7. @ManfredSteyer #1a Module Federation #1b Sharing Libs and Data #3 Dealing with Version Mismatches #4 Multiple Frameworks/ Versions
8. @ManfredSteyer Manfred Steyer
9. @ManfredSteyer
10. @ManfredSteyer Shell (Host) Microfrontend (Remote) // Maps Urls in // webpack config remotes: { mfe1: "http://..." } // Expose files in // webpack config exposes: { './Cmp': './my.cmp.ts' } import('mfe1/Cmp')
11. @ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: { } exposes: { './Cmp': './my.cmp.ts' } import('mfe1/Cmp')
12. @ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: { } exposes: { './Cmp': './my.cmp.ts' } loadRemoteModule({ type: 'module', remoteEntry: 'http://…', exposedModule: './Cmp' })
13. @ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: { } exposes: { './Cmp': './my.cmp.ts' } loadRemoteModule({ type: 'module', remoteEntry: 'http://…', exposedModule: './Cmp' }) Helper Function using the Webpack API
14. @ManfredSteyer Shell (Host) Microfrontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
15. @ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3) ng serve
16. @ManfredSteyer 1) Adjust your webpack.config.js 2) Start your application
17. @ManfredSteyer
18. @ManfredSteyer
19. @ManfredSteyer Selecting the highest compatible version 10.0 10.1
20. @ManfredSteyer Conflict: No highest compatible version 11.0 10.1
21. @ManfredSteyer shared: { "my-lib": { singleton: true } } 11.0 10.1
22. @ManfredSteyer in general, however, …
23. @ManfredSteyer • Framework with two libs a and b • a is using internal APIs of b • a could be an compiled app too (Don't use ^ or ~ in your package.json)
24. @ManfredSteyer shared: { "my-lib": { singleton: true, strictVersion: true // Error instead of warning! } } 11.0 10.1
25. @ManfredSteyer shared: { "my-lib": { requiredVersion: ">=1.0.1 <11.1.1" } }
26. @ManfredSteyer •Several options baked-in •However, best option: avoid conflicts upfront • Option 1: Monorepo • Option 2: Loading several SPAs + sharing nothing!
27. @ManfredSteyer
28. @ManfredSteyer const Component = await import('other-app/cmp');
29. @ManfredSteyer await import('other-app/web-cmp');
30. @ManfredSteyer const main = await import('other-app/web-cmp'); const elm = document.createElement('my-web-cmp') document.body.appendChild(elm);
31. @ManfredSteyer await import('other-app/web-cmp'); const elm = document.createElement('my-web-cmp') document.body.appendChild(elm); WrapperComponent
32. @ManfredSteyer
33. @ManfredSteyer
34. @ManfredSteyer
35. @ManfredSteyer https://red-ocean-0fe4c4610.azurestaticapps.net
36. @ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book
37. @ManfredSteyer Conclusion Loading separately compiled code & sharing libs Baked-in Strategies for Version Mismatches Webpack Runtime API: Dynamic Federation Frankenstein: Bootstrapping Several SPAs
38. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io