RxJS Advanced Patterns Learn how to manage heavily dynamic Angular apps
summary
Shows a concrete RxJS approach: a reactive micro-architecture that turns UI actions into a stream of commands, stores a event sourcing with command list, and derives state by replaying those commands. Demonstrates an Angular demo (start/stop/reset counter) implemented with Subjects, custom operators (a cherry/replay style operator and custom RxJS operators like latestFrom), and a single-subscription pattern to avoid leaks. Claims the pattern keeps tests and effects isolated, the demo runs correctly, and performance is improved by late distinct/merge handling.
AI-written summary · about
chapters (15)
- 0:00Dynamic UI management
- 1:27UI state handling challenges
- 4:47Reactive micro architecture
- 8:08Subscription and side effects
- 12:11Observers and state management
- 13:33Event sourcing for state
- 15:06Command Query Responsibility Segregation
- 21:51Preview state and reconstruction
- 24:34State update operators
- 27:37Timer-based state
- 30:27Latest state retrieval
- 32:17Commands versus queries
- 33:25State updates with Subjects
- 35:15Performance optimization
- 37:58Q&A
related talks
37mReactive Programming with RxJS
34mOperate Heavily Dynamic UIs with RxJS
32mMastering Reactive Programming with RxJS
36mRxJS: A Better Way to Write Frontend Applications
26mReactive Programming Future Proof Your Code
51mReactive programming in Angular
53mRxJS Observables in Angular
01h 07mReactive Frontends with RxJS and Angular - Sergi Almar