Angular Architectures for the Enterprise Nx Monorepos, Module Federation, and Microfrontends @BASTA 2020

Free eBook about this topic:
https://www.angulararchitects.io/book/

Source Code - DDD and Nx:
https://github.com/manfredsteyer/angular-ddd

Source Code - Microfrontends with Module Federation:
https://github.com/manfredsteyer/module-federation-with-angular

Transcript

1. @BASTAcon & @ManfredSteyer s ManfredSteyer Manfred Steyer, ANGULARarchitects.io Angular Architectures for the Enterprise Nx Monorepos, Module Federation, and Microfrontends
2. @BASTAcon & @ManfredSteyer
3. @BASTAcon & @ManfredSteyer
4. @BASTAcon & @ManfredSteyer
5. @ManfredSteyer Methodology for bridging the gap b/w requirements and architecture/ design
6. @BASTAcon & @ManfredSteyer Monolith? Flight System Flight System
7. @BASTAcon & @ManfredSteyer Booking Booking Check-in Check-in Boarding Boarding Luggage Luggage Sub-Domains
8. @ManfredSteyer
9. @ManfredSteyer Manfred Steyer
10. @ManfredSteyer
11. @ManfredSteyer Monorepo Structure
12. @ManfredSteyer Advantages Everyone uses the latest versions No version conflicts
13. @ManfredSteyer Moving back and forth Npm Registry
14. @ManfredSteyer Tooling & Generator https://nrwl.io/nx
15. @ManfredSteyer Visualize Module Structure
16. @ManfredSteyer Creating a Workspace with the CLI npm install -g @angular/cli ng new workspace cd workspace ng generate app my-app ng generate lib my-lib ng serve --project my-app ng build --project my-app
17. @ManfredSteyer Creating a Workspace with NX npm install -g @angular/cli npm init nx-workspace myworkspace cd workspace ng generate app my-app ng generate lib my-lib ng serve --project my-app ng build --project my-app
18. @ManfredSteyer DEMO
19. @ManfredSteyer
20. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Util Util Util Util Util Util Util Util Util Util Util Util @ManfredSteyer Shared Kernel (if really needed) & other libs Smart Comp. Dumb Comp.
21. @ManfredSteyer DEMO
22. @ManfredSteyer • • • • •
23. @ManfredSteyer
24. @ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding App Boarding App Luggage App Luggage App Microfrontends
25. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature … … … … … … … … … … … … … … … … … … @ManfredSteyer Flight App Flight App Deployment Monolith Booking Booking Boarding Boarding
26. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature … … … … … … … … … … … … … … … … … … Booking App Booking App Boarding App Boarding App Microfrontends
27. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature … … … … … … … … … … … … … … … … … … Booking App Booking App Boarding App Boarding App Option 1: One App per Domain Monorepo
28. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature … … … … … … … … … … … … … … … … … … Booking App Booking App Boarding App Boarding App Option 2: One Monorepo per Domain Publish shared libs separately via npm Repository n Repository 2 Repository 1
29. @ManfredSteyer Benefits Autonomous Teams Separate Development Separate Deployment Own architecture decisions Own technology descisions
30. @ManfredSteyer Integration via Shell
31. @ManfredSteyer µService Providing a (SPA based) Shell µApp µApp µApp Shell
32. @ManfredSteyer
33. @ManfredSteyer
34. @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!
35. @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')
36. @ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend (Remote) RemoteEntrypoint.js <script src="…"></script>
37. @ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
38. @ManfredSteyer DEMO
39. @ManfredSteyer
40. @ManfredSteyer Well … Webpack 5 is currently a RC Final version: soon CLI: Not before version 11 (fall 2020)
41. @ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives
42. @ManfredSteyer • • • • •
43. @ManfredSteyer
44. @ManfredSteyer d Slides & Examples Remote and In-House http://softwarearchitekt.at/workshops