The main idea behind the push pipe is a new way of handling change detection locally instead of the global handling used in async pipe by Angular natively. It is implemented in a way we can get zone-less performance in zone-full applications.

Angular’s change detection is tied to a library called zone.js.

The main idea behind the usage of zone.js is to detect asynchronous changes in your application and call the rendered function to update the related HTML in Angular.

For this convenience we pay a big price.

Overperforming render calls, manual patching, and hacks for third party libs are just the tip of the iceberg. In heavily dynamic user interfaces the performance drawbacks introduced through zone.js could become a show stopper.

The push pipe is the first of a whole set of tools under @rx-angular/template to enable fully reactive applications as well as zone-less performance in zone-full applications.

One of the tools is the _push _pipe, the main focus on this series.

We will go into full detail later but nevertheless I want to give some rough overview of its benefits.

By default the _push _pipe renders Angular’s component tree in a very different way than Angular would do it natively.

Angular when detecting a change marks the component tree dirty up to the root component, and then rerenders the full path until the component that caused the change, and all its child components related to the change.

The push pipe renders locally. It triggers change detection and rendering only in the very component where the change got introduced, and the child components effected by the change.

The important part here, this is implemented in a scalable and efficient way, where we dont trigger rendering unnecessary.

Lets see the tricks and details of this great performance tool by understanding the native implementations of Angular first.

#angular #rxjs #change-detection