Performance considerations regarding the LetDirective and the PushPipe

[danielkleebinder]

Hello everyone,

I am currently (hyper) optimizing a hybrid Cordova/Ionic app that heavily relies on NgRx. It was using AngularJS before we started the migration process to more modern technologies. Compared to our previous approach it now is considerably faster (with a big shout out to NgRx). Nonetheless, some of our bigger customers are still relying on older mobile devices. Don't get me wrong, the app is running quite well on these platforms too, but further improving performance is never a bad thing. Regardless of other performance optimization techniques such as Angular's OnPush change detection strategy, Zoneless Angular or the usage of shimmer skeleton text while loading, I want to focus on NgRx LetDirective and PushPipe here.

Problem Statement

ViewModels are a quite common pattern in NgRx, RxJS and Angular. With NgRx even supporting this pattern natively now. So I was asking myself: [Q1] "Is this the most optimal way of rendering templates considering performance?.

Consider the following (highly simplified) example. One could create a ViewModel that contains all the data required and query it using the NgRx LetDirective as follows:

<div *ngrxLet="vm$ as vm">
  <h1>{{ vm.username }}</h1>
  <h2>{{ vm.status }}</h2>
</div>

Alternatively, we could set the properties using the PushPipe without using a ViewModel in the first place:

<div>
  <h1>{{ username$ | ngrxPush }}</h1>
  <h2>{{ status$ | ngrxPush }}</h2>
</div>

... a third approach would be to use the LetDirective on a per property basis:

<div>
  <h1 *ngrxLet="username$ as username">{{ username }}</h1>
  <h2 *ngrxLet="status$ as status">{{ status }}</h2>
</div>

Angular and NgRx Insights

If we take a closer look at both the PushPipe and the LetDirective, one might come to the conclusion that the LetDirective is typically a bit faster. This has two reasons:

1. The PushPipe is not pure
2. The JavaScript-Code produced by Angular is less complex

Our three examples above produce the following JavaScript outputs. First, the ViewModel approach:

function AppComponent_main_0_Template(rf, ctx) {
    if (rf & 1) {
        i04.\u0275\u0275elementStart(0, "div");
        i04.\u0275\u0275element(1, "h1", 1)(2, "h2", 2);
        i04.\u0275\u0275elementEnd();
    }
    if (rf & 2) {
        const vm_r1 = ctx.ngrxLet;
        i04.\u0275\u0275advance(1);
        i04.\u0275\u0275property("tick", vm_r1.username);
        i04.\u0275\u0275advance(1);
        i04.\u0275\u0275property("tick", vm_r1.status);
    }
}

Second, the PushPipe per property approach:

function AppComponent_Template(rf, ctx) {
    if (rf & 1) {
        i04.\u0275\u0275elementStart(0, "div");
        i04.\u0275\u0275element(1, "h1", 0);
        i04.\u0275\u0275pipe(2, "ngrxPush");
        i04.\u0275\u0275element(3, "h2", 1);
        i04.\u0275\u0275pipe(4, "ngrxPush");
        i04.\u0275\u0275elementEnd();
        }
    if (rf & 2) {
	i04.\u0275\u0275advance(1);
	i04.\u0275\u0275property("username", i04.\u0275\u0275pipeBind1(2, 2, ctx.username$));
	i04.\u0275\u0275advance(2);
	i04.\u0275\u0275property("status", i04.\u0275\u0275pipeBind1(4, 4, ctx.status$));
    }
}

... and third, the LetDirective per property approach:

function AppComponent_Template(rf, ctx) {
    if (rf & 1) {
        i04.\u0275\u0275elementStart(0, "div");
        i04.\u0275\u0275element(1, "h1", 1)(2, "h2", 2);
	i04.\u0275\u0275elementEnd();
    }
    if (rf & 2) {
        i04.\u0275\u0275advance(1);
	i04.\u0275\u0275property("ngrxLet", ctx.username$);
	i04.\u0275\u0275advance(1);
	i04.\u0275\u0275property("ngrxLet", ctx.status$);
    }
}

Regarding the source code, I would consider the PushPipe per property approach to be the "slowest" of these three, followed by the LetDirective per property approach and the fastest being the ViewModel approach. Regarding property binding, we can see that Angular handles the binding of the PushPipe natively in the template, while the LetDirective does that on its own. All of that, however, does not consider Angulars change detection cycle and I am unsure how to debug and determine which of these three truely is superior regarding their performance. More questions arise:

• [Q2] Does the ViewModel approach with the LetDirective force a rerender of every child element inside the element the LetDirective is placed on?
• [Q3] The ViewModel approach clearly requires less subscriptions than the other two. Are subscriptions that "heavy" reagarding CPU time to consider optimizing your applications to use less subscriptions (maybe sacrificing other software quality attributes such as readability, etc.)?
• [Q4] Is my understanding correct, that the LetDirective and the PushPipe both only "mark" the component as "dirty", which causes Angular to reevaluate the component in the next application tick (i.e., change detection cycle). Angular then checks the expressions inside the template and tests if a particular expression changed. If so, it updates the DOM precisely there, where the change happened.
• [Q5] Does the ViewModel approach require Angular to check more of the template for changes? Even though, only username changes in our vm (regarding our example above), does Angular have to check status aswell? I assume so, but isn't that the case for each approach anyways? As soon as a component is marked as dirty, all expressions are reevaluated, correct?

I am fully aware that the example above might be too simple to answer such in-depth questions and that optimization for such simple components is out of the equation anyways, but for real world applications, this kind of knowledge might be useful considering applications that hold thousands of subscriptions at once.

Performance Best-Practices as Part of the Documentation

These kind of questions are rather difficult to answer with missing knowledge of framework and library implementation details. Information on the internet is also quite scarce. Thus, I would like to suggest the addition of a "Performance Best-Practices" page as part of NgRx's documentation.

[danielkleebinder]

After reading through some of the Angular Discussions, debugging Angular's change detection in a sample project and reading the LetDirective source code as well as the PushPipe source code, I think I can answer some of the questions myself.

• [Q2] No, the ViewModel approach does not force a rerender of every child element. Using the LetDirective, the element the directive is used on is "marked as dirty", followed by each ancestor element. In our example above, div is marked as dirty as well as app-root. [Note 1] The entire component tree branch up to it's root originating from the element the LetDirective was placed on is "marked as dirty". As soon as the application ticks and the change detection runs, only the expressions are updated that changed.
• [Q4] Yes, both the LetDirective and the PushPipe rely on the RenderScheduler, which calls ChangeDetectorRef#markForCheck on the element the pipe or directive was placed on.

In my tests, ChangeDetectorRef#markForCheck was invoked more often than required. Adding a debounce fixed the issue for the ViewModel approach with the LetDirective. This, however, is not possible if the data is split as is the case with the PushPipe per property approach or the LetDirective per property approach. So, in this simple example, ChangeDetectorRef#markForCheck is invoked less frequently with the ViewModel approach iff username and status change together.

• [Q3] Part of the answer to Q3 could be, that each subscription involves its own set of calls to ChangeDetectorRef#markForCheck and therefore to markViewDirty(LView), which loops through the ancestors of an element.