Sustainable Angular Architectures With Nx and Strategic Design

Sustainable Angular Architectures With Nx and Strategic Design

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer

July 02, 2020
Tweet

Transcript

  1. @ManfredSteyer s ManfredSteyer Manfred Steyer, ANGULARarchitects.io Sustainable Angular Architectures With

    Nx and Strategic Design
  2. What do we need for a good architecture? Experience

  3. @ManfredSteyer Sharing Experience for Architectures BEST PRACTICES PATTERNS METHODOLOGY

  4. @ManfredSteyer Domain Driven Design

  5. @ManfredSteyer How to create sustainable Angular architectures with ideas from

    DDD? ?
  6. @ManfredSteyer How to create sustainable frontend architectures with ideas from

    DDD? ?
  7. @ManfredSteyer Contents 1) DDD in a Nutshell 2) Monorepos 3)

    Monorepos & DDD
  8. @ManfredSteyer About me… Manfred Steyer, ANGULARarchitects.io Angular Trainings and Consultancy

    Frankfurt, Munich, Vienna, Remote In-House: everywhere https://ANGULARarchitects.at/workshops Google Developer Expert for Angular Trusted Collaborator in the Angular Team Manfred Steyer
  9. @ManfredSteyer 1) DDD in a nutshell

  10. @ManfredSteyer Domain Driven Design Strategic Design Tactical Design Decomposing a

    System Design Patterns & Practices
  11. @ManfredSteyer Domain Driven Design Strategic Design Tactical Design Decomposing a

    System Design Patterns & Practices
  12. @ManfredSteyer This is what Strategic DDD prevents

  13. @ManfredSteyer Example e-Procurement System

  14. @ManfredSteyer Catalog Approval Specification Ordering Example Sub-Domains

  15. @ManfredSteyer Catalog Approval Specification Ordering Context Map

  16. @ManfredSteyer Approval Specification Context Map Catalog Catalog Shared Kernel

  17. @ManfredSteyer Catalog Approval API

  18. @ManfredSteyer Lots of additional approaches for cross-domain communication …

  19. @ManfredSteyer 2) Monorepos

  20. @ManfredSteyer Workspace

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

  22. @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
  23. @ManfredSteyer Moving back and forth Npm Registry

  24. @ManfredSteyer https://nrwl.io/nx

  25. @ManfredSteyer Visualize Module Structure

  26. @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
  27. @ManfredSteyer 3) Nx Monorepos and Strategic Design

  28. @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.
  29. @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
  30. @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
  31. @ManfredSteyer Application Domain Model Infrastructure Isolate your domain! Domain Lib

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

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

  34. @ManfredSteyer Finegrained Libraries • Unit of recompilation • Unit of

    retesting • Access restrictions • Information Hiding • Alternative to NgModules (might become optional) • Ng g lib … easy
  35. @ManfredSteyer Free eBook https://ANGULARarchitects.io/book

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

    Finegrained libraries • Enforce restrictions
  37. @ManfredSteyer

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

    & Examples http://softwarearchitekt.at/workshops