maintainable architectures with angular, …...2) angular monorepos 3) nx monorepos and ddd 4) demo...
TRANSCRIPT
![Page 1: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/1.jpg)
@ManfredSteyer
Maintainable Architectures withAngular, Monorepos and Strategic Design
Manfred Steyer
SOFTWAREarchitekt.at
ManfredSteyer
![Page 2: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/2.jpg)
@ManfredSteyer
What do we need for a good architecture ?
Experience
![Page 3: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/3.jpg)
@ManfredSteyer
Sharing Experience for Architectures
BEST PRACTICES PATTERNS METHODOLOGY
![Page 4: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/4.jpg)
@ManfredSteyer
Domain Driven Design
![Page 5: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/5.jpg)
@ManfredSteyer
How can we improve our frontend architectures with ideas from DDD?
![Page 6: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/6.jpg)
@ManfredSteyer
How can we improve our frontend architectures with ideas from DDD?
![Page 7: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/7.jpg)
@ManfredSteyer
Contents
1) Strategic
Design 101
2) Angular
Monorepos
3) Nx Monorepos
and DDD
4) DEMO
![Page 8: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/8.jpg)
@ManfredSteyer
About me…
• Manfred SteyerSOFTWAREarchitekt.at
• Angular Trainings and Consultancy
• Google Developer Expert (GDE)
• Trusted Collaborator in the Angular Team
Page ▪ 9
Manfred Steyer
Public: Frankfurt, Vienna, Munich, Düsseldorf, Stuttgart
In-House: everywhere
http://softwarearchitekt.at/workshops
![Page 9: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/9.jpg)
@ManfredSteyer
Strategic Designin a nutshell
![Page 10: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/10.jpg)
@ManfredSteyer
Domain Driven Design
Strategic Design Tactical Design
Decomposing a SystemDesign Patterns& Practices
![Page 11: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/11.jpg)
@ManfredSteyer
Domain Driven Design
Strategic Design Tactical Design
Decomposing a SystemDesign Patterns& Practices
![Page 12: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/12.jpg)
@ManfredSteyer
This is what Strategic DDD prevents
![Page 13: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/13.jpg)
@ManfredSteyer
Example
e-Procurement System
![Page 14: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/14.jpg)
@ManfredSteyer
Catalog Approval
SpecificationOrdering
ExampleSu
b-D
om
ains
![Page 15: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/15.jpg)
@ManfredSteyer
Request Product
SpecifyOrder
ApproveOrder
Send Order
Request Budget
ApproveBudget
Budget Hierarchy
Manager Manager
Employee Expert Manager Buying Agent
Product
![Page 16: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/16.jpg)
@ManfredSteyer
Catalog Approval
Bounded Cotext
Ubiquitous Language
![Page 17: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/17.jpg)
@ManfredSteyer
Catalog ApprovalSpecification
Ordering
Context Map
![Page 18: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/18.jpg)
@ManfredSteyer
Approval
Specification
Context Map
Catalog
Catalog
Shared Kernel
![Page 19: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/19.jpg)
@ManfredSteyer
Catalog Approval
AP
I
![Page 20: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/20.jpg)
@ManfredSteyer
Catalog Approval
Calc VAT Calc VAT
Seperate Ways
![Page 21: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/21.jpg)
@ManfredSteyer
Lots of additional approaches for cross-domain communication …
![Page 22: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/22.jpg)
@ManfredSteyer
2) Monorepos
![Page 23: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/23.jpg)
@ManfredSteyer
Workspace
![Page 24: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/24.jpg)
@ManfredSteyer
Creating a Workspace
npm install -g @angular/cli
ng new workspace
cd workspace
ng generate app my-appng generate lib my-lib
ng serve --project my-appng build --project my-app
![Page 25: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/25.jpg)
@ManfredSteyer
Advantages
Everyone uses the latest versions
No version conflicts
No burden with distributing libs
Creating new libs: Adding folder
Experience: Successfully used at Google, Facebook, …
![Page 26: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/26.jpg)
@ManfredSteyer
Moving back and forth
Npm Registry
![Page 27: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/27.jpg)
@ManfredSteyer
Tooling & Generator
https://nrwl.io/nx
![Page 28: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/28.jpg)
@ManfredSteyer
Visualize Module
Structure
![Page 29: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/29.jpg)
@ManfredSteyer
Nx Monorepos and Strategic Design
![Page 30: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/30.jpg)
@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
![Page 31: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/31.jpg)
@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
![Page 32: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/32.jpg)
@ManfredSteyer
Application
Domain
Infrastructure
Isolate your domain!
Domain Domain
Infrastructure
e. g. data access
Application
Use case specific facades
![Page 33: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/33.jpg)
@ManfredSteyer
Alternatives to layering
• e. g. Hexagonal Architecture, Clean Architecture
• Anyway: We need to restrict access b/w libraries
![Page 34: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/34.jpg)
@ManfredSteyer
DEMO
![Page 35: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/35.jpg)
@ManfredSteyer
Micro Apps?Short outlook
![Page 36: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/36.jpg)
@ManfredSteyer
Catalog Ordering Shared
Feature Feature Feature Feature Feature
… … … … … … … … …
@ManfredSteyer
Catalog App Ordering App
Option 1: One App per Domain
![Page 37: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/37.jpg)
@ManfredSteyer
Catalog Ordering Shared
Feature Feature Feature Feature Feature
… … … … … … … … …
@ManfredSteyer
Catalog App Ordering App
Option 2: One Monorepo per Domain
Publish shared libsseperately via npm
![Page 38: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/38.jpg)
@ManfredSteyer
Summary
Slicing into sub-domains
Slicing into layers
Non-strict layering
Finegrained libraries
Enforce restrictions
![Page 39: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/39.jpg)
@ManfredSteyer
![Page 40: Maintainable Architectures with Angular, …...2) Angular Monorepos 3) Nx Monorepos and DDD 4) DEMO @ManfredSteyer About me… •Manfred Steyer SOFTWAREarchitekt.at •Angular Trainings](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee37292ad6a402d666d4ed8/html5/thumbnails/40.jpg)
@ManfredSteyer
Contact and Downloads
[mail] [email protected]
[web] SOFTWAREarchitekt.at
[twitter] ManfredSteyer
d
Slides & Examples
Public: Frankfurt, Vienna, Munich, Düsseldorf, StuttgartIn-House: everywhere
http://softwarearchitekt.at/workshops