Sustainable SPA with DDD - The beginning of a wonderful friendship?

Transcript

1. @ManfredSteyer Sustainable SPA with DDD The beginning of a wonderful friendship? angular-architects.io
2. What do we need for a good architecture? Experience
3. @ManfredSteyer Domain Driven Design
4. @ManfredSteyer How to create sustainable frontend architectures with ideas from DDD? ?
5. @ManfredSteyer How to create sustainable frontend architectures with ideas from DDD? ?
6. @ManfredSteyer Contents 1) DDD in a Nutshell 2) Monorepos 3) Monorepos & DDD 4) DDD & Micro Frontends
7. @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
8. @ManfredSteyer 1) DDD in a nutshell
9. @ManfredSteyer Domain Driven Design Strategic Design Tactical Design Decomposing a System Design Patterns & Practices
10. @ManfredSteyer Domain Driven Design Strategic Design Tactical Design Decomposing a System Design Patterns & Practices
11. @ManfredSteyer This is what Strategic DDD prevents
12. @ManfredSteyer Example e-Procurement System
13. @ManfredSteyer Catalog Approval Specification Ordering Example Sub-Domains
14. @ManfredSteyer 2) Monorepos
15. @ManfredSteyer Workspace
16. @ManfredSteyer Advantages No version conflicts No burden with distributing libs
17. @ManfredSteyer Moving back and forth Npm Registry
18. @ManfredSteyer https://nrwl.io/nx
19. @ManfredSteyer Visualize Module Structure
20. @ManfredSteyer 3) Nx Monorepos and Strategic Design
21. @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.
22. @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
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
24. @ManfredSteyer Application Domain Infrastructure Isolate your domain! Domain e. g. data access Use case specific facades, state management Entities, biz logic
25. @ManfredSteyer Alternatives to layering • e. g. Hexagonal Architecture, Clean Architecture • Anyway: We need to restrict access b/w libraries
26. @ManfredSteyer DEMO
27. @ManfredSteyer BLOG ANGULARarchitects.io
28. @ManfredSteyer Finegrained Libraries • Unit of recompilation • Unit of retesting • Access restrictions • Information Hiding
29. @ManfredSteyer Facades and State Management
30. @ManfredSteyer Facade (Application Service) @Injectable({ providedIn: 'root' }) export class ProductFacade { […] }
31. @ManfredSteyer Facade (Application Service) @Injectable({ providedIn: 'root' }) export class ProductFacade { public products: Product[] = []; […] } State!
32. @ManfredSteyer Facade (Application Service) @Injectable({ providedIn: 'root' }) export class ProductFacade { public products: Product[] = []; constructor(private productService: ProductService) { } […] }
33. @ManfredSteyer Facade (Application Service) @Injectable({ providedIn: 'root' }) export class ProductFacade { public products: Product[] = []; constructor(private productService: ProductService) { } search(category: string): void { […] } }
34. @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 :-(
35. @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
36. @ManfredSteyer App Home Catalog Search RatingFacade ProductFacade SearchFacade Facades Have State
37. @ManfredSteyer App Home Catalog Search RatingFacade ProductFacade SearchFacade Facades Have State
38. @ManfredSteyer App Home Catalog Search RatingFacade ProductFacade SearchFacade Facades Have State Store (z. B. Redux/ NGRX) Observable Action
39. @ManfredSteyer Entities & Aggregates
40. @ManfredSteyer Entity/ Aggregate Root (OOP) public class BoardingList { private int id; private int flightId; private List<BoardingListEntry> entries; private boolean completed; // Getters and Setters public void setStatus(int passengerId, BoardingStatus status) { // Complex logic to update status } }
41. FP und DDD?
42. @ManfredSteyer Entities (FP) export interface BoardingList { readonly id: number; readonly flightId: number; readonly entries: BoardingListEntry[]; readonly completed: boolean; } export function updateBoardingStatus( boardingList: BoardingList, passengerId: number, status: BoardingStatus) { // Complex logic to update status }
43. @ManfredSteyer 4) Micro Frontends
44. @ManfredSteyer Catalog Ordering Shared Feature Feature Feature Feature Feature … … … … … … … … … @ManfredSteyer e-Procurement App Deployment Monolith
45. @ManfredSteyer Catalog Ordering Shared Feature Feature Feature Feature Feature … … … … … … … … … @ManfredSteyer Catalog App Ordering App Option 1: One App per Domain
46. @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
47. @ManfredSteyer BLOG ANGULARarchitects.io
48. Summary • Slicing into sub-domains • Slicing into layers • Finegrained libraries • Enforce restrictions • Fits to micro frontends
49. @ManfredSteyer
50. @ManfredSteyer Contact and Downloads [web] ANGULARarchitects.io [twitter] ManfredSteyer d Slides & Examples Public: Frankfurt, Munich, Vienna In-House: everywhere http://softwarearchitekt.at/workshops