Basic Observables Overview

[00:00:00]
>> And with that, I think we're gonna start jumping into how do we actually play around this? Right? It's the initial question is great observables they're wonderful. How do I get my hands on one of these observables? How does one make an observable? Right? And there is like an observable constructor where you can hand on your own observables but in practice, we have a bunch of very simple utility functions.

[00:00:22]
That will produce an observable for us. So what we're gonna do is we're gonna take a look at a few of them, kind of just on a high level, and then we're gonna actually kind of play around with them, get our hands dirty and write some tests, just to kind of see how they how they work.

[00:00:37]
So let's kind of take a brief tour, and then we will jump in and play around. So the first helpful utility method is one called of right, and of takes a series of arguments and what it does it makes an observable of those values. Does right what it says on the tin, right?

[00:00:58]
The other thing to keep in mind as we look at this first example is you'll notice that I named it example dollar sign right and we put it on the end because jQuery already owns putting on the beginning. This you don't have to do this if you hate this, the dollar sign doesn't mean anything the dollar sign is just a regular JavaScript variable it is helpful especially in a world where you might not have TypeScript right?

[00:01:24]
It is helpful for you and your friends to know that this is an observable stream that we're dealing with and not a regular value. Again, something like TypeScript might all the intelligence in the world might handle this for you, you don't necessarily have to do it it falls under the list of conventions that we do.

[00:01:39]
Like giving classes and constructors and JavaScript capital letters, all right, using dollar signs in the beginning of like jQuery, capitalizing react components so on and so forth, right? That is basically what it means there's nothing special there, it does not have any magic in and of itself, it is just an indicator.

[00:01:58]
Now because it is a stream, right, we can't just use the observable whenever we want we have to subscribe to it, right? And when you subscribe to it it will then run through the values and the observable now, of just basically shoots them all right at you super fast, right?

[00:02:17]
Basically synchronously they will all fire immediately at you and you can deal with them at that moment. So of, is kind of, it's a utility when we're obviously gonna build bigger and better things. There are things like, maybe as click events come in. Well, that could be an event I want in my stream.

[00:02:31]
We might need a different helper for that from API requests so on and so forth. But of is the simplest one. It takes a series of arguments and basically shoots them all at you in an observable incredibly quickly, also known as synchronously. It has a friend that's friend is called from.

[00:02:52]
So of it's just gonna take the value is raw, whatever arguments, they're going in there each value so on and so forth so far from we'll deal with a certain set of values that it can try to turn into an observable, right? So arrays are good for that, right, you just work your way through the array.

[00:03:09]
Really, anything that is, quote-unquote, an iterable in JavaScript, so anything that has symbol. Iterator. So that's basically Arrays, generators, things like that. It will basically work through the values of that data structure and send them to you. It'll also work with promises because that is a really great example, it'll basically wait for the promise to resolve.

[00:03:31]
And if the promise resolves, then it will give you that value as well. So anything that is not necessarily just a regular primitive value or just the kind of pure thing that you want to use but you'd like to turn one data structure into an observable from is your buddy for doing that as well.

[00:03:49]
And you can do generator functions, you just have to instantiate them, and it will basically work through all the things that it yields. We'll kind of see that in a little bit. Like I said, promises, once the promise resolves, you get the value. So from is a pretty useful tool as well for turning other things Into observables, all right, let's look at the difference for a second.

[00:04:14]
From is useful whenever it's kind of like an observable that we want to turn into one, so that is arrays and promises and generators. Objects that have a subscribe method, so like anything that we would call observable that adheres to the interface of an observable, it will turn it into a real observable.

[00:04:31]
So like svelte stores, for instance, have a subscribe method. You can basically turn it into an observable read through the values, so on and so forth. For the nodding in the room like spelt stores are basically like what subjects in ArcGIS so they they play very nicely together, there's nothing like an observable.

[00:04:50]
So, any kind of primitive value and object that doesn't necessarily adhere to the API contract, and observable we're gonna use, and just kind of shoot it through the observable stream in this case. Alright, so if you looked at the previous slide, you saw that we just gave we had subscribe, and then we gave it a callback function.

[00:05:08]
Right? And that was what to do when every value happened. But that's great. That assumes that everything goes right all the time, right. And I don't know about you, but I don't write code that does that all the time. So, there are two ways that we can deal with the other pieces of this.

[00:05:24]
And if this stresses you out, it should. You can actually pass it three functions and this is it's tricky, right? This actual syntax is currently deprecated but not removed but still common enough that we should talk about it. It will take three functions as arguments. The first one is what to do when a value comes through.

[00:05:46]
The second one is what to do. When an error comes through if something goes wrong something throws midway through and the third one is what to do when it's complete. When the stream closes and it's all done so if you have one, two, three, four, four is last value the observable completes and not all observables complete, but one, two, three, four does complete, what you wanna do in that case, right?

[00:06:12]
The reason why the syntax is somewhat squirrely, is what happens if you just wanna deal with new values and also a completion event but you don't care about errors. We got like passing null in there as a second argument right if you only care about the completion of the observable then it's null null your callback, gross.

[00:06:32]
So you can see that as well. So we don't like that, it's deprecated. It's kind of a different syntax, which is kind of what we might see more commonly, which is, you can give it an object. With next error and complete. And so in this case, if you only care about errors, you give it an object with error key.

[00:06:52]
If you only care about complete, you give it an object with the complete key. If you only care about next, whatever, right? Whatever combination that you care about, you can subscribe to it and have those callback functions called. So the rule of thumb that we're gonna kind of use here is if you need an error complete event we're gonna use the object most of the times we only care about the next event that comes through, right?

[00:07:16]
In that case we can just pass it a function and move on, right? So it only if you explicitly care do we need that second syntax otherwise just the regular passing at one function of what we wanna deal with we'll go ahead and work for us pretty well.

[00:07:34]
All right, so we have a site RxJS.fundamentals.netlify.app. And in there there is a repo, and the repo has a bunch of sample applications, and it has some tests, and it has everything I kinda wrote in here. And what we're gonna do is kind of take it for a spin and first I am gonna kind of show us effectively, just some of the syntax and action so we can see it and then you're gonna kind of take it along.

[00:08:06]
>> Are you gonna cover any integration with frameworks or TypeScript?
>> No to TypeScript just brief mentions of frameworks at the very end this is just getting comfortable with the basics of this point. Let's try out seven, the TypeScript is pretty well supported. It's just you have to basically say what the value starting out is.

[00:08:28]
And if you're gonna pipe it through a bunch of operators, which we'll talk about a little bit, what the value at the end the actual TypeScript support out of the box is fairly, fairly solid. But that would be we'd find that under Advanced basics or advanced.
>> How does it know when the event is completed?

[00:08:43]
Is there an underlying generator?
>> Under the hood, yeah, generates. And so some of them don't complete. If you are, in a little bit, we'll see the idea of one that takes an event listener. Well, an event listener never completes, right? Or there could be a interval which might not complete unless you step in, and tell it when it completes.

[00:09:04]
So a complete event, if we can kinda whip up some code a little second where we can see this, but in the observable itself and whatever of is creating one where it might iterate through all the values. There's a method under the hood called complete. There's a method called next.

[00:09:22]
When you call the next method inside of the observable, which looks a lot like a generator, it will send the next value out when you call complete that signifies that this is now completed. Some of them never complete some of them will complete after a very brief amount of time you can kind of control all of those things and we'll look at how to take observables that never complete and make them complete so on and so forth.

[00:09:46]
But effectively if you're familiar with generators, you can think of next yield and complete like return right? So you can have number of values you get if you're writing your own from scratch, then you could theoretically call these methods. Otherwise, the of we'll call it at the end of that list of values from we'll call it either when it hits the end of the iterable.

[00:10:08]
In this case, a generator or the array or the promise resolves, there's usually a thing that will trigger the completion under the hood in the library itself.