First look at Signals in Angular

all right it looks like I couldn't ignore  anymore the hype around signals in angular   it looks like everyone is talking about  that so in this video we'll have a look   at signals what is that how we can use it how  we can benefit from it and why it is such a   big thing in angular Community hi everyone if  you have a first time on my channel my name is   Dmytro Mezhenskyi and here you can find a lot  of advanced and in-depth and Galore tutorials   that you can check out later but now let's get  started and learn more about angular signals while it is very exciting to learn such a hot and  new topics like angular signals it is always a   good idea to become an expert in topics that we  use daily in our job for instance angular forms   and here I would like to recommend my video  course about Advanced angular forms and this   is one of the most in-depth courses about  this topic and this is what you will learn   from it there besides the basic things like  template driven forms or reactive forms we   will do a lot of source code investigations so  you will understand in depth how angular forms   are working and at the end of the course you  will be able to build really complex custom   form controls like custom drop down component  that supports multi-selection option searching   or accessible navigation through the options  and selecting them just by pressing enter on   your keyboard and additionally you will learn  how to create forms dynamically from from some   Json config which appropriate architecture  to choose for that and how to optimize it   by lazily load Dynamic controls this everything  you will learn from the course links will be in   the video description before I show signals  in action let's very quickly talk about the   motivation to have such a reactive Primitives  in angular core and here I'm going to highlight   just couple of them one of the reasons why the  research in this area was actually kicked off is   that bringing the fine-grained reactivity into  angular core could unleash the more efficient   and more targeted change detection mechanism  that doesn't rely on Zone GS Library anymore   I'm pretty sure you have a question like okay  but what's wrong with the Zone GS and change   detection right now and in general back then it  was a great solution I mean some GS and it could   kind of magically for developers detect changes  in angular application State and synchronize or   refresh the component we use accordingly without  any additional work from a developer side however   the more application grows the more often Zone  GS and change detection becomes a bottleneck   in the application performance and in order to  solve those performance issues developers had to   dive deeper and deeper into the process of um of  how change detection Works in angular developers   have to learn things like on push change detection  strategy or more advanced concepts like running   some asynchronous code outside of angular Zone  in order to reduce amount of change detection   Cycles another drawback is that zone GS cannot  tell angular which exactly component has changed   instead it just notifies angular that alright  some event happen in the application that might   change the state of one or more components in the  component 3 but which exactly component we don't   know and because of that angular has to perform  the change detection cycle for all components 3   running from top to bottom and in such a way  doing a necessary job I don't want to go into   the details how exactly this process is happening  because the change detection is a topic of another   video that will be published in two weeks since  today so if you don't want to miss this video   consider subscribe to this Channel and turn on  all that notification but now let's continue and   finally to complete the list of drawbacks of  some GS I wanted to mention that song.js it is a   third-party library that is being used by angular  it is included into the final bundle so if we get   read of Zone GS then we can obviously reduce their  bundle size of the application not too much but   it is always good to have smaller bundle size so  this fine Grant reactivity that comes with this   new concept of signals can significantly improve  change detection and make it more targeted and   perform change detection only for the components  where their data model has changed the next stop   is rxgs and Rex GS it is extremely powerful  library for reactive programming it is really   extremely powerful but when you know what you  are doing because when you don't know what you   are doing with rxgs your code can turn into  a mess very quickly and cause you performance   issue maintainability issues and days of headache  especially if you're mixing up the declarative   reactive approach with the imperative one then  Things become completely unmaintainable race   conditions appears here and there and it is really  challenging to maintain such a code base from   Another Side the concept of signals is way easier  to understand and it can take over some tasks that   could be done before with rxgs but signals can  do it more efficient and easier way especially   when it comes for synchronous reactivity where  signals are particularly good but it doesn't   mean that signals will replace completely erects  shears there are use cases when rex.js is still   beneficial and when it comes for asynchronous  reactivity there Eric's GS really shines and you   can plug in the Rex GS when you actually need it  when you need its power otherwise you can go with   just signals and don't use rxgs at all and in my  opinion it is even better for xgs because usage   of this Library becomes really more conscious  and Justified alright so let's quickly have a   look at how signals look in the real application  again it is a in the development preview mode but   you can already play around with signals if you  update your project to at least version 16 next.1   or higher so now we can start converting some of  the class properties in into signals to do that   you have to import a signal function and provide  some initial value for it so now you can see that   my property turn into a setable signal of type  string it also means that the way how we read   and write a new value to it has also changed and  that's why you can see the compilation errors here   to change the value of signals you have several  options the most straightforward one is to use a   set method and just provide a new value for it  it will change the value of the signal and all   consumers of this signal will be notified about  this new value but how to start to consume values   from signal to read the signal value you have to  call it as a function like that and as you can   see all the errors are gone oh yes it looks like  I forgot to update also a template and I have to   start reading the signal value here as well so  cool the the problem was solved and yeah obviously   the same thing we can do also for the array of  users and let's convert it to the signal as well   again because the way we read value from the  signal is different we have to adjust it in our   code as well so let's do that here we go and when  it comes to updating signals uh sometimes you may   encounter situation when the new signal value has  to be recalculated based on the previous signal   value so in order to perform such kind of update  there are two methods like mutate and update for   instance if you use the update method you  have to provide a callback that takes a   current signal value or it's better to say it was  previous signal value and based on that value you   can like in my case generate an Ura spread the  old one and add a new item to this array and in   such a way you keep your data immutable which  might be very useful when your application uh   required to work with immutable data because you  use and know something like ngrx or some other   libraries that require immutable data but you can  also just mutate the currently existing array and   for that you can use them mutate method and in  the Callback in this case you get the reference   to the user's array that can be modified by using  the push method and there you can push a new item   for this array from the performance point of view  for signals it doesn't matter actually either you   mutate the state or update so you can choose  both of them but let me quickly revert back to   the update method for now however if we save this  change and try to add a new user it will not work   what is interesting though is that it will work if  we use a mutate method because we would mutate the   existing array which the filtered users property  refers to but since we use update method we change   the reference to the new array and this change  will not be picked up by angular and we would need   to reassign the new array from the user signals  and only then we will see there you the new user   added but wouldn't it be cool if we could somehow  track all the signal changes and recalculate those   filtered users property each time when either  the search or user's signal is changing and there   is a dedicated function for it which is called  computed and you can import it from the angular   core this function takes a simple function where  you can execute basically any logic for example   I can take this filtering logic and paste it here  inside what is actually cool about this function   is that this callbacks logic will be recalculated  or re-executed each time when one of these signals   inside that computed function is changing so it  will derive always there actual State based on the   signals that are needed to be computed so since  the computed function returns a signal we have   to also adjust it here in the template and start  reading their value from from the signal like that   okay uh what's wrong is here ah yep I forgot to  remove this part which is not needed anymore so   awesome now whenever I change the user state or  if I try to change the value of the search Signal   the value of the filtered users will be always  kind of in sync all right I hope it's pretty much   clear and now let's move forward another use  case you might encounter working with signals   is to perform some side effects when the value of  any signal is changing for example imagine I want   to record the last value of search signal in the  local storage and use it as an initial value for   the signal if the user suddenly reloads the page  for that you can use a special function called   effect and also this function takes a callback  and inside this callback you can Define the logic   that you actually need and in my case I want  to add a new item into their local storage and   its value has to be the current value of the  search signal so something like that and now   whenever one of the signals inside this callback  function changes the effect function will be   re-executed and the value of the search Signal  will end up in the local storage so now let's try   to maybe change the value of the search Signal by  typing a new value into the input and you can see   that it is being saved inside the local storage  and if I want to have this value saved in the   local storage as an initial value for the signal  I will just read from the local storage like that   and now if I reload the page you can see that  the page from from the local storage was taken   and all the changes in my signals they are being  reactively like tracked recomputed and everything   works great you might also ask what about rxgs  you mentioned that it's kind of uh kind of work   together well the thing is that currently this  API is and ready but there will be some so to say   helper functions that will allow you to convert  signals into observables and vice versa so there   will be something like function and you know from  observable obviously the name can change when   this API become stable but the idea is that this  function takes a signal and returns there we're   actually just observable so you can apply then  pipe operators to it and write other rxgs code   or you can convert some observable into a signal  and use the signal to deliver values emitted by   that observable into a component template and in  this case you don't have to care about a sink pipe   and you can benefit from from the more performant  change detection algorithm based on signals all   right so this is how signals look in m blur and  now let's very quickly recap what consequences   might have their full adoption of signals in  angular framework firstly we'll get a more   performant change detection mechanism that doesn't  rely on NGO Zone library and it will become more   performant and more targeted so it will have  a positive impact on the angular application   performance rxgs will become optional which  makes angular friendlier for newcomers and it   will be easier to get started with it at the same  time currently existing code base written with   rxgs remains compatible with this new concept of  signals because you can easily convert them into   each other and how I see and in the future you  will be handling most of the cases where you need   reactivity using signals but when you really need  the power of xgs you can just bring it into your   project and start using that without any problem  besides that signals will simplify and improve   other Concepts in angular framework that I didn't  mention in this video for instance lifecycle hooks   some of them will become obsolete when signals  will be fully adopted for instance NG on changes   maybe some others or there is a chance that we  will hopefully forget or at least see less the   error like value has been changed after view  checked I'm pretty sure every one of you have   encountered this error before but yeah let's see  what the future will bring to us and let's see   how the full adoption of signals will impact the  angular framework but I think it's a big thing   in angular community and I'm very excited how this  everything will work out anyway I hope you enjoyed   this video and if you like okay please share it  with your colleagues and friends don't forget   to hit thumbs up and leave your thoughts in the  comment section because I would like to hear your   opinion what do you think about signal Concept  in angular do you see it as a step forward or   for whatever reason you see it as a step back so  let's discuss it otherwise I wish you productive   week ahead stay safe and see you in the next video  where we are going to talk about change angular

Channel: Decoded Frontend

Views: 33,536

Keywords: angular signals, angular 16, future of angular 2023, future of angular 2022, angular rxjs, angular advanced concepts, angular advanced features, angular advanced level, decoded frontend, angular tutorial, decoded frontend rxjs, angular, rxjs, ngrx, ux, Ui, learn angular

Id: HCg3vJpfYeg

Length: 18min 42sec (1122 seconds)

Published: Tue Mar 14 2023