Angular for Architects @ngIndia

Angular for Architects @ngIndia

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer

June 06, 2020
Tweet

Transcript

  1. @ManfredSteyer ManfredSteyer

  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 (Remote) Angular Workshops and

    Consulting 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 2) Monorepos

  16. @ManfredSteyer Workspace

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

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

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

  21. @ManfredSteyer Visualize Module Structure

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

  24. @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.
  25. @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
  26. @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
  27. @ManfredSteyer Application Domain Model Infrastructure Isolate your domain! Domain e.

    g. data access Use case specific facades, state management (optional) Entities, biz logic
  28. @ManfredSteyer DEMO

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

    retesting • Access restrictions • Information Hiding • Alternative to NgModules (might become optional) • Ng g lib … easy
  30. @ManfredSteyer DEMO

  31. @ManfredSteyer Free eBook https://ANGULARarchitects.io/book

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

    Finegrained libraries • Enforce restrictions
  33. @ManfredSteyer

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

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