Why use OnPush in Angular? Not for performance...

In this video, we discuss the less obvious benefit of OnPush change detection and that is that it helps you architect your applications better. We also look at a specific example of where using OnPush led me to creating significantly better code.

0:00 Introduction
0:26 What is change detection?
3:00 The hidden benefit
4:37 Before the refactor
7:29 After the refactor
11:16 Conclusion

#ionic #angular #rxjs

[walboey]

I'm back into working w/ angular and searched a topic and now your all videos are being recommended to me. I am not disappointed; your videos are excellent!

[phugia]

first off I think it's great to have deep knowledge about Angular stuffs (change detection, rxjs) & messing with them. But after refactoring, you ended up with 2 nested pipes and a HOO (Higher Order Observable) inside another HOO, which definitely harder to debug & understand. Async pipe might be great but if it make your code harder to read & trace, just go with the normal way, subscribe & assign value to a variable, bind that value to template & let Angular take its course.

[davesuico]

Thank you for your efforts! I've finally found a better angular channel to learn from!

[Jul]

Thank you so much! All of your videos are amazing! You are the best source for advanced Angular topics by far.

[ravindradevrani]

What a clean explanation. Great content as always.

[Blafasel]

Nice video! I switched over to using onPush for every component for the reasons you mentioned. Another reason I see which is not explicitely mentioned: Once you understand when the changeDetection is triggered when set onPush, it becomes very clear and concise (and easy to test) changes in the component because there is only a very limited number of events if your component is as small as it should be. There is also no way for someone else to mess changeDetection up - I've seen horrible inplace mutation of arrays and objects inside that array which only worked because of the default Angular ChangeDetection setting. I honestly believe there should only be OnPush or it should be the default at least. Even for small apps. Performance gain is nice 2 have and makes sense, but as you said, it just makes you write much clearer code which is way easier to understand if you just take the time to watch your explanation ;)

[JoboyJordan]

Hi Joshua, thanks for this great video 👍 It gave me clear understanding on the benefits of creating components reactively (also functional via pipe()). I'm the one who asked ealier regarding the benefits of why use RxJS over standard way. I think this video answered that. THANKS!

[julienwickramatunga]

Really nice example, thank you very much!

[xxRAPRxx]

Thanks for the video! At 6:50, onPush change detection strategy won't enable change detection because `currentPhoto` isn't marked with @Input() ?

[jordisarrato]

I use change detection in my website and this is very interesting!

[omergronich]

Correction- the async pipe does not trigger change detection, it calls markForCheck that tells angular to check the component in the next change detection cycle

[tristanmorris]

Some comments are taking this video as evidence that rxjs is bad (at least for this situation). But there's always multiple ways to do something, and maybe people might find something like this more intuitive:

this.currentPhoto$ = zip(interval(500), from(value.reverse())).pipe(
map(([intervalIndex, photo]) => photo)
}

Learning zip, interval, and from can be tricky, but the hardest one here is zip... and playing with the rxjs marbles diagram for it gives an intuitive understanding super quickly.

[RoiTrigerman]

Thanks for the great videos :) Regarding the photos example, I see many people saying that you shouldn't pass an observable to an input. Do you disagree?

[JohanCoppieters]

I must say the onPush: I’m totally pro. Makes you think about your code.

As a lecturer, developer and dev mgr, I often see functional code which is very readable at writing time and while explaining. However for other developers reading your code and even for yourself 2 years later, it’s hard see what it does exactly.

The number of lines doesn’t matter, readability to other people is much more important.

[bronzekoala]

Nice, however I shiver at the thought of unittesting stuff like this.

[Almighty_Flat_Earth]

Would have been better if you had provided stackblitz example.

[LeungWong]

What’s the approach to detect change in dynamic created components? You would need to use ChangeDetectorRef right?

[TheSaceone]

thank you for the video! it's gonna be useful for a particular feature I'm working on in an app of mine! Btw why did you reverse your photo array?

[stanisawgolinski]

Isn't pushing Observables through Input an antipattern?

[bobar]

Thanks for the video! Is there a way to set OnPush globally, instead for each component, or would you advise against doing it for every component?