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 AppComponent UsersComponent UserListComponent UserFilterComponent RadioButtonComponent
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 AppComponent UsersComponent UserListComponent UserFilterComponent RadioButtonComponent
8. Downsides of RxJS (for template rendering) Observables asynchronous by nature 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. Code with me? https://github.com/thinktecture/ngrx-demo Branch: signals/code-with-me
14. Signals API - effect() React to signal value changes Used for side effects logging, persisting to browser storage, ... Executed once initially Can not write to Signals by default Reliant on the injection context
15. Signal based Components input() Create a writable Signal bound to a component input model() Creates a writable Signal that reflects changes (two way binding) viewChild() / viewChildren() Access references to components, directives and elements in your view
16. RxJS has its place RxJS is used to handle asynchronicity Plenty of useful operators error handling, retrying, scheduling, buffering, ... RxJS interop provided by angular toObservable / toSignal / takeUntilDestroyed Used for asynchronous side effects @ngrx/effects, ComponentStore effects, rxMethod
17. What the future holds Zone-less applications Signal based components Signal based, synchronous APIs Function based life cycle hooks 👉 Less concepts to learn 👉 Better performance out of the box 👉 Less wrestling with the CD
18. Read more about upcoming changes in Angular 👉 https://github.com/angular/angular/discussions 👉 https://angular.io/guide/signals
19. Thank You! https://www.thinktecture.com/thinktects/yannick-baron