Scalable architectures in Angular with Nx

The larger your Angular application becomes, the greater the challenges of maintaining a scalable and maintainable code base. Without a well-thought-out architecture, complexity can quickly get out of control, leading to poor applications and delays in development. In this talk, Fabian Gosebrink shows how to build scalable and modular architectures for Angular applications with Nx. We'll learn how Nx helps us organize large codebases into manageable libraries, split code, and improve team collaboration. We'll cover best practices for setting up workspaces, leveraging Nx's powerful tools, and optimizing your development process. By the end of this session, developers will have a clear understanding of how to structure Angular applications with Nx to ensure long-term maintainability, better performance, and easier collaboration for small and large teams.

Transcript

1. Architectures Scaleable With angular and nx
2. fabiangosebrink.bsky.social Fabian Gosebrink
3. fabiangosebrink.bsky.social Fabian Gosebrink
7. What the F*** is in there???
8. Throwaway Code?
9. Time Pressure
11. Testing?
15. Fix bug
16. Fix bug Create a feature
17. Fix bug Create a feature In every app
21. Dependency Management
22. Publish Install Build
23. Different Versions Multiple Apps
24. Pipelines Additional
25. repositories Additional
26. Internal Arch External Deps
28. Architectures Scaleable With angular and nx
30. Latest Tools
32. Modern Techniques
35. What Are Workspaces?
48. Multiple Apps Multiple Libs
49. Nx CLI
50. Nx CLI
51. Nx CLI
52. Nx CLI
57. Rethinking Libraries
58. Libraries
59. Libraries Share Code between Apps
60. Libraries Share Code between Apps Provide Feature to ONe app
61. Libraries Share Code between Apps Provide Feature to ONe app Multiple libs = one feature
62. Features
63. Features Route based
64. Features Route based State based
65. Features Route based State based UI Based
67. Feature
68. Feature Container
69. Feature Container Ui
70. Feature Container Ui Domain
71. Feature Container Ui Domain Utils ...
72. Feature Container Ui Domain Utils ... Container Components Presentational Components Models, services, state Utility Functions You name it!
74. https://go.nrwl.io/angular-enterprise-monorepo-patterns-new-book
75. Container Ui Vs.
76. @Component({ /* ... */ }) export class MainDoggoComponent implements OnInit { doggoId = input(''); store = inject(DoggosStore); private readonly destroyRef = inject(DestroyRef); ngOnInit(): void { this.store.loadDoggos(this.doggoId()); this.store.startListeningToRealtimeDoggoEvents(); this.destroyRef.onDestroy(() => { this.store.stopListeningToRealtimeDoggoEvents(); }); } rateDoggo(rating: number): void { this.store.rateDoggo(rating); } skipDoggo(): void { this.store.selectNextDoggo(); } selectDoggo(id: string): void { this.store.selectDoggo(id); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
77. @Component({ /* ... */ }) export class MainDoggoComponent implements OnInit { doggoId = input(''); store = inject(DoggosStore); private readonly destroyRef = inject(DestroyRef); ngOnInit(): void { this.store.loadDoggos(this.doggoId()); this.store.startListeningToRealtimeDoggoEvents(); this.destroyRef.onDestroy(() => { this.store.stopListeningToRealtimeDoggoEvents(); }); } rateDoggo(rating: number): void { this.store.rateDoggo(rating); } skipDoggo(): void { this.store.selectNextDoggo(); } selectDoggo(id: string): void { this.store.selectDoggo(id); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 doggoId = input(''); @Component({ /* ... */ }) 1 export class MainDoggoComponent implements OnInit { 2 3 store = inject(DoggosStore); 4 private readonly destroyRef = inject(DestroyRef); 5 6 ngOnInit(): void { 7 this.store.loadDoggos(this.doggoId()); 8 this.store.startListeningToRealtimeDoggoEvents(); 9 10 this.destroyRef.onDestroy(() => { 11 this.store.stopListeningToRealtimeDoggoEvents(); 12 }); 13 } 14 15 rateDoggo(rating: number): void { 16 this.store.rateDoggo(rating); 17 } 18 19 skipDoggo(): void { 20 this.store.selectNextDoggo(); 21 } 22 23 selectDoggo(id: string): void { 24 this.store.selectDoggo(id); 25 } 26 } 27
78. @Component({ /* ... */ }) export class MainDoggoComponent implements OnInit { doggoId = input(''); store = inject(DoggosStore); private readonly destroyRef = inject(DestroyRef); ngOnInit(): void { this.store.loadDoggos(this.doggoId()); this.store.startListeningToRealtimeDoggoEvents(); this.destroyRef.onDestroy(() => { this.store.stopListeningToRealtimeDoggoEvents(); }); } rateDoggo(rating: number): void { this.store.rateDoggo(rating); } skipDoggo(): void { this.store.selectNextDoggo(); } selectDoggo(id: string): void { this.store.selectDoggo(id); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 doggoId = input(''); @Component({ /* ... */ }) 1 export class MainDoggoComponent implements OnInit { 2 3 store = inject(DoggosStore); 4 private readonly destroyRef = inject(DestroyRef); 5 6 ngOnInit(): void { 7 this.store.loadDoggos(this.doggoId()); 8 this.store.startListeningToRealtimeDoggoEvents(); 9 10 this.destroyRef.onDestroy(() => { 11 this.store.stopListeningToRealtimeDoggoEvents(); 12 }); 13 } 14 15 rateDoggo(rating: number): void { 16 this.store.rateDoggo(rating); 17 } 18 19 skipDoggo(): void { 20 this.store.selectNextDoggo(); 21 } 22 23 selectDoggo(id: string): void { 24 this.store.selectDoggo(id); 25 } 26 } 27 store = inject(DoggosStore); @Component({ /* ... */ }) 1 export class MainDoggoComponent implements OnInit { 2 doggoId = input(''); 3 4 private readonly destroyRef = inject(DestroyRef); 5 6 ngOnInit(): void { 7 this.store.loadDoggos(this.doggoId()); 8 this.store.startListeningToRealtimeDoggoEvents(); 9 10 this.destroyRef.onDestroy(() => { 11 this.store.stopListeningToRealtimeDoggoEvents(); 12 }); 13 } 14 15 rateDoggo(rating: number): void { 16 this.store.rateDoggo(rating); 17 } 18 19 skipDoggo(): void { 20 this.store.selectNextDoggo(); 21 } 22 23 selectDoggo(id: string): void { 24 this.store.selectDoggo(id); 25 } 26 } 27
79. @Component({ /* ... */ }) export class MainDoggoComponent implements OnInit { doggoId = input(''); store = inject(DoggosStore); private readonly destroyRef = inject(DestroyRef); ngOnInit(): void { this.store.loadDoggos(this.doggoId()); this.store.startListeningToRealtimeDoggoEvents(); this.destroyRef.onDestroy(() => { this.store.stopListeningToRealtimeDoggoEvents(); }); } rateDoggo(rating: number): void { this.store.rateDoggo(rating); } skipDoggo(): void { this.store.selectNextDoggo(); } selectDoggo(id: string): void { this.store.selectDoggo(id); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 doggoId = input(''); @Component({ /* ... */ }) 1 export class MainDoggoComponent implements OnInit { 2 3 store = inject(DoggosStore); 4 private readonly destroyRef = inject(DestroyRef); 5 6 ngOnInit(): void { 7 this.store.loadDoggos(this.doggoId()); 8 this.store.startListeningToRealtimeDoggoEvents(); 9 10 this.destroyRef.onDestroy(() => { 11 this.store.stopListeningToRealtimeDoggoEvents(); 12 }); 13 } 14 15 rateDoggo(rating: number): void { 16 this.store.rateDoggo(rating); 17 } 18 19 skipDoggo(): void { 20 this.store.selectNextDoggo(); 21 } 22 23 selectDoggo(id: string): void { 24 this.store.selectDoggo(id); 25 } 26 } 27 store = inject(DoggosStore); @Component({ /* ... */ }) 1 export class MainDoggoComponent implements OnInit { 2 doggoId = input(''); 3 4 private readonly destroyRef = inject(DestroyRef); 5 6 ngOnInit(): void { 7 this.store.loadDoggos(this.doggoId()); 8 this.store.startListeningToRealtimeDoggoEvents(); 9 10 this.destroyRef.onDestroy(() => { 11 this.store.stopListeningToRealtimeDoggoEvents(); 12 }); 13 } 14 15 rateDoggo(rating: number): void { 16 this.store.rateDoggo(rating); 17 } 18 19 skipDoggo(): void { 20 this.store.selectNextDoggo(); 21 } 22 23 selectDoggo(id: string): void { 24 this.store.selectDoggo(id); 25 } 26 } 27 ngOnInit(): void { this.store.loadDoggos(this.doggoId()); this.store.startListeningToRealtimeDoggoEvents(); this.destroyRef.onDestroy(() => { this.store.stopListeningToRealtimeDoggoEvents(); }); } @Component({ /* ... */ }) 1 export class MainDoggoComponent implements OnInit { 2 doggoId = input(''); 3 store = inject(DoggosStore); 4 private readonly destroyRef = inject(DestroyRef); 5 6 7 8 9 10 11 12 13 14 15 rateDoggo(rating: number): void { 16 this.store.rateDoggo(rating); 17 } 18 19 skipDoggo(): void { 20 this.store.selectNextDoggo(); 21 } 22 23 selectDoggo(id: string): void { 24 this.store.selectDoggo(id); 25 } 26 } 27
80. @Component({ /* ... */ }) export class MainDoggoComponent implements OnInit { doggoId = input(''); store = inject(DoggosStore); private readonly destroyRef = inject(DestroyRef); ngOnInit(): void { this.store.loadDoggos(this.doggoId()); this.store.startListeningToRealtimeDoggoEvents(); this.destroyRef.onDestroy(() => { this.store.stopListeningToRealtimeDoggoEvents(); }); } rateDoggo(rating: number): void { this.store.rateDoggo(rating); } skipDoggo(): void { this.store.selectNextDoggo(); } selectDoggo(id: string): void { this.store.selectDoggo(id); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 doggoId = input(''); @Component({ /* ... */ }) 1 export class MainDoggoComponent implements OnInit { 2 3 store = inject(DoggosStore); 4 private readonly destroyRef = inject(DestroyRef); 5 6 ngOnInit(): void { 7 this.store.loadDoggos(this.doggoId()); 8 this.store.startListeningToRealtimeDoggoEvents(); 9 10 this.destroyRef.onDestroy(() => { 11 this.store.stopListeningToRealtimeDoggoEvents(); 12 }); 13 } 14 15 rateDoggo(rating: number): void { 16 this.store.rateDoggo(rating); 17 } 18 19 skipDoggo(): void { 20 this.store.selectNextDoggo(); 21 } 22 23 selectDoggo(id: string): void { 24 this.store.selectDoggo(id); 25 } 26 } 27 store = inject(DoggosStore); @Component({ /* ... */ }) 1 export class MainDoggoComponent implements OnInit { 2 doggoId = input(''); 3 4 private readonly destroyRef = inject(DestroyRef); 5 6 ngOnInit(): void { 7 this.store.loadDoggos(this.doggoId()); 8 this.store.startListeningToRealtimeDoggoEvents(); 9 10 this.destroyRef.onDestroy(() => { 11 this.store.stopListeningToRealtimeDoggoEvents(); 12 }); 13 } 14 15 rateDoggo(rating: number): void { 16 this.store.rateDoggo(rating); 17 } 18 19 skipDoggo(): void { 20 this.store.selectNextDoggo(); 21 } 22 23 selectDoggo(id: string): void { 24 this.store.selectDoggo(id); 25 } 26 } 27 ngOnInit(): void { this.store.loadDoggos(this.doggoId()); this.store.startListeningToRealtimeDoggoEvents(); this.destroyRef.onDestroy(() => { this.store.stopListeningToRealtimeDoggoEvents(); }); } @Component({ /* ... */ }) 1 export class MainDoggoComponent implements OnInit { 2 doggoId = input(''); 3 store = inject(DoggosStore); 4 private readonly destroyRef = inject(DestroyRef); 5 6 7 8 9 10 11 12 13 14 15 rateDoggo(rating: number): void { 16 this.store.rateDoggo(rating); 17 } 18 19 skipDoggo(): void { 20 this.store.selectNextDoggo(); 21 } 22 23 selectDoggo(id: string): void { 24 this.store.selectDoggo(id); 25 } 26 } 27 rateDoggo(rating: number): void { this.store.rateDoggo(rating); } skipDoggo(): void { this.store.selectNextDoggo(); } selectDoggo(id: string): void { this.store.selectDoggo(id); } } @Component({ /* ... */ }) 1 export class MainDoggoComponent implements OnInit { 2 doggoId = input(''); 3 store = inject(DoggosStore); 4 private readonly destroyRef = inject(DestroyRef); 5 6 ngOnInit(): void { 7 this.store.loadDoggos(this.doggoId()); 8 this.store.startListeningToRealtimeDoggoEvents(); 9 10 this.destroyRef.onDestroy(() => { 11 this.store.stopListeningToRealtimeDoggoEvents(); 12 }); 13 } 14 15 16 17 18 19 20 21 22 23 24 25 26 27
81. @Component({ /* ... */ }) export class DoggoListComponent { doggos: = input<Doggos[]>([]); doggoSelected = output<string>(); selectDoggo(doggo: Doggo) { this.doggoSelected.emit(doggo.id); } } 1 2 3 4 5 6 7 8 9 10
82. @Component({ /* ... */ }) export class DoggoListComponent { doggos: = input<Doggos[]>([]); doggoSelected = output<string>(); selectDoggo(doggo: Doggo) { this.doggoSelected.emit(doggo.id); } } 1 2 3 4 5 6 7 8 9 10 doggos: = input<Doggos[]>([]); @Component({ /* ... */ }) 1 export class DoggoListComponent { 2 3 4 doggoSelected = output<string>(); 5 6 selectDoggo(doggo: Doggo) { 7 this.doggoSelected.emit(doggo.id); 8 } 9 } 10
83. @Component({ /* ... */ }) export class DoggoListComponent { doggos: = input<Doggos[]>([]); doggoSelected = output<string>(); selectDoggo(doggo: Doggo) { this.doggoSelected.emit(doggo.id); } } 1 2 3 4 5 6 7 8 9 10 doggos: = input<Doggos[]>([]); @Component({ /* ... */ }) 1 export class DoggoListComponent { 2 3 4 doggoSelected = output<string>(); 5 6 selectDoggo(doggo: Doggo) { 7 this.doggoSelected.emit(doggo.id); 8 } 9 } 10 doggoSelected = output<string>(); selectDoggo(doggo: Doggo) { this.doggoSelected.emit(doggo.id); } @Component({ /* ... */ }) 1 export class DoggoListComponent { 2 doggos: = input<Doggos[]>([]); 3 4 5 6 7 8 9 } 10
84. Nx is built on a technology-agnostic core that maintains modular units of code and understands the dependency graph between them. "
85. Dependency Graph
87. Demo
88. 80 / 20
89. Your Architecture Is a Moving part
90. Your Architecture Is a Moving part It Evolves!
91. nx g @nx/angular:move --project my-lib --destination shared/my-lib
92. Affected
95. nx affected -t lint
97. Buildable Publishable Normal
98. ... --buildable ... --publishable
99. Code Quality
102. App About Doggos Container Container Ui Domain Utils Shared util-environments util-Auth util-Common UI-common
103. App About Doggos Container Container Ui Domain Utils Shared util-environments util-Auth util-Common UI-common scope:about scope:doggos scope:shared
104. App About Doggos container container Ui Domain Utils type:container Shared util-environments util-Auth util-Common UI-common scope:about scope:doggos scope:shared
105. App About Doggos Container Ui Domain Utils type:container type:ui type:domain type:utils Shared util-environments util-Auth util-Common UI-common scope:about scope:doggos scope:shared container type:container
106. App About Doggos Ui Domain Utils type:ui type:domain type:utils Shared util-environments type:util util-Auth util-Common UI-common type:util type:util type:ui scope:about scope:doggos scope:shared Container type:container container type:container
120. nx migrate
126. Thank You