The Architecture of Components
summary
Argues that complexity falls when state sits only where it belongs and shows concrete patterns and code-level tradeoffs. Defines presentational/container/layout components, uses Angular Router and HttpClient for persistence and sharing, and prefers services and component-local state over global stores unless needed. Describes a real rewrite of a Universal Picker where passing props down fails and gets replaced by a smart star component backed by a star service with a map and ReplaySubject observable, improving reuse and update consistency.
AI-written summary · about
chapters (33)
- 0:00Introduction
- 2:31Types of Components
- 2:53Presentational
- 3:37Container
- 4:09Layout
- 4:53Data
- 5:10Containers
- 5:32Warning
- 5:51Universal Picker
- 6:33Tab Bar
- 7:11ListView
- 7:33FeatureFlag
- 8:31What Went Well
- 9:02What Didnt Go Well
- 9:37The Next Version
- 10:47Where Should Your State Live
- 11:37Types of State
- 12:34Questions to Ask Yourself
- 13:13How to Store State
- 14:08Organization
- 14:26Context
- 14:36Subject
- 15:35Router
- 15:58Home
- 16:24Settings
- 17:07Smart Component
- 17:29ReadOnly Observable
- 18:48Favorites
- 19:01Single Input
- 20:25Star
- 21:43Requirements
- 22:30Application Wide State
- 23:30Expert Zone
related talks
25mAngular Architecture: From Patterns to Implementation
27mAngular Architecture: From Patterns to Implementation
27mThe good, the bad and the ugly - Component architecture at scale
30mAngular: Keeping it Fat, Dumb, and Happy: An Architectural Approach
34mScalable Angular Architecture
23mSmart and Dumb Components
51mBuilding Better Components — A Journey to a More Resilient Frontend
26mScalable Angular Architecture