More Than Micro Frontends: 3 Further Use Cases for Module Federation @DWX 2022

Transcript

1. @ManfredSteyer ManfredSteyer More Than Micro Frontends: 3 Further Use Cases for Module Federation Manfred Steyer, ANGULARarchitects.io
2. @ManfredSteyer
3. @ManfredSteyer On Youtube
4. @ManfredSteyer On Youtube
5. @ManfredSteyer Consuming an Interface Implementing an Interfacae
6. @ManfredSteyer
7. @ManfredSteyer
8. @ManfredSteyer Contents #1: Module Federation 101 #2: Plugin Systems #3: A/B Testing #4: Build Performance
9. @ManfredSteyer Manfred Steyer
10. @ManfredSteyer
11. @ManfredSteyer
12. @ManfredSteyer Idea const Component = await import('http://other-app/xyz') Does not work with webpack/ Angular CLI Does not work with webpack/ Angular CLI
13. @ManfredSteyer Webpack 5 Module Federation 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')
14. @ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend (Remote) RemoteEntry.js <script src="…"></script>
15. @ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
16. @ManfredSteyer 1) npm i @angular-architects/module-federation -D 2) ng g @angular-architects/module-federation:init 3) Adjust generated configuration 4) ng serve
17. @ManfredSteyer Great Deal for Micro Frontends!
18. @ManfredSteyer
19. @ManfredSteyer
20. @ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: { mfe1: "http://..." } exposes: { Cmp: './my.cmp.ts' } import('mfe1/Cmp')
21. @ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: { } exposes: { Cmp: './my.cmp.ts' } import('mfe1/Cmp')
22. @ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: { } exposes: { Cmp: './my.cmp.ts' } loadRemoteModule({ type: 'module', remoteEntry: 'http://…', exposedModule: './Cmp' })
23. @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
24. @ManfredSteyer
25. @ManfredSteyer
26. @ManfredSteyer
27. @ManfredSteyer
28. @ManfredSteyer Setting Micro Frontend Shell 10 Micro Frontends á 20 Features Separately buildable 200 Features in total!
29. @ManfredSteyer https://nrwl.io/nx Smart, Fast and Extensible Build System
30. @ManfredSteyer Angular CLI npm install -g @angular/cli ng new workspace cd workspace ng generate app my-app ng generate lib my-lib ng serve my-app ng build my-app
31. @ManfredSteyer Nx npm install -g @angular/cli npm init nx-workspace workspace cd workspace ng generate app my-app ng generate lib my-lib ng serve my-app ng build my-app
32. @ManfredSteyer Results Cold Cache: 58.8 sec Warm Nx Cache: 0.6 sec Changed One App: 9.71 sec
33. @ManfredSteyer
34. @ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx
35. @ManfredSteyer Conclusion Loading Separately Deployed Code Micro Frontends Plugin Systems A/B Testing Build Performance
36. @ManfredSteyer
37. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io