Angular Signals - Gamechanger für reaktive Entwicklung

Das Angular-Team stellt sein reaktives Modell auf den Prüfstand und schlägt als neuen Ansatz die von anderen Frameworks bekannten Signals vor. Während Altanwendungen zunächst weiter funktionieren wie gehabt, bieten Signals entscheidende Vorteile gegenüber dem bestehenden Modell.
Brauchen Anwendungen in Zukunft überhaupt noch RxJS? Welche Vorteile haben Signals auf die Performance einer Anwendung? Und wie funktioniert das Reaktivitätsmodell im Detail?
Yannick Baron von Thinktecture und Google Developer Expert für Angular beantwortet alle Fragen rund um die neuen Angular-Signals.

Transcript

1. Angular Signals Gamechanger für reaktive Entwicklung Yannick Baron @yannick_baron
2. Angular application Components are the main building blocks Consist of a TypeScript class, an HTML template, and CSS styles Essentially define your custom DOM nodes Component templates can use more components 👉 An application is essentially a tree of components
3. A simple Angular component... @Component() export class CounterComponent { counter = 0; increment() { this.counter++; } reset() { this.counter = 0; } } <p>{{ counter }}</p> <button (click)="increment()">Increase Counter</button> <button (click)="reset()">Reset</button> 👉 note: setting a variable on the component updates the template
4. The Magic of Angular: Zone.js Zones are execution contexts that track asynchronous operations Achieved via monkey patching Angular creates a root zone for the application ("NgZone") When an event or asynchronous task occurs, Zone.js notifies Angular Angular triggers change detection and updates the views
5. Angular Change detection Start from root component Walk through the component tree Check template bindings If change detected, update DOM node Changes propagated to children
6. Downsides of Zone.js approach Reliant on Zone.js monkey patching Runs more often than necessary Sometimes leads to unpredictable behavior Recheck all template bindings 👉 Advanced concepts to learn to improve performance: OnPush, Immutability, runOutsideAngular, ...
7. Reactive Angular with RxJS Use OnPush strategy Reactive state management Subscribe via Async pipe Async pipe notifies the change detector 👉 Only check relevant components
8. Downsides of RxJS (for template rendering) Observables asynchronous by default AsyncPipe default null value Subscription management Recheck all template bindings No reactive inputs
9. Enter Signals Reactive primitive Hold value, notify when value changes Integrated with Angular 👉 Results in knowing exactly which nodes need updating
10. Same component as before @Component() export class CounterComponent { counter = 0; increment() { this.counter++; } reset() { this.counter = 0; } } <p>{{ counter }}</p> <button (click)="increment()">Increase Counter</button> <button (click)="reset()">Reset</button>
11. Same component as before with signals @Component() export class CounterComponent { counter = signal(0); increment() { this.counter.update((count) => count + 1); } reset() { this.counter.set(0); } } <p>{{ counter() }}</p> <button (click)="increment()">Increase Counter</button> <button (click)="reset()">Reset</button>
12. Signals API signal() Create a writable Signal set() Set a new value to the Signal update() Update the Signal's value based on its current one computed() Create a read only Signal deriving its value from other Signals
13. Stop ... demo time
14. Signals API - effect() React to signal value changes Used for side effects logging, persisting to browser storage, ... Can not write to Signals by default Reliant on the injection context
15. RxJS is here to stay RxJS is used to handle asynchronicity Plenty of useful operators error handling, retrying, scheduling, buffering, ... RxJS interop provided by angular toObservable / toSignal / takeUntilDestoyed Used for asynchronous side effects @ngrx/effects, ComponentStore effects
16. What the future holds Zone-less applications Signal based components input, output, model Signal based, synchronous APIs 👉 Less concepts to learn 👉 Better performance out of the box 👉 Less wrestling with the CD
17. Read more about upcoming changes 👉 https://github.com/angular/angular/discussions 👉 https://angular.io/guide/signals
18. Thank You! https://www.thinktecture.com/thinktects/yannick-baron