Sustainable SPA with DDD The beginning of a wonderful friendship? @dddsummit in Berlin

Sustainable SPA with DDD The beginning of a wonderful friendship? @dddsummit in Berlin

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer

December 09, 2019
Tweet

Transcript

  1. 7.

    @ManfredSteyer Contents 1) DDD in a Nutshell 2) Angular Monorepos

    3) Monorepos & DDD 4) DDD & Micro Frontends
  2. 8.

    @ManfredSteyer About me… • Manfred Steyer ANGULARarchitects.io • Angular Trainings

    and Consultancy • Google Developer Expert (GDE) • Trusted Collaborator in the Angular Team Page ▪ 8 Manfred Steyer Public: Frankfurt, Munich, Vienna In-House: everywhere http://softwarearchitekt.at/workshops
  3. 22.

    @ManfredSteyer Catalog Ordering Shared Feature Feature Feature Feature Feature UI

    UI UI UI UI UI UI UI UI Domain Domain Domain Domain Domain Domain 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.
  4. 23.

    @ManfredSteyer Catalog Ordering Shared Feature API Feature Feature Feature Feature

    UI UI UI UI UI UI UI UI UI Domain Domain Domain Domain Domain Domain Util Util Util Util Util Util @ManfredSteyer
  5. 24.

    @ManfredSteyer Catalog Ordering Shared Feature API Feature Feature Feature Feature

    UI UI UI UI UI UI UI UI UI Domain Domain Domain Domain Domain Domain Util Util Util Util Util Util @ManfredSteyer
  6. 25.

    @ManfredSteyer Application Domain Infrastructure Isolate your domain! Domain e. g.

    data access Use case specific facades, state management Entities, biz logic
  7. 26.

    @ManfredSteyer Alternatives to layering • e. g. Hexagonal Architecture, Clean

    Architecture • Anyway: We need to restrict access b/w libraries
  8. 29.

    @ManfredSteyer Finegrained Libraries • Unit of recompilation • Unit of

    retesting • Access restrictions • Information Hiding
  9. 32.

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

    ProductFacade { public products: Product[] = []; […] } State!
  10. 33.

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

    ProductFacade { public products: Product[] = []; constructor(private productService: ProductService) { } […] }
  11. 34.

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

    ProductFacade { public products: Product[] = []; constructor(private productService: ProductService) { } search(category: string): void { […] } }
  12. 35.

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

    ProductFacade { public products: Product[] = []; constructor(private productService: ProductService) { } search(category: string): void { […] } } Angular has to pull :-(
  13. 36.

    @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
  14. 41.

    @ManfredSteyer Catalog Ordering Shared Feature Feature Feature Feature Feature …

    … … … … … … … … @ManfredSteyer e-Procurement App Deployment Monolith
  15. 42.

    @ManfredSteyer Catalog Ordering Shared Feature Feature Feature Feature Feature …

    … … … … … … … … @ManfredSteyer Catalog App Ordering App Option 1: One App per Domain
  16. 43.

    @ManfredSteyer Catalog Ordering Shared Feature Feature Feature Feature Feature …

    … … … … … … … … @ManfredSteyer Catalog App Ordering App Option 2: One Monorepo per Domain Publish shared libs seperately via npm Different Versions
  17. 47.

    @ManfredSteyer µService Providing a (SPA based) Shell µApp µApp µApp

    Shell ▪ iframes ▪ Bootstrapping several SPAs ▪ + Lazy Loading
  18. 51.

    Summary • Slicing into sub-domains • Slicing into layers •

    Finegrained libraries • Enforce restrictions • Fits to micro frontends
  19. 53.

    @ManfredSteyer Contact and Downloads [web] ANGULARarchitects.io [twitter] ManfredSteyer d Slides

    & Examples Public: Frankfurt, Munich, Vienna In-House: everywhere http://softwarearchitekt.at/workshops