Weeks 910: Advanced Angular Patterns RxJS, NgRx, Performance

Learning Objectives

• Architect reactive data flows using advanced RxJS operators, multicasting, and backpressure control.
• Implement NgRx state management (actions, reducers, effects, selectors) and add unit tests with marble diagrams.
• Diagnose and optimize Angular performance (change detection strategies, memoized selectors, lazy loading).
• Introduce server-side rendering (SSR) considerations and hydration checkpoints.

Core Concepts & References

• RxJS Docs: Higher-order Mapping, Testing with Marbles
• NgRx Docs: NgRx Fundamentals, Effects
• Angular Docs: Performance, Server-Side Rendering
• Video: Mark Pieszak – Change Detection Deep Dive

Hands-On Checklist

1. Refactor dashboard/services to use ComponentStore or NgRx Store for predictable state updates.
2. Create feature slice with entity adapter, selectors, and lazy-loaded feature module.
3. Add effects handling optimistic updates, error orchestration, and retry policies.
4. Write marble tests for effects and pure selectors; enforce strict typing.
5. Profile app with Angular DevTools; adopt OnPush, trackBy, memoized selectors, and defer loading.
6. Introduce SSR via Angular Universal for at least one route; ensure API calls support server execution.

Deliverable: Integrated State Management & Performance Audit

• NgRx store integrated into dashboard/CRUD features with typed selectors and memoization.
• Performance improvements documented (change detection mode, tracked list rendering, lazy routes).
• SSR-enabled route with hydration verification and performance comparison notes.
• Test suite containing marble-based effect test and memoized selector unit tests.

Suggested Daily Breakdown

• Day 1: Introduce NgRx store setup, define actions/reducer/selectors.
• Day 2: Add effects, integrate with components; start marble testing.
• Day 3: Introduce ComponentStore or signals-based store for local state; compare approaches.
• Day 4: Performance profiling and optimization (OnPush, trackBy, splitting bundles).
• Day 5: SSR setup with Angular Universal; ensure API services handle server runtime.
• Day 6: Expand tests (effects/selectors) and document findings.
• Day 7: Compile performance report and SSR deployment checklist.

Reflection & Extension

• Evaluate when to choose NgRx vs. ComponentStore vs. signals.
• Experiment with module federation or micro frontends for large apps.
• Stretch goal: integrate analytics and logging hooks to measure performance over time.