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

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

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer

September 23, 2020
Tweet

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