WTF is "Zone.js" and is it making your app slow? 

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

Қяьлжғ

+1

+1

+1

there is no change detection in react tho. we literally tell the app when to rerender.

React >>>> Angular in terms of performance. Believe me when you use Angular they doesn't mention anything in their documentation on their internal workings and which things to use and why and when. They are just happy to provide built-in Router, Forms, etc. to show the world that we are a Framework and not library like React😅 Worst framework ever.

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.

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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-IY-QOz4oLCE.html

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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-tWy8zaWvkvk.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.

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.

Sure: github.com/angular/angular/pull/47910/files

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)

I want to learn angular can you suggest good resource

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?

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?

Why?