The Microfrontend Revolution Module Federation with Angular @techWebinarNepal

Transcript

1. @ManfredSteyer ManfredSteyer The Microfrontend Revolution Module Federation with Angular Manfred Steyer, ANGULARarchitects.io
2. @ManfredSteyer Do you remember her? Bonnie Barstow, PhD
3. @ManfredSteyer Software Engineering is a Team Sport
4. @ManfredSteyer Coordination b/w Teams
5. @ManfredSteyer Monolith Flight System
6. @ManfredSteyer Booking Service Check-in Service Boarding Service Luggage Service Microservices Sub-Domains (DDD)
7. @ManfredSteyer Booking App Check-in App Boarding App Luggage App Microfrontends
8. @ManfredSteyer
9. @ManfredSteyer
10. @ManfredSteyer Contents #1: Consequences of Microfrontends #2: Module Federation #3: Dynamic Module Federation #4: Version Mismatch #5: Possible Roadmap
11. @ManfredSteyer Manfred Steyer
12. @ManfredSteyer
13. @ManfredSteyer Booking App Check-in App Boarding App Luggage App Autonomous Teams
14. @ManfredSteyer Autonomous Teams Separate Development Separate Deployment Own architecture decisions Own technology descisions
15. @ManfredSteyer
16. @ManfredSteyer
17. @ManfredSteyer Challenges UI Composition UI Consistency Bundle Size/ Sharing Dependencies Version Conflicts between Microfrontends …
18. @ManfredSteyer Module Federation Solves Some of Them! UI Composition UI Consistency Bundle Size/ Sharing Dependencies Version Conflicts between Microfrontends …
19. @ManfredSteyer
20. @ManfredSteyer
21. @ManfredSteyer
22. @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!
23. @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')
24. @ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend (Remote) RemoteEntrypoint.js <script src="…"></script>
25. @ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
26. @ManfredSteyer
27. @ManfredSteyer
28. @ManfredSteyer Dealing with Version Mismatch SemVer by Default: Highest compatiable version Fallback: Use own version Relaxing: Configure a range of accepted versions Singleton: Warning or error
29. @ManfredSteyer Configuring Singletons shared: { "my-lib": { singleton: true, strictVersion: true // Error instead of warning! } }
30. @ManfredSteyer Relaxing Version Requirements shared: { "my-lib": { requiredVersion: ">=1.0.1 <11.1.1" } }
31. @ManfredSteyer
32. @ManfredSteyer Well … Webpack 5 is currently beta Shown examples: PoC w/ custom webpack conf + patched CLI lib CLI: Not before version 11 (fall 2020) Squeeze federation config into CLI's webpack config Custom Builder (e. g. ngx-build-plus)
33. @ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives
34. @ManfredSteyer Conclusion Main Purpose of µFrontends: Scaling Teams Decoupling Federation: Import From Other App Sharing Libs Take Care of Conflicts
35. @ManfredSteyer Be like Bonnie and think first! Evaluate whether you need µFrontends No: Majestic Monolith Yes: Consider Module Federation
36. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io