WTF is "Zone.js" and is it making your app slow?
Vložit
- čas přidán 1. 06. 2024
- My modern Angular course: angularstart.com/
Zone.js is included in every Angular application and it is a critical part of change detection, but it also leads to your application doing way more rendering work than it actually needs to.
In this video, we explore what exactly Zone.js does, why we need it, how we can work around it, and why it might be becoming optional in the future.
Get weekly content and tips exclusive to my newsletter: mobirony.ck.page/4a331b9076
Learn Angular with Ionic: ionicstart.com
More on OnPush Change Detection: • Why use OnPush in Angu...
0:00 Introduction
0:27 Component Tree
2:06 What does Zone.js do?
2:59 Default Strategy
4:25 OnPush Strategy
8:16 Async Pipe
10:10 RxAngular
#ionic #angular
- More tutorials: eliteionic.com
- Follow me on Twitter: / joshuamorony
To clear up my poor usage of the word "rendering" in the video (thanks to Asaad Saad for pointing this out in the comments), it should be noted that when change detection is performed on the component tree it does not need to "re-render" every single component to the DOM - in the video I am specifically referring to the fact that it needs to re-evaluate the template of every component (e.g. evaluate any function calls in the template).
It's worth mentioning too then that you should *never* use function calls in a template. It's not that hard to avoid.
@@AndyFarrell008 I think this is a good general rule to follow - although I have seen good arguments/use cases for some function calls in templates especially where they are memoized. But I think using this correctly/safely requires a solid understanding of what is going on behind the scenes, so in general it's probably just better to use pipes.
I believe that perhaps instead of sniffing for CD by writing function in the template, you could have used the DoCheck lifecycle hook in this demonstration.
What do you think about RxAngular? Is it really a that much game changer in reactive angular as they say in their documentation? The basics looks very simple even for a person who dont know something about rxjs
Қяьлжғ
I would love a video comparing change detection in Angular and in React.
Your explanations are so easy to understand, even on this complicated subject !
+1
+1
+1
there is no change detection in react tho. we literally tell the app when to rerender.
I'm gonna say that after this video, I actually learned how change detection works and I had lots of miss interpretations before, even tho I knew how to get the better performance out using onPush or rxAngular, as usual, didnt know how it actually worked, thanks for the video!
Thanks for the video! Simple, yet thorough explanation. Looking forward to the RxAngular video. 🙂
Great explanation Joshua, your channel is a gold mine even for someone who has worked on angular for a few years.
Well explained, I once tried onPush change detection but had no idea what was going on, this video clears it up.
the way you have simply explained stuff that took me years to learn is nothing short of exceptional
This is a video and channel I was waiting for for years. Someone who explains change detection and reactive dev SIMPLY. Can't wait to watch all of your videos !
This video was very informative. Severe knowledge. Thank you
Great! Will wait for RxAngular video!
Such a great explanation. Thank you!
Thank you, I never thought the parents were also re rendering. This is the first time I am hearing about RxAgular need to take a look.
Very neat mate, very neat indeed!
Damn! This was explained extremely well!
Awesome explanation! Would love to see an example with Angular Signals and it's Impact on change detection. :D
Fantastic video!
Interesting, like always!
Great vid! So for onPush to work in the child component, all its ancestors must also implement onPush? And will onPush only work with @Input changes and events (so not simple data binding) ?
The opposite - onPush can work even if its ancestors use default, it will get to checking the onPush component and if CD shouldn't be triggered it will ignore the rest of that subtree. However, if you have a component using the default strategy that has ancestors that use OnPush then the component using the default strategy might never be checked because it will stop checking when it hits one of its ancestors. And yes - OnPush is only going to be triggered through an input reference change, an event Angular handles, or if its triggered manually.
Your videos are very interresting. I wish you displayed more the code.
9:50, Hi Joshua. Is there any way to avoid re-rendering another component without using rx-angular library?
Great explanation.
I’ve built quite a few angular based apps since the 1.0 release in late 2016 using the default change detection strategy. It’s been very rare that I’ve needed to worry about zone js performance. One of the few cases I recollect is a case where I had an html table that was being used like a spreadsheet to analyze amazon keyword performance for a seller’s products. Outside of scenarios like that, I’ve never seen a performance problem with zone js. This makes me question the value of putting a lot of effort in getting around zonejs and using on push as a default. I’m not sure why I should switch gears after so much success with the default change detection strategy. Sure, it’s more efficient but does it really provide any greater value to my clients? Clients usually value cost effectiveness and accuracy. If there isn’t a noticeable improvement to the user using on push, why bother?
If you're happy with using the default strategy then I agree, I think it generally isn't all that important. I do however have another video that explains what I like about OnPush - for me the performance improvement is just a nice side benefit, not the main reason I use it: czcams.com/video/tWy8zaWvkvk/video.html
@@JoshuaMorony there are many simple projects, where you really do not need to care of zone.js, or any onChangeDetection strategy... on the other hand, when you want to create super complicated views, like editor or something, I would recommend the use of NgRx state management.
In have never had an occasion where ChangeDetectStrategy.OnPush was disabled. I mandate it for all the engineers. 'large/complex' applications absolutely grind to a halt without. AngularJS ('v 1') with it digest loop was worse and great caution had to be taken for rendering and not paralyzing the app. Angular 2.x was a huge evolutionary step in optimization. And it still continues with Google trying to eliminate zone altogether.
@JoshuaMorony Joshua, eu estava brincando zonejs usando ngAfterViewChecked, e quando uso OnPush ele faz trigger os componentes irmãos do componente que originou a mudança. Vi no seu vídeo que vc usou um evento com . Sabe dizer a diferença?
How you detect the html syntax inside the typescript file? I see inside the component template seem like the html syntax is detected. Mine only showing like string. Can I know extension you using 😬. Thank you
indeed a very helpful video for me at least , thanks a lot
Vue's Proxy-based (native web api) change detection is so much less bloat and doesn't come with any of zone's gotcha's. I used to swear by Angular since v2-beta12 but seeing this after years in Vue I'm just left with "..why?".
I don't know anything about Vue's change detection so I can't really give any insightful comment here, but from Angular's side of things I would generally see the why of Zone.js as provided a developer experience where you don't need to worry about change detection or follow any specific methods for a change to be rendered - if something is changed then that change will (usually) just be rendered. This comes at a cost of course.
@@JoshuaMorony yup, absolutely. Zone.js makes sense in the context of Angular. It's just that there are nowadays more modern and elegant ways to solve the problem of change detection and reactivity (which vue utilizes to replace two fundamental and gnarly topics of Angular: zone.js and rxjs) that negate the need for those "patches" in the first place.
Thanks for another amazing video Joshua. I've been following. learning and getting inspired from you since my early ionic/angular times, at least 5-7 years ago. Keep up the great work, bud! 🍻
@@adiorthotos I think this is more or less the way Angular is heading as there has been a lot of talk of some new reactive primitive in Angular (that may or may not be RxJS related), which I assume will tie into this "optional Zone.js" goal on the roadmap (I am assuming optional in the sense that it is no longer needed, but kept for backward compatibility). And hey, I'll let comments on Zone.js slide but RxJS is the bomb lol
@@adiorthotos This isn't really about the context of Angular or not. It could still make sense, if you want to implement change detection this way - which was a fully transparent, automatic way. This is purely a design decision they took so they can offer an api where the developers don't have to worry anything, variables are just reactive by default (which of course is rarely the case in real-world scenarios :D) - rxjs has also nothing to do with change detection itself. I changed my religion to Vue as well when the compositon api came out, transitioned from angular to vue as my nr.1 choice of frontend fw, but the proxy-based way of vue is nothing new or special, knockoutjs (and probably others as well) had the same thing in 2010. It just works differently, another kind of approach.
If you are interested in this, there is a great talk with the core team here, change detection is also one of their main topic in this vid: czcams.com/video/IY-QOz4oLCE/video.html
Great video, as always! But, please, update your browser! :D
waw man years of trying to understand clearly this concepts , today is the revelation you are neo from the Matrix
Thank Josh
Really enjoy your content. Quick question, what does (click)="({})" do/mean?
This was just a way for me to trigger an event binding (in order to cause CD), it doesn't do anything special - I could have just done something like (click)="someMethodThatDoesNothing()"
@@JoshuaMorony Thanks. But I'm wondering what ({}) means in JavaScript terms. Is it executing an empty object and what does that mean?
@@ytamb01 its a void function which takes an empty object parameter. It does nothing.
@@lot.bajrami Thank you. I haven't seen that syntax before.
Great video change detection is one of the advance topic.
I've read somewhere that if you're going to detect changes manually then use markforcheck.
But I think that detectChanges is more performant.
Since we started migrating from angularjs to angular most of the problems we are facing is zonjs performance hits.
Could you please link to the pull request for the roadmap update?
Sure: github.com/angular/angular/pull/47910/files
@JoshuaMorony
Don't you want to make a video where you extend this video with Signals and change detection in Angular?
In every video we just hear that Signals are better but we do not see why and how.
thanks for clarification this part could you share the code with us thanks ?
rxlet and ngrxlet same ?
Zone helps you decide in which zone you are. Are you in the comfort zone or not?
Don't you think that patching webapi to improve performance is not a good idea. It seems like a very dirty hack to me. And I had a case where zone.js wouldn't let me integrate the library because it was breaking it with its patches, and I had to shove this by putting library code into an .
Before jumping on the wagon like RxAngular or other library solutions, kindly check the docs and see if manually injecting the ChangeDetectorRef and calling methods such as detach/detectChanges/markForCheck solves the issue (but use them sparingly as manually triggering these methods can block the UI thread). In some cases, they work fine, and you have one fewer 3rd party dependency.
Personally, I don't actually think what I'm talking about in the video is much of an issue as long as you're aware of it. I could be wrong, but I doubt there are many situations where you won't get great performance just by using OnPush change detection as a general rule and letting Zone.js just do its thing. I think the potential issues are more likely in apps using the default change detection strategy and not realising their templates are being constantly re-evaluated.
I think RxAngular is cool, but it doesn't strike me as a necessity (more like a nice to have/why not)
great
Those from Angular are revising reactivity and in the new versions, this problem will be solved
If I would use anything else than angular right now and come across this video I must be brain dead to switch to that framework 😂
how does a parent component know that a child component triggered an event?
Angular and Zone.js?!! that still a thing?!!!
Don’t forget to update chrome!
I love ❤️ Angular.
I want to learn angular can you suggest good resource
If you have to rely on a 3rd party implementation to circumvent Angular core change detection implementation there's something really bad about the framework, specially if we are talking the heart of a SPA, almost the reason they exist.
Not accurate, your console.log message is misleading, when pressing the button on AppComponent or any other button, all components are CHECKED for changes and not rerendered. Also since Angular uses monomorphic classes, change detection logic is optimized in the JS engine compiler after running for several times and marked as hot and actually runs faster.
Commenting here since I'm pretty curious about this, lets see if Joshua confirms this behavior, as ive never heard off.
Definitely open to my understanding being flawed here, but not sure in what way it is misleading. In the example, if a tick() is triggered then every component in the tree will have its template evaluated/any functions called in the template are going to be executed whether anything has changed or not right?
@@JoshuaMorony rerender means destroying and recreating? so onDestroy is called? or its just reevaluating the template and calling functions?
@@AnimusAgent No the entire app would not have to be re-rendered - is the main issue that I referred to this as "rendering work"? Poor choice of phrasing on my part perhaps
Does this make the video moot then?
subtittle please
This crap has been plaguing angular since alpha release. Causing unnecessary slowness. Took us entire week to properly optimise this
0:12 answer: you don‘t need angular 🤷🏻♂️
This diss is just lazy bro, if you're going to do it at least do it properly. "Why do we need zone.js" "You don't need angular" it doesn't make sense as a reply.
I'm more disappointed in the attempt than the actual diss now.
React js is a shame and blasphemy to JavaScript community. Governments should ban the use of this stupid library. Same functionalities can be achieved with Angular and Svelte with less frustration, so what's the point of using the stupid react js which makes web development unnecessarily complicated.? Those who use react are slaves.
@@Almighty_Flat_Earth don't stoop to his level.
Why do you think people shouldn't use Angular?
Way misleading title
Angular sucks
Why?