Events

[00:00:00]
>> In a lot in a lot of cases, right, once that page loads, trying to think of all the things that could happen that effectively cause change on the page. API requests, any kind of event a mouse move, click, whatever you've registered. Click event listeners for some of the more common ones that will kind of come through if you are getting fancy with client side routing, that could be another one.

[00:00:25]
Right, you have a stream of route changes, right? But generally speaking, events are a pretty common one. If you think about under the hood prior to the Fetch API, right, XML HTTP requests had events, your route changes, probably listening to events. Events are basically the bread and butter of our actual UIs.

[00:00:44]
So just like we have have of and from, we have one called fromEvent. And it creates an observable from an event. And it's looks somewhat similar to an event listener, right? So on top, I have basically an event listener where we addEventListener click and we say console.login. With our observable, we separate those two things.

[00:01:13]
We separate the creation of the subscription to the event, and then what we want to do with it, right? And so again, this gives us the ability to basically have one event listener that we can use multiple places, different things can subscribe to those events. Like I said before, one of the interesting parts about observables is that each get their own subscriptions, 0, 1, 2, 3, 4.

[00:01:38]
In this case, those will be the events as they come through, right? And one of the things we can kind of take a look at later is there are ways to kind of replay events that have happened, if you need to catch up or stuff along those lines there are operators that will allow you to do that.

[00:01:51]
But generally speaking, this allows you to separate what to do with a subscription from the subscription itself. So it does take, if you do need to modify that event at all though, and you wanna say, okay, listen, I always want the event target value in this case, you can pass it a function that will go and do something to that event upon subscribing to it.

[00:02:14]
However later we'll see that you can take observables, you can map them. A lot of things you can do with arrays, you can also do with observables. Just like in the fourth dimension effectively and have some of those in place. There are a few more that we're not gonna get into today cuz they don't necessarily apply to us in quote unquote front end engineering.

[00:02:35]
But they are kind of useful and I just wanna put into your brain, so that you're aware that they exist, so you don't try to write them yourself. There is one called bindCallback. And this is super useful if you're using node js, for instance. Right, which basically deals with, you know how node takes the errors, the first argument and then the results is the second argument.

[00:02:56]
It's basically a helper function that will take the kind of node style of callbacks and turn it into an observable for you. There is another one that's kind of in its own separate module in rxjs, called fromFetch. You can take a lucky guess what it does, is it creates an observable using the Fetch API, right?

[00:03:21]
You're like isn't that a promise? Yes, but it's a promise that has a few interesting things like the ability to abort the request, so on and so forth. So it depends, if you're using a library like Axios or what have you, you might choose to just use from promise.

[00:03:37]
If you're using the Fetch API directly, then you might choose to use this as well. Yes, a lot of times a lot of our API fetching libraries tend to be promises and you can use from and create the promise. But this is also another option if you If you're using the Fetch API directly.

[00:03:54]
We will use this one later today, we will not use bind callback cuz there's just not a use case for it.