From Good to Great: Optimizing Angular Performance

if you work with angular I'm 100% sure that you're not thinking about performance and the ranging of your components enough this is why in this video I want to share with you some angular performance tips that you can apply to make your application faster and here I prepared for us a small project as you can see we have a list of three users foar bus and the button change let's have a look on the code inside up component we have an array of three users with IDs and names and we have a change array function which just reassigns all users inside this function additionally here I created identify we will use it later for Track by and test rander parent which doesn't do anything it simply console logs test the parent and returns true let's have a look in our HTML we have here just a normal NG for Loop like everybody is writing and here is my button with change r which obviously will update an array additionally here I added an app monitor directive let's have a look what it does here on the top of my app component I created a directive app Monitor and this is just a directive withon needit andon destroy and what it does it simply console logs messages but it will help us to understand when these Dom nodes are destroyed or created I'm reloading the page and we're getting three in needs what does it mean we're red this 3om nodes and our app monitor directive says for us okay these 3om nodes are created now we're clicking change as you can see what happened we destroyed ROM nodes and we recreated them with a need which essentially means the whole array was removed from the browser recreate again and the whole list was rendered you might say okay but it is obvious because here we reassign the whole array we can do it differently we can write this dot users so the existing array we just take the last element and we're changing its name let's have a look now I'm clicking change and nothing happens these elements are not destroyed and nothing is recreated because essentially we simply changed the name inside the object and yes we can directly see the change in the browser why it works because this single line doesn't really change our data it mutates existing value in existing object but in the real applications we are not working really often with changing our objects like this we typically are working with IM mutable data or with RJ or within grix where it is completely normal to reassign the whole array but as you can see here it leads to the consequences that all our Dom nodes are rendered this is not what we want at this moment you might say okay we must try it on push to this component so not all nodes are rendered let's try this out here we can write that our change detection strategy must be on push let's reload the page and see if it leads to any differences as you can see nothing really changed and on push doesn't help in this case why is that because essentially this is just a local property we updated it and it leads to detect changes it is nothing that on push can fix and if you already know something about angular performance you would say okay we need to use Tri by here it will really help so let's try this out if you don't know what is trick by it allows us to tell angular how these items in the array are unique and based on that angular won't render nodes which are already there by that specific unique identifier so we can write here drag by equals and I have a function identify let's check what is inside identify as you can see here I am returning item. ID so not an index but an ID of the user which is unique in our case and as you can see here we assigned the whole array but IDs are staying the same which essentially means Dom nodes won't be removed let's check this out I'm reloading the page I'm clicking change and as you can see bus was changed just like when we mutated the object but we didn't get any removing of the D node but now let's try to pass an ad4 and another name I reload the page here our our threedom nodes I'm clicking change we have just a single destroy and a single need why that because only this record was destroyed and one new record this one was rendered in browser which essentially means trick by really helps if you want to avoid rendering the whole array but there are lots of pitfalls here first of all let's check does our code really work with r chest so here I can write new Behavior subject where inside we're providing array and now here on our users I want to write dot next and provide inside our changed array additionally inside our HTML here we need to use an sync pipe to read our stream let's reload the page and check again we have here three notes I'm clicking change as you can see it works exactly like a local property and track by rules are applied quite normally to our R chess one node is destroyed one node is ined now let's do something which we typically do in our application we're creating child components let's say that we want to render each user in additional child component here I have a child component let's create here an input user I will write here any because we're not talking about data types Here and Now inside H2 let's simply render a variable user. name now here instead of this div I want to render a nap child component and provide inside a user which will be our user this is what we typically do in everyday development now as you can see here we are rendering our children because here is H2 and I clicking change we're getting just a single destroy and the single in need and you might think okay it works just like before and everything is fine but actually this monitor directive doesn't have anything to do with our child it is only checking the Dom note and yes really this D note was not removed but what happens with the ch in order to test that we can create something like test Trend the function as you can see it doesn't do anything it simply has inside a consol and it returns true and now in the markup I want to call this test render function and this is an amazing way to know how many times your component was rendered let's check again I reloading the page as you can see we're getting in need three times this is the creation of Dom nodes and we're getting test render three times because we rendered our component three times now I'm cleaning everything and I'm clicking change and as you can see there is a difference here yes we destroyed just a single node and den needed just a single node but actually we rendered three children you can see test Trend three times realistically with our code we would expect that we update only one child why is that because here we see just a single destroyer in it so test render should also be single but as you can see we update all our children why it happens and how we can prevent it you might say okay we need to put on push I already have one push inside this child what else actually the problem here is that we're providing inside a user and user is an object and for this you must know how angular Compares inputs it simply Compares it like a plain JavaScript just to remind you if we're comparing numbers it is totally fine if you're comparing arrays or objects it will be never equal which actually means when you're passing an object as a parameter to your child component it will always be rendered because your input will be never equal how can we fix that realistically our child component just renders a name so we can provide here a name as an input it's a string and not the whole user now I want to jump inside component and update here user to the name and pass inside user.name so here is the huge difference we're passing inside input not an object but a string let's have a look I'm reloading the page we're getting three test trenders this is fine I'm clicking change and we are getting just a single test trender why it happens because in this case only our single child component was rendered which actually means you must understand if you are just using trick byy and you're throwing it across the whole application it doesn't really help you you really need to think about every single case how you are rendering stuff and when you want your children components to render additionally to that it is really comfortable to throw the whole object to your child component because you need to get access to the whole users with 20 Fields maybe but you must understand that angular can't compare inputs then and your component will be rendered too often and obviously less rendering means better performance and additionally if you want to know how to use on push and how it helps to optimize your applications make sure to check this video where I covered all that

Channel: Monsterlessons Academy

Views: 4,133

Keywords:

Id: tMxrY7IL-Ac

Length: 9min 38sec (578 seconds)

Published: Tue Jun 25 2024