Designing Reactive Angular Components (RxJS)
summary
Demo ecommerce app reacts to clicks to filter vehicles, show details, add/remove items, and recalc totals with a free‑shipping threshold; implementation uses RxJS operators like BehaviorSubject for selections, switchMap + forkJoin for related HTTP fetches, and combineLatest plus scan to maintain cart state and derived subtotal/tax/delivery streams. Design validation computes degrees of freedom (vehicles: 4 vars − 2 eq = 2; cart: 5 vars − 4 eq = 1) to confirm needed subjects.
AI-written summary · about
chapters (13)
- 0:00Intro
- 0:24Deborah Kurata
- 2:34What Is Reactive Programming?
- 3:01Benefits of Reactive Approach
- 3:55Designing for Reactivity
- 6:10Vehicle List Component: Data Flow
- 9:20Vehicle List Component: Reactivity
- 12:06Vehicle Detail Component: Data Flow
- 12:22Retrieve Related Data
- 13:23Cart Component: Data Flow
- 16:00Vehicle Detail Component: Reactivity
- 19:31Cart Component: Reactivity
- 21:44Vehicle List/Vehicle Detail Components
related talks
21mData Composition with RxJS
33mStop Micromanaging State and Start Being Reactive
45mReactive Frontends with RxJS and Angular
19mRxJS Patterns in Angular
26mReactive Programming Future Proof Your Code
34mReactive State Management For Your Angular App
43mReactive Powered: RxJS with Angular Forms
01h 07mReactive Frontends with RxJS and Angular - Sergi Almar