Save 37% off PRO during our Black Friday Sale! »

Sustainable SPA with DDD The Beginning of a Wonderful Friendship? @SAA2021

Sustainable SPA with DDD The Beginning of a Wonderful Friendship? @SAA2021

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer
PRO

October 06, 2021
Tweet

Transcript

  1. @ManfredSteyer

  2. @ManfredSteyer

  3. @ManfredSteyer

  4. @ManfredSteyer

  5. @ManfredSteyer

  6. @ManfredSteyer

  7. @ManfredSteyer

  8. @ManfredSteyer

  9. @ManfredSteyer Manfred Steyer

  10. @ManfredSteyer

  11. @ManfredSteyer Strategic Design Tactical Design

  12. @ManfredSteyer Strategic Design Tactical Design

  13. @ManfredSteyer

  14. @ManfredSteyer Example Flight System Flight System

  15. @ManfredSteyer Booking Booking Check-in Check-in Boarding Boarding Luggage Luggage Example

    Sub-Domains
  16. @ManfredSteyer

  17. @ManfredSteyer Monorepo Structure

  18. @ManfredSteyer Advantages No version conflicts No burden with distributing libs

  19. @ManfredSteyer Moving Back and Forth Npm Registry

  20. @ManfredSteyer Creating a Workspace 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
  21. @ManfredSteyer https://nrwl.io/nx

  22. @ManfredSteyer Visualize Module Structure

  23. @ManfredSteyer Creating a Workspace 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
  24. @ManfredSteyer Creating a Workspace 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
  25. @ManfredSteyer

  26. @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 Enterprise Monorepo Patterns, Nrwl 2018: https://tinyurl.com/y2jjxld7 @ManfredSteyer Shared Kernel (if really needed) & other libs Smart Comp. Dumb Comp.
  27. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature API

    API 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
  28. @ManfredSteyer Application Domain Infrastructure Application Domain Infrastructure Isolate your domain!

    Domain Domain e. g. data access Use case specific facades, state management Entities, biz logic
  29. @ManfredSteyer Alternatives to layering • e. g. Hexagonal Architecture, Clean

    Architecture • Anyway: We need to restrict access b/w libraries
  30. @ManfredSteyer DEMO

  31. @ManfredSteyer

  32. @ManfredSteyer Options File System Nx Cloud Custom Cache

  33. @ManfredSteyer Configuration (nx.json) "tasksRunnerOptions": { "default": { "runner": "@nrwl/workspace/tasks-runners/default", […]

    } },
  34. @ManfredSteyer Configuration (nx.json) "tasksRunnerOptions": { "default": { "runner": "@nrwl/workspace/tasks-runners/default", "options":

    { "cacheableOperations": ["build", "lint", "test", "e2e"], […] } } },
  35. @ManfredSteyer Using nx build app-or-lib --with-deps

  36. @ManfredSteyer Prerequisite for Incremental Builds ng g lib lib-name --buildable

  37. @ManfredSteyer Also Test and Lint-Results Can be Cached nx build

    app-or-lib --with-deps nx lint app-or-lib --with-deps nx test app-or-lib --with-deps nx e2e app-or-lib --with-deps
  38. @ManfredSteyer DEMO

  39. @ManfredSteyer • • • •

  40. @ManfredSteyer

  41. @ManfredSteyer Facade (Application Service) @Injectable({ providedIn: 'root' }) export class

    ProductFacade { […] }
  42. @ManfredSteyer Facade (Application Service) @Injectable({ providedIn: 'root' }) export class

    ProductFacade { public products: Product[] = []; […] } State!
  43. @ManfredSteyer Facade (Application Service) @Injectable({ providedIn: 'root' }) export class

    ProductFacade { public products: Product[] = []; constructor(private productService: ProductService) { } […] }
  44. @ManfredSteyer Facade (Application Service) @Injectable({ providedIn: 'root' }) export class

    ProductFacade { public products: Product[] = []; constructor(private productService: ProductService) { } search(category: string): void { […] } }
  45. @ManfredSteyer Facade (Application Service) @Injectable({ providedIn: 'root' }) export class

    ProductFacade { public products: Product[] = []; constructor(private productService: ProductService) { } search(category: string): void { […] } } SPA has to pull :-(
  46. @ManfredSteyer Facade (Application Service) @Injectable({ providedIn: 'root' }) export class

    ProductFacade { public products: Observable<Product[]>; constructor(private productService: ProductService) { } search(category: string): void { […] } } Also key for messaging
  47. @ManfredSteyer App Home Catalog Search RatingFacade ProductFacade SearchFacade Facades Have

    State
  48. @ManfredSteyer App Home Catalog Search RatingFacade ProductFacade SearchFacade Facades Have

    State
  49. @ManfredSteyer App Home Catalog Search RatingFacade ProductFacade SearchFacade Facades Have

    State Store (z. B. Redux/ NGRX) Observable Action
  50. @ManfredSteyer DEMO

  51. @ManfredSteyer

  52. @ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding

    App Boarding App Luggage App Luggage App Microfrontends
  53. @ManfredSteyer

  54. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature

    Feature Feature Feature Feature Feature Feature Feature … … … … … … … … … … … … … … … … … … @ManfredSteyer Flight App Flight App Deployment Monolith
  55. @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
  56. @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
  57. @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 seperately via npm Repository n Repository 2 Repository 1
  58. @ManfredSteyer Free eBook ANGULARarchitects.io/book

  59. • • • • •

  60. None
  61. @ManfredSteyer d Slides & Examples Public: Frankfurt, Munich, Vienna In-House:

    everywhere http://softwarearchitekt.at/workshops