Angular Performance Optimization using Pure Pipes (2020, Advanced)

Hi there! My name is Dmytro Mezhenskyi and from  this video you will know how pipes can improve   the performance of your Angular application and  before we start don't forget to check out my new   Angular Material Theming Workshop! There you  will find everything about proper theming,   the link will be in the video description and  now subscribe to my channel and we are getting   started. Alright let's get started and let me  show you the application i prepared for you   so this is the very simple application  which has just two additional services   users and theory and let's start with the  users so this is just regular service which has   read-only property users they can see the users  which has id and name and also we have the theory   service which is the list of theories like quantum  territory of reliability uh theory of relativity   and yeah and it has get theory method you  can see right here and it gets user id   and finds inside the array the object  which has the same user id and returns   this object and this is how we are using this  inside the app component here we inject those   both services user service and theory service then  we have get theory which is takes this user id   and then we call this get theory  method for our theory service   and return certain theory and this is how it looks  inside the template we go in the loop ng4 and   here we print the username and then we use get  theory method inside our template in order to   fetch the title of the theory yeah and this is how  it looks uh right here let me zoom in so this is   what our 4-h renders and it looks like everything  works and everything looks fine until we try to   cancel lock something here like user id whatever  and now let's go back and wow we see how many   calls here four one two three four yeah four  calls for every user so this is quite a lot   because yeah like and it is useless call you  see nothing has been changed but it was called   and the thing is that when you use method  some method some function inside the template   everything here inside will be triggered  every time the change detection run   and change detection runs quite often i should say  as example we can we don't need this property but   we can have as example host binding yeah and  we can do something on the click let's say we   want to console log some message  every time we clicked something right   and if we now try to click around why  it doesn't work ah sorry i have to use   host listener yeah here we go and let's remove  it from here good and now if i click and you see   every time i click on my component it triggers one  more time uh the call of our gab theory function   which is really insane and now can you imagine  if we would do the http call inside this function   it would be terrible for our performance  and we have to find the way how we can like   implement this without such a heavy impact on our  performance and this is where pipes can help us   let me implement solution for now and  then i will explain what's going on   so we're going to create a new pipe so i will  use the vs code extension called nx console   so it kind of helper for uh angular cli so  it allows us to generate pipes very easily   so i generate pipe with the name  theory and i say that okay skip tests   and i will declare it inside inside app model  and i click run button and it should generate   proper pipe for me so here we go  you can see the pipe right there   and let's fix type so here i know  that value mi will be the number   uh arcs so far i leave it as it is and uh  sorry i don't want to write interfaces for   my theories object so i will place it as an  any and here we will also console log the value and here the value will be what we  provide inside uh template so i can   do the next so i can remove this  everything and i can apply my pipe   right here so this gear should be the same like  this one okay so i applied my pipe right here   and here we have to perform some logic so we  have to fetch proper theory for our user and   we can do it by injecting some service and  reuse it and namely i'm going to inject my   theory service here we go and right here i can  basically return theory get theory and provide the   value or better let let's rename value to  user id so it's going to be more clear what   kind of data we get here and now we can close  this and adjust this part so i can wrap it   into the braces and let's say this is can be  optional and i can fetch the title right here okay   so what happens now we apply the theory pipe for  our user right here so so inside the pipe this   user id will be as a first parameter and here  we do choose the console.log to see which id we   passed and then we return the theory for this user  and now let's have a look how it looks like so   nothing has been changed however you can see that  we called this transform method basically what did   before our method uh how we called it this one get  theory but you remember it was called i don't know   how many times a lot of times however the pipe  called only twice and this is because by default   pipes are pure so it has such a property pure  true it's by default and this pure means that   this transform method will be executed only if  this parameter this first value has been changed   in our case it was not changed so it will not  be triggered every time change detection runs   but if we replace it with the false it  will behave the same way like if it was   just a function inside a template so with this you  can decrease drastically your performance so let's   revert it back but since we are talking about  pipes let me show you how you can path additional   parameters to to your custom pipes as example  if we want to tell pipe to fetch some specific   property we can do it like this but we can also  pass it as a argument for the pipe so i can   remove it right here and this is arguments for  the pipe which come right here and we can say that   there will be a property which we're going  to fetch right and it will be either title   string or it might be also the string user id if  i remember right where is this here we go title   and user id string yeah i was right so this is  property we can path to it and then we could   change it a little bit like like this and then we  can say that if theory exists we will return what   we're going to return theory and we say that some  property yeah like this so if we save everything   here we should not see any difference then we can  say like i want to this time user id and after   reload we see the ids of the user so cool and  what else let's revert it back to the title oh   uh sometimes as i mentioned that you may perform  some http calls right there and it means that you   will return observables right so we can emulate  this like here so i will return the observable   from this pipe and we know that pipes uh you can  you you can apply multiple pipes yeah so i can   also apply a sink pipe next to theory and  you can see it still works yeah but if i   remove this as uh i think you see that  will be object object yeah because here   we will get the observable so i will revert  it back and this is how you can reduce uh   amount of unnecessary calls in your templates  alright guys that was it i hope you enjoying   my videos and if you like it and you like what  i'm doing and you want to express your gratitude   the best thing you can do is to share these or  any and other my video with your colleagues this   is really the best thing you can do and of course  i'm waiting for feedback in the comment section   and now stay safe have a productive  week and see you in the future

Channel: Decoded Frontend

Views: 7,907

Keywords: angular performance optimization, angular performance, angular custom pipes, angular performance tuning, angular performance issues, angular performance optimization techniques, angular performance best practices, angular performance tips, angular tutorial, angular 11 tutorial

Id: YsOf90RZfss

Length: 13min 0sec (780 seconds)

Published: Mon May 10 2021

Reddit Comments

[u/barkmagician]

pretty sure they are pure default