The Internal Magic of Angular Signals - iJS Munich 10/2023

ANGULARarchitects.io - Michael Egger-Zikes

Angular 16 introduced a new reactive primitive called Signals. Those APIs offer an additional concept besides RxJS to handle reactivity and influence the framework in many areas. Signals will lead to a different more fine-grained and more performant way of processing the Change Detection to update the view. All of this is added in a backward-compatible way.

While the use of Signals feels simpler and more intuitive than RxJS subscription management, it will likely not replace RxJS in all areas. Since Signals are that easy to work with, many developers are surprised how the “Magic of Angular Signals” is implemented in detail and why it is possible that computed values and effects reprocess as dependent Signals change.

This talk will give insights into how Signals are implemented to make sure that they update correctly and no intermediate processing results are sent out.

Transcript

1. The Internal Magic Michael Egger-Zikes of Angular Signals ANGULARarchitects.io
2. Signal APIs Reactive Nodes Internal Magic of Signals Dependency Tracking & Updates Upcoming Features Michael Egger-Zikes (@MikeZks)
3. About Michael • Michael Egger-Zikes ANGULARarchitects.io • Focus on Angular • Trainings, Consultancy, Reviews • Conference Speaker Public: in-person or remote In-House: everywhere angulararchitects.io /en/angular-workshops Michael Egger-Zikes @MikeZks
4. Reactive Primitive • Signals • SolidJS: Ryan Carniato • Angular Team: Pawel Kozlowski, Alex Rickabaugh et al. • Reactive Primitive • Return the current value synchronously • Same value does not trigger update • Can update consuming logic on change automatically • Signals & RxJS • No direct replacement for RxJS, though it may become optional • Allows subscription management for Observable Streams • Easier to use in Templates Michael Egger-Zikes (@MikeZks)
5. Signal API – already State Management? • WritableSignal • Signal is a Function and Object combined • user = signal({ name: 'michael.egger-zikes' }) • <p>{{ user().name }}</p> • Update Signal value • Overwrite • user.set({ name: 'manfred.steyer' }) • Immutable • user.update(u => ({ ...u, name: 'manfred.steyer' })) • Mutable • user.mutate(u => { u.name = 'manfred.steyer'; }) Michael Egger-Zikes (@MikeZks)
6. Derived State • Computed Signal • Uses Signals als Inputs to create derived state • userStr = computed(() => 'User: ' + user().name) • Side Effects • Is executed again, if consuming Signals change • effect(() => console.log(user(), product())) Michael Egger-Zikes (@MikeZks)
7. Signals Interop w/ RxJS & NgRx Michael Egger-Zikes (@MikeZks) toObservable(signal) toSignal(observable$) takeUntilDestroyed() this.store.selectSignal(ngrxSelectorFn)
8. Writable Signal Read/Write State Computed Signal Derived State ReactiveLViewConsumer Template Updates Reactive Nodes Watch Side-Effect Michael Egger-Zikes (@MikeZks)
9. DEMO Computed Effect
10. Not Active Defined, no Read Not Live Non-Reactive Read Signal Update Behavior Live Reactive Updates Michael Egger-Zikes (@MikeZks)
11. DEMO Microtasks Glitch-Free (None-)Live Consumers
12. from signal() Reactive Edge: None-Live Consumer None-Live search() Michael Egger-Zikes (@MikeZks)
13. from signal() Reactive Edge: Live Consumer Live effect() Michael Egger-Zikes (@MikeZks)
14. DEMO Tasks Dependency Tracking
15. DEMO Untracked Reactive Context
16. Signal Magic • Reactive Context • Reactive IDs • Producer • Consumer • activeConsumer → Signal read • Edge: Connection b/w Producer and Consumer • Angular’s Change Detection • Fine-grained DOM updates on change only • Embedded View: *ngIf, *ngFor • Change Detection can run locally and not necessarily Top-Down • NgZone will likely become optional Michael Egger-Zikes (@MikeZks)
17. Signal-based Components Michael Egger-Zikes (@MikeZks) Work w/o Zone.js Interop with traditional Components Fine-grained Change Detection Not forced to update the current codebase
18. Signal-based Components • APIs for automatic Signal creation • flight = input() • Computed Signal • selected = model() • Proxy Signal • @for (flight of bookingFeature.flights(); track flight.id) { } • Reactive @for provides Signals to trigger the Embedded Views • Important for future browser updates • Signal-based Change Detection w/o Zone.js or combined with Zone.js • Signal reads trigger a Change Detection processing only Michael Egger-Zikes (@MikeZks)
19. DEMO Signal-based Change Detection PoC
20. [web] ANGULARarchitects.io [twitter] Michael Egger-Zikes (@MikeZks) [repo] https://github.com/mikezks/ijs-signals-magic [repo] https://github.com/intauria/signals-experimental Contact • Slides • Code Remote Workshops: Public & tailored to your company angulararchitects.io/angular-workshops