Strategic Design (DDD) for the Frontend @DDD Meetup Stuttgart

Transcript

1. Strategic Design (DDD) for the Frontend ANGULARarchitects.io
2. Good Fences Make Good Neighbors!
3. Vertical Architectures Minimal Dependencies Vertical 1 Vertical 2 Vertical 3 Feature Feature Feature Feature Feature Feature Feature Feature Feature Conway's law Minimize Cognitive Load!
5. 5 Questions
6. 6 • How large should a vertical be? • How to find good verticals? • How to evaluate my current solution? • How to implement verticals? Agenda
7. About me… Manfred Steyer, ANGULARarchitects.io (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular Manfred Steyer
8. 8 How Large Should a Vertical be?
9. Forces Influencing Desirable Size Minimal Dependencies Vertical 1 Vertical 2 Vertical 3 Feature Feature Feature Feature Feature Feature Feature Feature Feature Minimum Size: Correlating Features Maximum Size: Single Team
10. 10 How to Find Good Verticals?
11. @ManfredSteyer Align Software with (Business) Domain!
12. @ManfredSteyer Domain Driven Design Strategic Design Tactical Design Decomposing a System Design Patterns & Practices
13. @ManfredSteyer Domain Driven Design Strategic Design Tactical Design Decomposing a System Design Patterns & Practices
14. @ManfredSteyer Example Flight System
15. @ManfredSteyer Booking Check-in Boarding Luggage Example Sub-Domains
16. @ManfredSteyer Book Flight Check-in Passenger Check-in Luggage Board Plane Pickup Luggage Finding Sub-Domains
17. @ManfredSteyer Event Storming
18. @ManfredSteyer Booking Boarding Bounded Context as „Linguistic Boundary“ Ubiquitous Language Flight Price Seats Passenger Tickets Flight Ticket
19. @ManfredSteyer Linguistic Boundaries in BE & FE Frontend Backend
20. @ManfredSteyer Linguistic Boundaries in BE & FE Frontend Backend
21. @ManfredSteyer BFF as a Technical Solution Frontend Backend BFF BFF BFF
22. @ManfredSteyer Another Perspective: Team Topologies 4 Fundamental Team Topologies 3 Interaction Modes
23. @ManfredSteyer Taken from: Team Topologies, Skelton, Pais, 2019 Flow
24. @ManfredSteyer Align Software with (business) domain! Cognitive Load
25. @ManfredSteyer 28 • Business Domain (most common one!) • Regulatory Compliance • Change Cadence • Team Location • Risk • Performance Isolation • Technology • User Personas Fracture Planes
26. @ManfredSteyer 29 Evaluating the Current State
27. @ManfredSteyer Forensic Analysis Source Code History History History Forensic Analysis „Hidden“ Patterns e.g., Git History
28. @ManfredSteyer
29. @ManfredSteyer 32 DEMO
30. @ManfredSteyer 33 Implementing Verticals
31. @ManfredSteyer Options Folders Libraries Applications Implementation Options
32. @ManfredSteyer Nx Libs: Modularization Incremental CI/CD Build Cache Parallelization in Builds
33. @ManfredSteyer 36 DEMO
34. @ManfredSteyer Sheriff: Module Boundaries on a per-folder basis @softarc/eslint-plugin-sheriff Works with and without Nx
35. @ManfredSteyer Nx & Sheriff Folders: Modularization Incremental CI/CD Build Cache Parallelization in Builds Sheriff
36. @ManfredSteyer 39 DEMO
37. @ManfredSteyer Micro Frontends: Module Federation Shell (Host) Microfrontend (Remote) // Maps Urls in // webpack config remotes: { mfe1: "http://..." } // Expose files in // webpack config exposes: { Cmp: './my.cmp.ts' } import('mfe1/Cmp')
38. @ManfredSteyer 41 DEMO
39. @ManfredSteyer Free eBook (6th Edition) ANGULARarchitects.io/book • From DDD to Micro Frontends • 20 Chapters • > 18.000 (!) Downloads
40. @ManfredSteyer More: Angular Architecture Workshop • Maintainable Architectures with Modern Angular • Strategic Design with Nx & Sheriff • Micro Frontends with Module Federation • Signals and Your Architecture: CD & Zone-less, NGRX & Signal Store, RxJS-Interop, Resource API, Linked Signals International (English) Version in May German Version in August
41. @ManfredSteyer Conclusion Decoupled Verticals Business Domain Mirror Team Structure Cognitive Load Forensic Analysis Folders, Libs, Apps
42. Good Fences Make Good Neighbors!