Signals

[00:00:00]
>> You've learned a lot so far. Before we get to the apt optimizations, cuz these are just fun things we can do, let's just talk about what we've done so far, okay? You've learned almost a full, I guess space of the component API that you need to do everything that you could probably think of so far.

[00:00:18]
Meaning you can except inputs from users. You can communicate across component boundaries. You can do custom events. You can bring in data services now. You just saw how to bring in data, cuz right now that promise was the same syntax that you would get if you're using something Axios or whatever.

[00:00:39]
I mean, I was just using, it's the promise of like, hey, here's some asynchronous data that you get from the Internet, right? You get from a service, you got to do services, dependency injection. I mean, you could do pretty much anything you want. What about if you wanna improve your applications and some other ways?

[00:00:54]
What are some other things that you can do? So for this next section, it's not about completing the exercises so much as being familiar with other ideas, okay? That's all we're gonna be doing. You can code some things, especially if you wanna take some time to really dig into them, but that's not our focus cuz we're just about at the end here.

[00:01:14]
Okay, check this out. Angular signals. Can I get a thumbs up in a chat if you ever heard of signals. Let me see thumbs up in the chat. Thumbs up in the room. What about you? You ever heard of signals? You're probably thinking like, yeah, why doesn't everybody use signals?

[00:01:25]
Well, we probably should cuz they're pretty good. So let me tell you what a signal is, if you've never heard of a signal. Let me tell you just the backstory. So Angular has this idea called change detection. So if you noticed in all of our applications, we never did a single set state.

[00:01:46]
You never did a single set anything to make the screen update. When did it update? It was almost like magic, right? It's just new to update. That was one of our greatest strengths of Angular for a very long time. It just knew how to update and the way it knew how to update was through something called Zones.

[00:02:05]
Zones we kinda wrap your application and the special thing called a Zone, and then that Zone would look for read rights and modifications to the model and asynchronous events. It's like, something happened. All right, let me check to see which component in my component tree needs to be refreshed on the screen.

[00:02:26]
That sounds really good, right? And it is really good until it isn't. And this is one of those times where I told you the beginning, the Angular team, we've learned over time a lot of lessons. At scale with hundreds of components, hundreds of events, lots of data changing, it became problematic, right?

[00:02:45]
People had problems at scale where they had to come up with all these workarounds to try to make things faster. What we decided to do was get back in the lab and start thinking about how we can improve this experience. And we looked at all the solutions that were available we prototyped and then we said, hey, this signals thing, this is pretty good.

[00:03:07]
Maybe we should try it. And that's where we are now, right? We've made our first steps toward completely signal-based reactivity. Meaning instead of using Zones to do everything, we do signals. Signals are great because guess what? If you use another framework that uses signals, the same logic applies, right?

[00:03:25]
So reuse the skills becomes very high. Okay, so we got three reactive primitives. You got your signal, you got your computed, and then you have your effects. Okay, signal computed effect. Reactive primitive only means that these are just like three functions that you're gonna get in Angular, but it sounds really fancy when you say reactive primitive, like it sounds super good.

[00:03:46]
So when you are at your next meetup, be like, so which reactive primitives does your framework use? People are gonna be like, man, this person is a straight up genius, cuz you are. All right, a signal's magic is this. I used to worry of magic a lot, but signals are kinda magical.

[00:04:02]
Here's what it is. Variables are like a box of memory that has some data in it that you could have recalled. You can look in that box and say, this is three, close the lid. What happens when you change that value though? If someone is using that variable, they don't know that you've changed it, you have to go and recalculate things.

[00:04:24]
Well, a signal knows when it's been updated and is able to go and notify different parts of the application. It can notify the different parts of the application, which is really wild, right? So, they're just really smart. It's almost like the publisher subscriber model, where if you're subscribed to me, I get a new video that goes out, you will get it cuz you're subscribed.

[00:04:45]
And it's kinda this idea with a variable now. You have a variable that can tell people, hey, I have a new change a new value. And then we're gonna be able to use this to do fine grained updates, where instead of having to search our component tree to know what things have changed, we'll be able to say, this change.

[00:05:03]
How do I know? The signal, it told me, refresh that part, only that part. Only that part, not the whole tree, just that little part. Really nice. Here's how you do it. You use the function rest at the reactive primitives. There it is right there. We got a function for you now.

[00:05:20]
Here's the difference though with the way signals are being used. When you use it, you say what the, Signal name is and you got to put parentheses because it's a function. You say, so the signal is a function. So that's how you have to use it, all right?

[00:05:40]
So let me go back, just let you know. That's why those parentheses are after the first name or last name because signal returns a function. And that function is the smart function that can like notify and subscribe things, okay? The get computed. Computed is one of the ones I love because there's a really good example that I learned when I was hanging out with Wes Bos on a podcast.

[00:06:01]
He was like, how's I think about computed. Think about this. If you have a shopping cart, here's the thing about your shopping cart when you're online. Shopping card has a total, where does that total come from?
>> Price of the items and how many items.
>> That's right, the price and how many items.

[00:06:20]
But if you change the list of items or something changes you want that total to be updated. If you get a coupon, it's like 50% off of this item so the price changes you want your total to be changed. A computed lets you have an updated signal value based on other signal values.

[00:06:37]
So if you have a whole bunch of things in there, you see? So, that's how that kinda works for you. So that's the really good example I like about this. A much less complex example is full name. First name plus last name equals full name. If the first name changes, full name should change.

[00:06:56]
If the last name changes, last name should change. But here's what's really rad. From a performance point of view, this is great because we only recalculate if something changes. So we do memorization and caching, right? So really nice experience. So you can get this value at all times.

[00:07:19]
It's like, yeah, the last value was, Simona Cotton. Okay, fine. That's the last known value. Nothing changed, why would I rerun this function? I'll give you the cash value. Can you imagine how an application to scale, how much faster everything becomes, because you're no longer having to do it?

[00:07:34]
And here's was even better about signals and Angular. You don't even only have to use them in your component, you just use them in your application. Okay, use them in your application. Anywhere you want to. In your state, remember I said the state thing earlier? You're gonna use redos, you're gonna use this.

[00:07:52]
Don't use any of that stuff. Use signals. Unless you wanna use a state library specifically for more advanced needs, fine, but otherwise just use a signal cuz the signal will stay up to date. And you could share your services where? With dependency injection. It was good, right, okay.

[00:08:11]
And then you get your effects. That's the last reactive primitive, okay? The last reactive primitive. Now effects is where you can have something happen, like you could call a function, do some behavior if one of the signals changes. Here's a good example, like you wanna console.log. This is great for debugging.

[00:08:29]
That's one of the best ones I've seen so far. Or maybe you wanna make an API call because the user finished satisfying all the data, but you don't want it to be based on like events of course clicking, like, yeah. All the values are valid now, let me go ahead and make an API call.

[00:08:46]
I will do that automatically, right? So you can do some nice things where you can do a behavior if one of your signals changes, but an effect takes a function, okay? And effect takes a function.