Our Journey to Fine-Grained Reactivity in Angular By Maina Wycliffe

Maina Wycliffe Software Engineer Author All Things Typescript www.allthingstypescript.com Twitter: @mwycliffe_dev LinkedIn: mainawycliffe

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.

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

Change Detection in Angular - Push-based change detection - No setState or similar in Angular - Performance impacts on larger applications

Fine-grained Reactivity - What is? - Targeted change detection - Only affected components/view are updated - Tracking of Dependencies

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

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

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

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.

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)

Thank You