Signals - The Future of Angular

hello everyone I'm super excited for this webinar um even though it's still fairly early in the morning for me for you Kevin it's a little bit later but so very happy to have you here Kevin do you want to introduce yourself quickly yeah sure um so so thanks for the invite I'm very happy to be here my name is Kevin on the internet I usually use now NC as a name um I am a Google developer expert in angler and web Technologies and work as a freelance software engineer I am basically probably you hear it on the accent I'm from Switzerland um yeah and besides that I write a lot of blog posts together with my good friend Thomas Tran we are working on angr experts. iio so feel free to check that out there we are releasing um always new content blog posts videos and so on we also have a bunch of ebooks there that we published um and besides that I stream a lot quite a lot on Twitch I also do a lot of YouTube videos um and stream also on YouTube and yeah in my free time I really like to watch animes as you probably can see there on the background now we talk and favorite anime is one piece of course reasonable and reasonable right reasonable and besides that I'm also a big soccer fan football fan for American soccer and yeah looking forward to tonight's Champions League game of Real Madrid that's my club yeah that's nice where's basically me where's this NC thing coming from because I still remember you were online as quo Co I was looking for quo code and I was like where the uh where where is this guy so where's from so it's not as creative as you might think like I wanted to have an online name so I was thinking about what would be a possible name and N basically is Kevin backwards right oh Jesus I did not it just sounds cool so it does sound cool I I expected like a super fancy story a little bit of Shame from my fans from like primary school or something nope not a fancy story at all I I could have made that connection but I didn't it's cool it's cool that you didn't because I thought it's so cheap to use my name just backwards but if people don't see it that's cool maybe no no fix it um we'll see throughout this very now okay uh let's talk signals but before we get to that um as every webinar that we're doing here from jet brains if you have any questions feel free to put that in the chat um if it makes sense I will interrupt Kevin throughout his presentation otherwise we have dedicated slots throughout this webinar to ask questions so if you have anything just drop it in the chat we might not get immediately to it but we get to it eventually and and because this question comes up always and even though I put this slide here the question probably still comes up this will be recorded this will be available on YouTube this is basically how the internet works the internet does not forget including this webinar so if you have to have a break dinner is ready something like that and you want to come to this later feel free to just go to the jet prin tv YouTube channel and check it out again so having this organizational stuff out of the way kept do you want to take it from here with your presentation yeah I think that sounds good and we discussed this earlier but I'm now a certified streamyard expert so I can put the slides up myself watch this magic Wow cool right yeah so since this is a webinar I thought like I will do most of live coding um in in my ID and so I was thinking how do I structure this content because there may be like some some people who are new to signals and maybe we have some Advanced users so I try to basically start with the with the basics and then also go a bit deeper into the topic so with angular 17 we not only got an amazing new logo by the way Yan how do you like the logo it's pretty fancy I like the gradient a lot even though I'm not able to reproduce it but it's pretty cool I have the same issue but but it's pretty cool so we not only got that we also got amazing other features like control flow uh defer loading um improved SSR story but one of the important things that we also got is stable signals so we already got signals in angler 16 as death preview but now we also got them stable in 17 and I want to show you what this is so before we start I want to I have to make a confession because I don't know if this is embarrassing for me or not but you can see we start with an empty component it's a console demo component we use one component in there and web console and NG web console is basically a visualization of our console loog statements so we can see whenever I do console log we get hey there and the reason for that is because I am on a Swiss Keyboard with a um German Swiss Key layout and I don't know how to bump the console font size so I thought let's go with a cheaper easier way and provide a NG web console component which is by the way available on NM this is great yeah okay but we are not here to speak about NG web console so let's go ahead and create a value and we can say that value well how about creating a signal so we created a signal but it's red and the reason for that is that the signal always needs an initial value so let's go ahead and give that some value so we say value cool so we successfully generated a signal but what is that now so we can the official answer is probably angular's new reactive primitive but I like to think of a signal as a box a box that holds a value so let's go ahead and rename that to box and we can give that box some values so let's say we have a box and we put some shoes into the box now this box has a couple of special capabilities one is that it can notify you when the value changes and we will later see how that is important so the Box can give you a signal um the box has also some cool capabilities like we can say we have something in the box but of course we can take out the value out of the box so if we would do that we would get shoes so nothing special so far interesting is that the ID here is really helpful because it tells us the type so the type is automatically invert and we can see that the type is writable signal so what is the difference between signal and writable signal well let's use again the help of the ID and we can see that a writable signal extends a signal and a signal itself doesn't have much on it right but the writable signal extends that signal and adds a set method a update method and an S readon method so let's see how we can use those methods so let's say we want to put something else into our box so we can say this dobox do set and we put in a t-shirt for example now the important thing to notice here is that nothing happens it's not this push base like are used from rxjs where you pass in your call back and you get notified if the value changes here again we just put a new value into the box and we have to take out that value later again if we want to use it so pretty straightforward now let's say in our box we don't have a string but we have a number so and we want to increment the number what you of course can do is say we take the value out of that box and increment it by one so that would work and we would get 0 One log to the console but there's a much better way and that's the update method with update we can say that we want to update the value and we can pass in a call back and in this call back we can simply access the value so that's the current signal value which would be zero and increment it so those are those two functions set and update so writeable signal allows us to push P or to set or update the value now if you have used angle or signals if you played around it in the death preview you may notice that you also had something like this like mutate and that was a function that was mainly used when you had something like a non-primitive like an array in here and what mutate would allow us to do something like this we. push so that would be access to the reference and you could push one but the angular team decided to remove that function and for good reason because this basically introduces the same problem that we have today if you have an array and you just push it and you pass it array as an input to an on push component then Eng on changes would not run so therefore they encouraged you always to use update which means here you would just spread V clone the array and push one in so that even means that in the update method you still have to work immutable to get the the benefits of a signal yes correct Okay cool so then we have seen that there is this s read only method and what is what is a possible scenario where you might want to use that so let's say I have a injectable injectable and that injectable is provided in root by the way life coding got so much easier with GitHub copilot look at this so let's call it console demo service and I have a counter here which is a signal of zero so now what I can do I can say well I get a hold of the of this counter service and that's wrong Ai and we inject sorry I have to call it console demo service right and now what you can do is you can say console demo service. counter and you can set five but maybe that counter is meant to be like counter is incremented right so you want to avoid that so what you would do is probably you would do something like that call this internal counter then have a increment method which is a public one which would do this to internal counter update and then a public counter which is basically this to the internal counter as read only and now as you can see we cannot set five here so we will need to go over the increment method but what we can do is we can call it so we can take the value out but we ensure with that that you cannot update and set it if you've already used rxjs this might be familiar because you have subject and what we were usually doing was something like subject. s observable that was a pattern that I've often used that's the exact same thing here cool so that's the basic API of angular signals so now let's go to some component and we will see how this is used inside inside angular so I created a counter component and this counter component has a typ count and a button increment so let's go ahead and create a counter which is a signal of zero so signal of zero it's a signal with an initial value zero and we display that in the template again to take the value out we just call it and then we add a click Handler with an increment function and on that increment function we simply do this counter and that so AI is not yet so good with signals to be honest um because this is plain wrong so now we have a counter and if we click we can increment that counter right and that's cool but let's quickly think about that like why does this work because wouldn't it be fair to say that this is actually the same as doing console log and then a isn't this the same because here we just update the counter right maybe here I should go with a number it would be fair to say that this is the same right because we just do an update isn't this the same as clicking once so the difference is that in angular or in our counter example we we are still in normal angular environment means we click something and then we have this Library called son CHS which monkey patches all the async apis and then tells angular well an async event occured go figure out what changed and then angular runs change detection through the component Tre and recalls those template bindings and therefore it's essentially the same as saying console lock this counter again so recalling the counter right and that's basically done by zjs so that's just something some important piece that may not be clear like if you start using that it's still working with zjs at the moment now let's take it to a bit more sophisticated example so let's say instead of just displaying a counter we want to display a double count so let's go ahead and create a signal double count but instead of creating a normal signal we create a computed signal and the computed signal or computed is a function that is also provided by angular and it takes in a callback which we call the computation function and in this callback we can say this. counter times two and now whenever our counter changes we can see how the double count also updates we will see in a minute how this works behind the scenes because this is pretty interesting but before we do that let's also say we want to lock that basically so we would go ahead and we can create an effect which is basically a side effect and in the side effect we can say count is and we want to lock not the count but the double count count is this. double count so now whenever you change this eect gets called right so it if you if you have worked with ngrx this might see seem familiar because you can set values right you can take out values you can calculate derived values and you can have effects which run side effects so how does that work behind the scenes and the reason why that works is because angular behind the scenes uses a graph so a reactive not just a graph but this graph consists out of reactive nodes and reactive node is kind of the B the base class and there are multiple or two classes that extend this Base Class and one is a producer and one is a consumer and so far we have seen what writable signals are we have seen what computed signals are and we have seen what effects are and a writable signal is always a producer so a producer is something that produces reactivity that produces new values right a computed signal on the other hand is a consumer because it consumes some values that are produced by a producer so by a writable signal but at the same time it's also producing new values so a computed is basically used to calculate derived values so therefore a computed signal is a producer and a consumer cons depends on if that value is again used and an effect on the other hand is just a consumer because an effect doesn't produce new values the only thing that you would get back from an eect is the eect ref which is only useful if you want to manually clean that up could you set the value of the base signal in the effect and because I mean that's basically basically how ngx effects work right you take an action and at the end you return a different action that's not how signal effects work though right yeah so when you want to set a value in an effect you can do that but you have to specify a custom flag allow signal rides through so there is an option at the end of the eect which basically tells you um that would be here where you can say allow signal right so by default it will throw an error if you update a signal inside here but you can say allow signal wres through and could but this should still be a different signal otherwise you basically have an infinite Loop yes yes definitely exactly that's also why they prevent it from default to makes sense it's a re it's a very reasonable default yeah I also think so okay cool cool then um yeah let's look let's look at the code again so let's say we have a counter which is a normal signal which has an initial value of zero then we have an is even which is a computed signal that basically calculates if our counter model 2 is basically even and then we have an e that just locks that and later we do an update on our base signal so let's see what is going on behind the scenes here so I tried my best to research the angular algorithm and visualize it right because it's not such an easy thing to visualize but I hope I came up with something that makes it more clear so initially this looks very complicated right nah nah it's okay so I was speaking about the graph many things should be familiar if you see this I mean it let's go through it so we have a graph update that is initially happening and we can see that we have our count signal which is a writable signal we have our e even which is a computed signal and we have our e effect so those are the pieces that build the graph now what is new that our count has a version and a value so we start with value zero and the version is just a counter that gets incremented whenever the value changes can you zoom in a little bit the graphic is a little small yeah like that yes that that's good for my bad eyes from sitting too close to the monitor okay and then um the counter for example because it's a writable signal so it's a producer so each producer has a list of its consumers each consumer on the other hand has a list of its producers and since our computed signal is a producer and the consumer it has a list of the consumers and the producers right and interesting is that for each producer you kind of store the current version and the value so here we know this is our producer so the count signal is our producer and we store for it the version and the value and the same for our effect same does our effect does the same now there are a bunch of details that will probably go to deep but they also uh distinguish between lifeless of a consumer and may if you are a live consumer which in this case we are because you are a live consumer if you are consumed in an effect or a template then this arrow is there otherwise it might not be there but that's just some detail for completeness but I don't think we should focus on that and the version is just used for dirty checking in the template then which was run the last time or the version is used later in the phases that we will see in a push phase and pull pull but it's basically an optimization on how to make the algorithm more performant gotcha okay so yeah what is going to happen next is we have a counter. update so that's this line where we update um our base signal and now what is going to happen happen is that here this value version gets incremented so it gets set to two because it doesn't produce the same value so there's also an equality check so if you would do counter set zero nothing would happen right because it's the same value and you can also customize that function so there is even a function that you can pass in and let's say you would have a product array a product object that you put in here you could say we just checked per on the ID and not the whole object basically so what is going to happen then the version gets incremented and the new value gets set and then you push dirtiness across that graph so we call that the push phase so you push dirtiness across your um your produ yeah across the graph to your consumers basically from this point of view to your consumers and that pushes it further down the graph so that's the first phase and that's important because here nothing else happened no recomputations are run nothing else so just counter update nothing else and then we enter this PO pull algorithm and that's basically the interesting thing the effect itself reruns so angular schedules it behind the scenes and re-executes it so the effect will just be run by angular we don't do that manually right and then the effect will basically start by pulling down its consumer so it will pull and then our computed signal will further pull to our base signal and what will now happen is it will check okay I have stored version one for you but your version now is two so that means the value changed so I'm going to pull the new value and then it will pull um it will pull the value one and update here the version it has stored and the value then it will Rec compute itself and update its own version so it will then have version two and the value Falls because one is not an even number and then it will further go down and the same thing happens for the eec because the eec now knows well I have stored version one for you but the version is actually two so I probably have to pull the new value and that's what's basically happening and then the eect recomputes or or re-executes the call and this looks this looks complicated but I try to kind of um simplify it with that so you start with the effect which pulse there is even pulse and then if necessary you do pull the new value recompute update your internal stuff and so on you can see the recursion that is going on here that's pretty cool I also think so yeah that that's very much simplifi compare to that like massive yeah yeah definitely I like it do you mind if we put in an interlude for like quick couple questions uh that accumulated throughout no it's good it's good cool okay um one thing one question that you will probably like the most and I always like to start with questions like that what is the webstorm theme that you're using oh that's a cool question um the webstorm theme that I'm using is called skull and it's a theme that I created myself because I wanted something that is very light on the eyes right so and I also kind of have some some color blindness and therefore I created skull yeah on those pictures where you have like multiple colors right these numbers I I barely see anything like yeah and so I created skull which is basically the the idea behind this is comes from this Norr light so everything is kind of like themed like that that's cool and also if you want to know more why I like it you can go over to angler experts I think products skull and there you can find it it's currently a paid theme it's um I think $2 monthly and 20 yearly probably I think so but yeah I spent quite some effort to make this happen to be honest yeah I did all right um when you were talking about how the signal gets updated when you with the increment method the question came up well wouldn't the same thing work with normal values due to the way that change detection works on angular because you're still clicking on a button the counter if it's just a number value would still update in the views so how is that different and what are the implications for change detection in that sense yeah so it would still work with the normal thing right with a normal number but um yeah we will see the change detection implications in in a bit okay okay then I will hold on to that question I'll just I think yeah we will go more into detail there yeah um we will come to that later what is the added value compared to rxs um so one thing again we will see that soon which is basically um the change detection then also I think it simplifies things for for persons but that's like um how to say it simplifies from a user point of view but if you see the concepts that are going on behind the scenes because now we have push pull pull basically ARX CH was pure push base so there's also debate to make if it's really simple but probably you don't have to dive that deep into the into the algorithm but I think it's a bit simpler and the main benefit will be of course local change detection and it will we will see how it impacts the future it will have a lot of of benefits but that's still yeah we will go deeper into that yeah yeah one thing I particularly like about that and saying that as an rxs core team member so it's very explicit when rendering is happening while observables height the producer are implications entirely for you ideally um it's very transparent now when rendering is going to happen basically when you call the set method or the update method and that's something that I personally always liked about react with a set State method it's very clear when a component will reender and you can use that information to um batch certain operations and all those things that that was always very hard with angular now this information becomes a lot more transparent at least to me so I that's and uh if you haven't done that but checking out the signal based components RFC I'm super excited to see that come to life eventually yeah we will also show that later the the RFC for the future I didn't check out the RFC while it was like ongoing but I think like a week or two ago I was like okay okay I'm super excited for seeing that again cool um covered that okay let's hold on to the other questions and come to that later um so if you want to take it from here again MH yeah so one thing that I wanted to show you now that we've spoken about the graph let's take again this example and one thing that I want to show you here let's say we have a counter two which is also a signal and we add a another button which we call increment two increment count two something like that so of course we have to go ahead and add this function increment two um this dot counter 2. update so we basically have the same and double count now is this. counter but we do plus this do um increment too and let's Also let's see uh not increment to counter to of course let's also do some C code and let's call this total so instead of double we call it total right and let's display counter two cool so we have two counters so we can increment the first one and the second one and also our computed updates but let's say for some reason we want to increment the second one but only update once we increment the first one so what we can do is we can go ahead and use a function that is called untracked and we can pass in a call back where we use another signal inside and then what is going to happen we can still increment two but our double count which should be total but yeah that's the total doesn't increment unless we do it with the first unless we increment first first counter right so with that you can kind of say this is not tracked in that graph that we were showing previously so um based on the questions that we've seen you were already too quick but yeah I was thinking that you might think at this point like we speak about reactivity but what about this guy because we already have reactivity in angland we already have all that stuff right so what is the main motivation of using signals and that was one of the questions and one of the main motivations is change detection so let's go into this change detection demo and also here change detection demo component it's one file I put multiple component in there so that I don't have to hop like between the files but what we have we have a grandchild component which is used in a child one component then we have a child two component and both are used in inside the parent so now angular be or angular has this component tree so that's this visualization of the tree so we basically have the parent component child one grandchild child two and now let's say we lock something so what is going to happen here so the first thing again our good old friend son CH kicks in because it monkey patches the Asing events so he knows well a click happened so he goes and he tells angler run change detection because a click happened but he doesn't deliver like a click happened in a grandchild it just says go run change detection go figure out and then angular basically goes through and figures out and now you can see whenever I update the color here means we run change detection for that component so we run change detection basically for the whole application right and here we have four components which is not a lot but imagine you have a bigger application which uses the even third party libraries you will have like bigger component trees with quite some components so the angular team is aware of that and what we did in the past is we added a change detection strategy which is called on push so let me quickly go through here and add on push everywhere and then we will see how that impacts our tree so change detection on push and then also here cool so now all the components are on push and now if you click something you can see how child two always stays the same so we basically do not run change detection for child two because we can skip entire subt trees because they are on push and in on push it only change detection only runs in three scenarios if the input changes by reference if the component was marked for check or if basically a click occured inside here so cool but now let's say therefore I quickly have to let's say I move that button down here inside our app component so like that and now I say I have a increment observable so let's go with an observable and we will do a increment observable function and as you can see I prepared a counter service and let's say on that counter service we have a counter stream which is a new let's go with a behavior subject I think that's the most similar in terms of behavior from from signals because you also start with an initial value and then what we can do is this this counter service counter. next and then we basically increment the value and now let's consume that inside our grandchild component so take away that grandchild Ops and here we would do counter service counter and you can see that we have to import the Asing pipe and now that's a bit annoying I mean it's cool we get better tree Shake ability over the common module but still we have to import it and now what we have here is yeah that fancy IDE that you use there that would have suggested that to you just just saying okay okay good um let's also quickly I want to quickly change the the lock something button so here the text basically should not be lock something but we call it increment observable so now if I increment this observable let's see again the change detection right so still the whole whole tree is checked so can we do better how about does it help if maybe I don't know let's see maybe it helps if we put in a signal right so of course we have to import the signal and then we add another function increment signal and we say this. counter service do counter and now we've already learned that we can use this update function so we do another increment signal and then on the top we would use grandchild signal and now the cool thing is we don't have to use any asyn pipe we can just call it and then we have grandchild signal and if we do the observable everything get checked and now let's see the signal so in the signal did I do something wrong because that should actually only check this one yeah because I didn't call increment signal so I call increment observable but now we call the correct thing I didn't wanted to call that out you know ah okay yeah for don't no live coding it has to go wrong hard it is hard yeah but now we can see that with the observable we run change detection for the whole three but now if you do the signal child one doesn't run change detection so the parent still runs it because we still have like the event it occures here so the component gets marked for check all right but we have to be a bit careful with that local change detection it's cool feature but notice how initially I had to lock something button here I had to move it up to the parent because otherwise it would not work because then we are still in the current in the current times we still have the click event coming from here and the component and all the three would get marked check then it still runs for everything so this can be very confusing if you just read like we have local change so we have currently local change detection in certain cases but this shows you how this might work in the future and the angular team can also extend it in the future in such a way that we can drop out of Zone chairs and just run change detection for this also I think in the future they want to do it like pretty fine granular per view so if you have like multiple NG ifs that would be multiple views they can run it only per view but currently it's still for the whole component yeah and that's one of the big benefits of signals over our ex CH massive benefit like being able like everyone has like a if you're having like a page or something those are usually pretty big Hefty components and running entire change detection over that is it's costly compared to like okay being able to just run change detect on like C certain parts of that view it's going to be a major difference in performance particular if you don't really have to change anything other than migrating to signals progressively I I'm very excited for that yeah me too and even if we get to a future where we have Zess because zone is still like you have to load it which has its own weight sometimes it's magic sometimes it runs too often so I think this will be a huge Improvement right to be fair it's always magic I'm pretty sure there are like five or six people on the planet that know how it actually works and probably four of those are from the anger team so yeah that's that's also true that's true yeah okay cool but still again what about this guy right because I like this guy it's good I also like it um yeah because still what what is going to happen with rxjs because okay cool we get better um change detection but what does it mean for rxjs so will it go away or not I don't think it goes away um the angular team I think once mentioned on a podcast that they can see a future where it becomes optional for certain cases but I think for most cases it's still valid and we will see what are those cases or we will see one of those cases and if we still say we need rxjs we also need a way to convert signals to rxjs and and vice versa so how can we basically work with both of them and to show you that I again prepared what we are going to use again my super NG web console um and we have a counter signal and let's say we want to have a counter stream by the way I always use this dollar because I kind of like this convention I don't know we Nicholas is this is this a good is this a good convention or I I use it to I use it to I I personally think an IDE should help you and like just tell you and typescript in general like hey this isn't observable um in like JavaScript then I totally would use it but I would never write a project just with JavaScript these days um I use it myself do I think it's need or useful not really I don't know it's more I kind of like it I kind of like it if I just have a service and then I do counter and I know everything dollar is a stream it's kind of it's not but that's yeah Personal Taste but we can say to observable so we have two functions to observable and to signal and we can say this do counter so we convert our counter stream into an observable and now we can use the the rxj as operator so we can say we delay that by 1,000 seconds we come down here and we subscribe to that and then after 1,000 seconds 1,00 milliseconds so after 1,000 milliseconds we get counter zero cool so let's say now we want to convert it back so let's say we have another counter which is not the signal zero but to signal so we convert our stream to a signal and then we would do console log another counter and we lock that out so now we would immediately get another counter and then later counter zero that's the delayed value but we never get basically another counter zero so we will never get an update here and even the initial value is undefined so what can we do about that so what you can say in the two signal methods you can pass in a config objects but you can say require sync for example so you can say well I want a sync observable but of course our observable is not sync right so we will get an error in the console which I don't know how to bump so maybe I should maybe I should extend the web console to also handle the errors but so yeah you get an error but what you can say we don't require sync but we still start with an initial value of five for example and then when we run that we get IM immediately another counter five and then our counter delayed emits zero but why don't we get that update and again it's the same thing because we don't call it so we we would need to go ahead and after that update call it and say console log update counter another counter something like that then we give it like 2,000 milliseconds and now we would get another counter five counter zero and updated counter zero so that's kind of the idea so we can convert from signals to observables and from observables to signals so now you may ask like where does this make sense and I try to come up with a example which is a GitHub user search therefore I prepared here a GitHub user search component Let Me Go a bit smaller and we have an input field and let's say we want to basically um fetch a bunch of users from GitHub now what we would need to do real quick how how long do you think you need for this demo for the GitHub search because we have a couple question questions again and I want to make sure we cover those two mhm about 10 minutes five 10 minutes 10 okay then let's let's do questions first so that we not forget about them and then um come to that cool um one thing that just came up that uh is really interesting is why do you use require sync if you're using an initial value anyway is the require sync a mandatory property that you have to specify or was this just while coding it happened um it's not a required property but it's just basically for you I I see it more as a tool that you can use to Ure that you have an initial value on this observable so you can say I want this to be a a sync emission but you don't use required sync together with initial value right the initial value you would use if you have required sync false which is the default so you can in if you want to have an initial value which is often important when you do use it in a template then you either use initial value to make sure that you have an initial value or requir sync okay that makes sense uh this we need to Circle back a little bit this came up earlier when you had the graphs open why would we need a non-life consumer node if we compare with life consumer MH um non-life consumers is basically to avoid memory leaks so basically if you would have a by the way heier shut out he's often on my stream cool guy um so basically you would use non-life consumers if yeah to avoid memory leak so if you have a computed signal that is using a signal in its computation function and then suddenly you would go ahead and say computed signal equals null yeah then that can be garbage collected and if you would have that connection basically so if you still have that Arrow between the signal and the computed signal you cannot garbage collect it so then that's the idea for non-life consumers but if you use it in an e effect or or template you cannot anyway not just set it to n um are there any additional consideration or patterns that you use maybe for unit testing signal based components and Signal based components might not be like the 100% technical right term but components that use sigo I think it's intent here yeah so I have to be honest I've never written um unit test so far for signals because I haven't used them so much in practice yet but I don't see like big impacts I so yeah maybe I used sometimes marble testing but for for acing stuff and that's something you cannot use here but but I mean in the end you would anyway the way you usually write unit tests is okay you perform a function or something and check that a value is updated in a view and yeah you should be able to do that just out of the box with signal so there I personally I I I'm in the same boat as you are this is just from like uh experience what I would expect but I don't see any changes really coming in that sense yeah uh cool and the last question that we had probably not the last question because there are more um if you have multiple signals that are listening or that in in an e effect how do you know which triggered the call function in the E effect um basically it again works with the graph right you so you would make an update on a writable signal or basically somebody produces a new signal and that pushes thess then and then when the poll happens he only pulls for the one that was 30 and not for the ones that were not 30 right right but that's like framework level you as an application developer you would just get like all the like values and deal with that this way right exactly exactly okay uh let me quickly check if there are more questions now in the meantime okay I think oh that is a great question um is there a state manager based on signals um State manager you mean like the like ngrx so I know that ngrx has now a two signal method which allows you to basically select signals from the store but yeah and I think they also have a signal based component store or something that I've seen but I've never used it yeah we had um Marco on the angular Plus show and he was talking about signal store it's not Redux based so very interesting more functional than n your axis um and it can be used for for components and Global state so pretty cool pattern I know that RX angu is working on um a signal based State solution if they' have not already pushed it out um and I would be Anita or an elf and those State managers are not setting on signals in the long run because it's just more performant for anything State related uh I think this is another great one and then we get to your demo are you using IDE yes I am are you Jesus yes okay you're like a hell lot smarter than I am I told you we were we were chatting before that before we went live we were chatting about the moonlander yeah and I initially switched to the moonlander and then you first have the columnar layout then you have the moonlander config and I have Vim even on top so my brain was kind of exploding the first days because that's that it was too much even now the presentation I'm doing on like a normal keyboard because if I speak and I have whim and all the config coming together I was like on stream I usually use the moonlander but then today I was just like let's go with the safe version all right I I have to try Ide at some point I feel like IDE wiim is super cool like I would I would recommend it for basically everybody whim motions is like the best it's super strong it's just another thing to learn right okay um let's go back to your presentation presentation we get in like six minutes can you do that okay okay let's do let's do this let's do that okay good so we have this GitHub user search input and it we have a bunch of use cases because when you type something quick right you don't want to fire like 10 requests you only want to fire a couple of requests like basically one at the end then also you probably don't want to fire on each keystroke and another thing is you don't want to fire on every keystroke so only if you didn't type for a certain amount of type if I come with c c then I want to fire one request if I do c and go back I don't want to fire because it's still the same right and if I do a I want to fire a request for a but I have no control over the timing of the request maybe this takes long and if I fire one for B and this one or a comes back faster or no B comes back faster and a takes longer then I would maybe or I want to avoid sit sitation that I display the wrong data right so there are a lot of use cases going on here and I imagine I don't know how to implement that without RX chairs but with RX chairs I have a certain idea how I can do that so how can we use rxj here together with signals so let's say we have a input and we have a handle input function and in this handle input we would do handle input and then inside here we basically create a input change or input which is just the signal we start with an empty input because initially it's empty and then we say we have dollar or event let's type it as any and we say this do input do set event Target value probably here we should pass in the dollar event sounds like a good idea and now let's go ahead and create some GitHub users so okay we have this. input but how do we now Implement all the features that I was talking about and what we can do is we can say to observable and now basically we go and we have access to the observable stuff so I think of this as walking down the street so on the left you have the signal store on the right you have the observable store and now you think okay okay well now I need something more powerful so let's go to the observable store then you walk through through the store and you say well I want to use a filter that sounds cool well how about a distinct until changed right then how about a bounce time of of 500 milliseconds how about I want to show some spinner that's cool like show spinner which can be a signal false then we can use ooh o That's cool because I'm using the EIP for the first time now I've never seen this wow that's nice also with the logo I was just say that was first contribution to the webstorm Cod I'm probably the only one for a while but yep new logo nice you did a great job right senior developer now and certified and certified streamyard expert yeah yeah your career is Skyrocket yeah like the last four weeks play the LinkedIn game so so yeah so we want to show that spinner right then we want to switch map because probably we want to have some users I think it's called search users so again AI is doing a great job here and then once we load we want to hide the spin so now we want to display those thingss in the template but again we are walking down the street and we think like well on the left side we have the signals on the right side we have RX CHS well here we need to use the acing pipe so let's go to the signal store because there we don't we can call it and we also can take advantage of some sweet local change detection right so then let's say okay we go to the signal store and now we can say and I imagine here again wow thank you young that's amazing this is not amazing to be fair all the work goes to poro who did like everything else than the logo so okay I feel like we have to give credits where credits are do okay good okay good so basically now I just display the GitHub user right and I use four and now if I start this and I type I see the loading spinner and I have a nice um get nice GitHub user search like it's pretty cool yeah I don't know if we I don't know what you get usern name is me neither me neither yeah good but um you can see imagine you have to write this without RX ch right so good luck I would say because this is cool now before we wrap it up this is basically everything that you can do today so that's everything that is available that is there that is stable right so you can use that but we were talking about signal based components and the future and how it impacts those things and let's take a look and again here the idea is pretty cool because now basically everything that is red is not there yet so in the future we talk about signal based components so we will probably get a signals through flag that's not yet there but it's also not final that we get signals through but that would be then a signal based component I guess that has impact on change detection so if you have like a click Handler there that it doesn't automatically Mark the whole sube but it will only basically run local change detection then um then there are a bunch of impacts or this has quite some impact because what would change is with signal through this is basically a add input that we know from currently would write this now the syntax changes it's just an input but this is automatically a signal but you can still use everything that you use today like AAS required and so on then we would get model inputs model inputs is pretty cool because imagine you have a signal based component which is just a toggle so you can say this is a model which basically allows you to also update that signal and then you can use the banana and the Box syntax here to update the signal on top right then signal outputs of course again different zxs but it would be signal outputs view child would be different so view children we would write in a different way the view child as well and and it also has impact on the life cycles So currently we have a lot of life cycles we have on changes on to check all the after content in it which most of them I ne I rarely use I mainly use after view in it on it on changes right and don't destroy but in the future we will have much less like we will have effect effect which is basically since all the inputs are signals we can use effects instead of own changes and then we can use also for after content in it content checked and the view checked we can use signals then we will have a after next render and after render those are the ones that are already available and we will still have Eng in it and Eng destroy but that's the big impact that signals have on the future of angular and I think that's also then yeah basically the whole framework will be built more around signals so that's the idea here yeah I'm very excited for that and then we just get rid of the add component decorator and I'll be super happy why why is that something that is is not I'm not a I'm not a big fan of decorators in general um I would prefer component function that does the same thing oh functional components I think Brandon is also a bit I like this approach on that I know he got a lot of hate for that but I really liked it I I I don't know if he got hate for that but I just saw that he's a fan of it um again thank you very much for joining us for this webinar this was great I I learned a lot about signals that I wasn't aware of before so thank you very much really appreciate you coming on and yeah thanks for having me fancy things M if you don't mind I will kick out your slides and do my streamyard magic look at that um so if you have any questions afterwards feel free to reach out to me or Kevin um here again Kevin's information I I also not have to play the stream and Linkedin game I also have to play the YouTube game so uh if you want to be notified about content like this in the future we try to have this something like this somewhat regular so uh check out the jet brains TV channel And subscribe like blah blah blah blah blah um again Kevin thank you so much this was great really appreciate you taking the time sure and if people are interested in this kind of format also feel free to to follow the live streams it's basically pretty similar yeah yeah all right thank you very much everyone for joining us and see you next time thank you

Channel: JetBrains

Views: 10,513

Keywords: angular, web development, webstorm, webinar

Id: 9SgXk7Iw8AQ

Length: 61min 35sec (3695 seconds)

Published: Wed Nov 29 2023