Reactive Angular

Going zone-less

Zone.js

"Zones are a sort of execution context that allows us to hook into our asynchronous tasks"

Pascal Precht

Brian Ford - Zones

NG-Conf 2014

Understanding Zones

Zones in Angular

Using Zones in Angular for better performance

Articles by Pascal Precht:

Change Detection in Angular

Problems with Zone.js and Angular's CD

  • CD is triggered bottom to top and top to bottom by default
  • Can introduce performance issues with large applications
  • AsyncPipe relies on Zone.js

Source: https://indepth.dev/the-last-guide-for-angular-change-detection-youll-ever-need/

Problems with Zone.js and Angular's CD

  • One "change" (e.g. button click) triggers one change detection cycle
  • Multiple fast changes can result in low performance from many CD cycles running one after the other
  • The solution is coalescing of events

Source: https://github.com/BioPhoton/rx-angular/blob/master/libs/template/docs/concepts.md

Solution #1 (?)

Solution #1 (?)

ChangeDetection.OnPush

Source: https://indepth.dev/the-last-guide-for-angular-change-detection-youll-ever-need/

CD is triggered when:

  • the input reference has changed
  • the component or one of its children triggers an event handler
  • change detection is triggered manually
  • an observable linked to the template via the async pipe emits a new value
    ---
  • 3rd-party components could have Default strategy - problem

Solution #2 (?)

Disable NgZone entirely or detach components

// polyfills.ts
import 'zone.js/dist/zone';

// main.ts
platformBrowserDynamic().bootstrapModule(
  AppModule, 
  { ngZone: 'noop' }
).catch(err => console.log(err));
  • trigger e.g. ChangeDetectionRef #detectChanges manually
constructor(private ref: ChangeDetectorRef) {
  ref.detach();
  setInterval(() => {
    this.ref.detectChanges(); 
  }, 10 * 1000);
}
  • manage detaching-attaching components
  • still trigger #detectChanges manually

Solution #3

DEMO

Thank you!

✋😎

@kajetansw

kajetan.dev

Made with Slides.com