Our_Journey_to_Fine-Grained_Reactivity_in_Angular_By_Maina_Wycliffe.pdf

In this talk, we will go on a journey exploring how Angular change detection has evolved over the years and the impacts of Signals on Angular and its reactivity model, the pros and cons, and what to expect in the future.

Transcript

1. Our Journey to Fine-Grained Reactivity in Angular By Maina Wycliffe
2. Maina Wycliffe Software Engineer Author All Things Typescript www.allthingstypescript.com Twitter: @mwycliffe_dev LinkedIn: mainawycliffe
3. Reactivity in Web Frameworks? - Syncing State with View - View = Function(state) - Detecting changes when they happen - User Actions - Button Clicks - Form Entries, etc - Browser API Changes - Browser Resizes - Scroll Events, etc.
4. Change Detection Models Pull-based Change Detection - The Frameworks Checks For Changes - E.g. Angular Push-based Change Detection - Components alert the framework of changes - Renders immediately after change happens - E.g. React
5. Change Detection in Angular - Push-based change detection - No setState or similar in Angular - Performance impacts on larger applications
6. Fine-grained Reactivity - What is? - Targeted change detection - Only affected components/view are updated - Tracking of Dependencies
7. Signals - what are they? - Notifies interested parties when something has changed - Directly mutation APIs - signal.update(newValue) - Automatic tracking of Dependencies - signal() getter adds dependencies - Fine-grained reactivity - Effects - Listeners for when something changes
8. Signals For Angular - Signal based components - Local/component based change detection - Per view change-detection - Fine-grained reactivity - @Inputs, ViewChild Queries, Models will be signals - CD will only run when inputs are read - Optional Zone.js
9. Why not RxJS? - Observables are Asynchronous by nature - No initial values - You need an async pipe to read values - Observables have side effects - HTTP Calls etc - Not pure functions - RxJS and Signals will work together - RxJS for Async Operations - Signals State Management and CD - Interoperability of Signals with RxJS - Provide initial values when subscribing to RxJS - May be - the end of Async Pipe in the future
10. Impacts of Signals in Angular - Improved Performance in Large Applications - Possible future benefits: - SSR and Hydrations - - Modern Hydration Techniques: - Resumability, - Progressive Enhancements, - Automatic Islands, etc. - Improvement Developer Experience - Hot Module Reloading Improvements in Angular - Mental Model Switch with Signals - Changes to Life Cycle Hooks - Effects - RxJS and Signals Interoperability - Functions in Templates, etc.
11. Resources - Signals RFC - RFC: Angular Signals🚦 · angular/angular · Discussion #49685 (github.com) - Sub-RFC 1: Signals for Angular Reactivity · angular/angular · Discussion #49684 (github.com) - Sub-RFC 2: Signal APIs (github.com) - Sub-RFC 3: Signal-based Components (github.com) - Sub-RFC 4: Observable and Signal Interoperability (github.com) - useSignal() is the Future of Web Frameworks (builder.io)
12. Thank You