Vertical Architectures for Scalable Angular Applications

Transcript

1. AngularArchitects.io | @ManfredSteyer Vertical Architectures for Scalable Angular Applications angular.love
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
5. Questions
6. Questions • How large should a vertical be? • How to find good verticals? • How to implement them? • How to enforce rules? • How to analyse your implementation?
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. 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. How to Find Good Verticals?
11. @ManfredSteyer Align Software with (business) domains!
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 Passenger Travel Agency Check-in Agent Boarding Agent
17. @ManfredSteyer Event Storming
18. @ManfredSteyer Booking Boarding Bounded Context Ubiquitous Language Flight Price Seats Passenger Tickets Flight Ticket
19. @ManfredSteyer Another Perspective: Team Topologies 4 Fundamental Team Topologies 3 Interaction Modes
20. @ManfredSteyer Taken from: Team Topologies, Skelton, Pais, 2019 Flow
21. @ManfredSteyer Align Software with (business) domain! Cognitive Load
22. @ManfredSteyer Fracture Planes • Business Domain (most common one!) • Regulatory Compliance • Change Cadence • Team Location • Risk • Performance Isolation • Technology • User Personas
23. @ManfredSteyer Implementing Verticals
24. @ManfredSteyer Options Folders Libraries Applications Micro Frontends
25. @ManfredSteyer Booking Boarding Shared Feature Feature Feature Feature Feature UI UI UI UI UI UI UI UI UI Data Data Data Data Data Data Util Util Util Util Util Util Enterprise Monorepo Patterns, Nrwl 2018: https://tinyurl.com/y2jjxld7 @ManfredSteyer Smart Comp. Dumb Comp.
26. @ManfredSteyer Nx Libs: Modularization Incremental CI/CD Build Cache Parallelization in Builds
27. @ManfredSteyer Sheriff: Module Boundaries on a per-folder basis @softarc/eslint-plugin-sheriff Works with and without Nx
28. @ManfredSteyer Nx & Sheriff Folders: Modularization Incremental CI/CD Build Cache Parallelization in Builds Sheriff
29. @ManfredSteyer Analysis: Detective
30. @ManfredSteyer Demo
31. @ManfredSteyer Announcing: Barrel-less Sheriff
32. @ManfredSteyer Try Out Detective in Your Code Base! npm i @softarc/detective -D npx detective
33. @ManfredSteyer Free eBook (6th Edition) ANGULARarchitects.io/book 20 Chapters 4 new Signal Store Chapters
34. @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 German Version: angulararchitects.io/workshop-de English Version: angulararchitects.io/workshop-en
35. @ManfredSteyer Conclusion Decoupled Verticals Business Domain Mirror Team Structure Cognitive Load Flow & Value Stream
36. Good Fences Make Good Neighbors!
37. ManfredSteyer AngularArchitects.io Slides and Examples