Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Signals - Gamechanger für reaktive Entwicklung

Yannick Baron
September 26, 2023

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.

Yannick Baron

September 26, 2023

More Decks by Yannick Baron

Other Decks in Technology


  1. 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
  2. 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
  3. 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
  4. 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
  5. 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, ...
  6. Reactive Angular with RxJS Use OnPush strategy Reactive state management

    Subscribe via Async pipe Async pipe notifies the change detector 👉 Only check relevant components
  7. Downsides of RxJS (for template rendering) Observables asynchronous by default

    AsyncPipe default null value Subscription management Recheck all template bindings No reactive inputs
  8. Enter Signals Reactive primitive Hold value, notify when value changes

    Integrated with Angular 👉 Results in knowing exactly which nodes need updating
  9. 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>
  10. 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>
  11. 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
  12. 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
  13. 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
  14. 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