Learn everything you wanted to know about RxJS - Reactive Extensions for JavaScript in 15 minutes. In this lesson, I cover about 25 different examples related to RxJS. 

Full Code and Lesson: https://angularfirebase.com/lessons/rxjs-quickstart-with-20-examples/

Useful Resources

RxMarbles: http://rxmarbles.com/
LearnRxJs: https://www.learnrxjs.io/
Official Docs: http://reactivex.io/documentation
2024-02-04T08:07:15.395Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
1d9f24ec-8e7b-401d-b8bd-a019298a6837
9bb6c1044fe965531437f07c7e6f91a5541555364441009b64a8492f01b3fbaa
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
ReactiveX has revolutionized the way modern developers think about building apps.
It allows us to treat all data as a stream as it unfolds through the dimension of time.
In this lesson, I'm gonna cover about 25 different ways you can use RxJS so you have a solid foundation to use it in your own projects.
For this tutorial, I've just created a basic HTML page and imported the RxJS script from a CDN in the head of that page.
Then we'll write all of our custom code in this lesson dot j s file and import that in the body of the page.
Then inside lesson JS, I'm creating a helper function that will just Append the results from an observable to the browser on the right side here.
So when you see me use the print function, it's to add the values to the browser here on the right.
The first thing we're gonna talk about is the observable, and I think the easiest way to think about it is just an array that gets built over time.
Then Then you can loop over this array in the dimension of time by subscribing to it.
The first thing we're gonna do is create an observable from scratch.
We do this by calling rx.
Observablecreate, and then create takes a observer function where we can define what the observable sends to the scriber.
To send values, you call observer next with the value you wanna send, and that value can be anything.
It could be a string, an object, or whatever you want.
Then to make the observable start emitting values, you call subscribe on it.
In this case, we'll take each value and just print it to the screen.
If we refresh our page you can see we get hello world printed to the screen.
So that's pretty cool but we don't normally need to create observables manually like this.
Let's say we wanted to create an observable from click events in the DOM.
We can call observable from event, pass it the document, and the event we want to observe, in this case, clicks.
So just like before, we subscribe to it, but this time we'll console log it just to show the full event object.
Each time we click the page, we get the mouse event logged along with all of its associated data.
If you work with asynchronous JavaScript, you're probably used to working with promises, and we can convert a promise directly into an observable.
So here we're just creating a Promise with a time out that resolves after one second.
The idea here is to simulate an API call or some other asynchronous operation.
To convert this Promise to an Observable, we just call Observable from Promise and pass it the Promise.
This is extremely useful when you're working with a JavaScript library that's built on promises.
You can also convert the observable back to a promise by calling to promise on it.
So when we subscribe to this observable, we get a one second delay, and then it prints resolved on the page.
We can also create a timer by calling observable timer with the amount of milliseconds we wanna wind it up for.
To start the timer, we just call subscribe on it and then it will emit a value once the timer runs out.
So we refresh The page and one second later, our timer runs out.
If we want a timer that keeps repeating, we can use an interval which emits a value after the specified time frame.
So every 1,000 milliseconds, we'll get a new value emitted.
In this case here, we'll print out a date with the number of seconds in the minute to show how this works.
We reload the page and then every second we get a new value emitted from the observable.
Now I'm gonna show you one last way to create an observable.
There's actually more ways than this, but I think this Covers the basics for now.
So we'll do observable of, which allows us to pass any static value we want to the observable.
So we'll go ahead and pass it a string, an array, a number, a boolean, and an object.
This example shows how any type of data can be stream, which is an important concept to keep in mind when building reactive software.
The next concept we'll look at is hot versus cold observables.
A cold observable is basically just an observable where the data is created inside of it.
So this means it won't actually create the the underlying data until something subscribes to it.
Inside this observable, I'm just generating a random number, and then I'll create 2 different subscribers.
And you might intuitively think that they should get the same value.
But what happens is the random number gets generated once the subscription starts, so each subscriber gets a different number.
That's how you know you're working with a cold observable.
But you can make an observable hot by simply building that value outside of the observable itself.
So here we set the random number outside the observable and then pass it in as a variable.
Reload the page, and then we'll see both subscribers get the same random number.
That technically makes our observable hot, but there is a way to do this without decoupling the data from the observable itself.
So we'll put the random number back in the observable, Then we'll create a new hot observable by calling publish on the cold observable.
This tells it only to emit data once we call the corresponding connect method on it.
So we'll build the subscriptions and at this point nothing will happen, then call connect on the hot observable and that will trigger these subscriptions to emit data and this time it'll be shared between the 2 of them.
And we can verify this by reloading the page and they should get the same random number.
The next thing you should know is how to complete an observable.
When the observable has reached the end of its life cycle it will send a completed signal.
We can see this with a timer using the finally operator which will run the code once the observable is completed.
In this case, it will be completed after one second, so we subscribe and then we get the all done signal back.
However, there are other observables that won't complete automatically and in some cases this can result in memory leaks if it's a very data intensive stream.
Here we have an interval which doesn't complete on its own so what we do is subscribe to it first then set a time out for 3 seconds and call unsubscribe.
This manually forces the observable to send the complete signal.
There's also more clever ways to do this which we're gonna see a little bit later in the lesson.
Now we're going to look at a whole bunch of RxJS operators starting with map.
Map allows you to transform the emitted value based on some underlying logic.
In this case, we created an observable of some numbers, and we're going to transform them to their logarithm.
So when we subscribe, instead of getting the actual numbers, we get the log of that number.
A more practical example for app developers is when you send an API request that responds in JSON.
You need to convert the JSON string to JavaScript.
So what you can do is use the map operator to run JSON parse on that string from the API.
Then the observable will emit JavaScript grip objects that you can actually use in your app.
The next operator we're going to look at is do.
This will allow us to execute code without affecting the underlying observable.
So we create an observable of a couple strings, and then we'll print out their names as they first appear.
Then we'll transform them to upper case, and then we'll print them again.
When we actually run this code, you can see that it gives us a glimpse into the observable data at any given point in time.
So here we see the original value and the upper case value.
Now let's take a look at filter.
This does pretty much what you'd expect.
You give it a condition and only values meeting that condition make it through.
So here we have an observable of a bunch of positive and negative numbers and we'll filter it to only show the positive numbers.
So only values greater than or equal to 0 will be displayed and we reload the page and we only see the positive numbers.
If we flip greater than to less than, then we get only the negative numbers displayed.
Using this same example, I'm going to show you the first and last operator.
The first operator will just take the very first element from the observable.
In this case, the first element is negative 3, so that's what we see here on the screen.
We can also do the inverse of this with the last operator and negative 2 is the last element, so we'll see it updated to negative 2.
Now let's take a look at debounce and throttle.
These two operators allow you to deal with events that emit way more values than you actually need.
The mouse move event is a perfect example in the DOM.
So we'll subscribe to the mouse event, and then we'll print the type of event here on the screen.
Let's first do this without any throttling or debouncing.
You can see it only takes about 2 seconds to get hundreds of events printed here on the screen.
We can use throttle to get the very first event and then set a delay before it starts emitting any other events.
In this case we'll use the throttle Time helper and pass it 1,000 milliseconds.
So now if we mouse over the screen, we'll get the first event and then it will wait at least one second before sending any additional events.
Debounce does almost the same exact thing, but instead of giving us the first event, it gives us the last event.
So first we mouse over and there's a delay, Then after that delay, it will emit the most recent event.
Debounce is especially useful when you wanna make sure the user has stopped doing something such as typing in an autocomplete or or something similar.
Now we're going to move on to the scan operator.
This one seems confusing at first, but it's actually very simple.
We're going to do this in the context of a video game.
So first, we're gonna subscribe to the click events in the browser.
And then for each click, we're gonna assign a random number that's gonna represent the score for that click.
Then we'll use the do operator to print that score on the screen.
And then we'll use scan to keep a running total of the high score, which is just the combined score of all the clicks.
So scan is just keeping a running total of each emitted value from the observable.
It works just like the array reduce function in vanilla JavaScript.
So we'll go ahead and print out the high score here and we should see it get increasingly larger with each additional click.
So on the first click, the high score and the click score are the same, and then the high score gets increasingly larger with each additional click.
Now let's move on to switch map.
This operator is especially useful when you have one observable that you need a value from before you can get a second observable.
In this example, we have an observable of clicks, but we actually don't care about the click data.
We want to start an interval timer after each click.
So on the first click, the interval should start and then when we get a new click, it'll reset the interval back to 0.
So we'll go ahead and click the page and then we'll let the interval Count up to 6 and then click again, and it'll reset back to 0.
Switch map is commonly used in app development when you have an observable of, say, a user ID And then you need that user ID first before querying a database for that user's data.
The next operator is take until.
This one allows us to complete an observable based on the value of another observable.
So here we have an interval and a timer.
The interval is going to emit values every 500 milliseconds until the timer runs out after 2 seconds.
This This is a clever way to unsubscribe from data without actually having to call unsubscribe on the observable itself.
So here we get The first few emitted values, then the timer runs out, and so it logs complete.
A closely related operator is take while.
This one will tell the observable to emit values until a certain condition turns true.
In this example, we have a collection of names and we want to stop the observable once it reaches the name of Doug.
In other words, we want it to take values while the name does not equal Doug.
Then we'll use the finally operator to verify that the observable completed successfully.
So when we run this in the browser, we can see we only get the values that came before Doug.
Now let's look at a few ways we can combine Observables starting with Zip.
Zip is something that might be useful if you have 2 observables that are the same length and connected in some kind of way.
So here we have observables yin and yang, And we're going to combine them with zip which will combine them into arrays based on their index position in the observable.
So peanut butter will be matched with jelly, wine with cheese, rainbows with unicorns.
Another way to merge observables is with fork join.
This one will wait for both of the observables to complete, and then it will combine the last two values together.
So I'm going to put a delay on the yang observable.
Then we'll use the fork join operator to combine them just like Zip.
But this time, we should see a 2 second delay And then only the last two values, rainbows and unicorns, should be emitted.
This operator is useful if you have a bunch of related API calls and you wanna wait for all of them to resolve before sending any data through to the UI.
Now we're going to look at Catch for handling errors.
In this example, I create a new observable from scratch, but in the middle of it, I throw an error.
When we get errors in the real world, we want to be able to catch them and then do some error handling.
In this case, we'll use the catch operator to complete the observable and just print out the error.
So notice that we get the first three values in the observable, but the very last one doesn't get emitted.
Overall, the idea is very similar to how promises work in JavaScript.
We also have a useful retry operator that will rerun the observable as many times as we want when an error has occurred.
So right after catch, we can add retry and in this case we'll retry it twice.
When we run it this time, we'll get the same sequence of events, but they'll happen 3 times.
The initial run plus the 2 retries.
So that's all the operators I'm gonna cover for today.
There's tons more in RxJS, But I think these are some of the most useful and powerful ones that you'll find.
We just have one more topic to cover and that's the RxJS subject.
A subject is just an observable with a few extra bonus features.
It has the ability to emit new data to its subscribers by acting as a proxy to some other data source.
This will make more sense after the next couple examples.
So here we have a plain observable, and we're going to convert it to a subject.
When we subscribe to it, it emits the values just like a normal observable would.
But the real benefit of subject is to be able to call next on it.
So what we do is create a new subject, and then we'll create a couple subscriptions to it.
And then we can just call subject next with some value.
That's not something you can do on a normal observable.
Then we'll set another next call inside of a time out.
So the main benefit of a subject is being able to broadcast new values to subscribers without having to rely on some source data.
To build on this topic, we're gonna look at one last thing, and that's multicast.
It's used to send values to multiple subscribers, but not any related side effects.
So we create a data source that is the click events happening in the DOM, and then we use the do operator Print, do one time.
This is an example of a side effect.
Imagine we had a 100 subscribers, it would run this code for every single one of them.
So if you had a 100 clicks and a 100 subscribers, this code would run 10000 times.
What we actually want is for it to only run on the 100 clicks coming from the source observable.
We can do this by calling multicast on the original observable full and have it return a new subject.
Then we can add a couple of subscriptions to the subject.
Then lastly, we need to call connect on that subject.
When we start clicking in the DOM, we'll see that we get the values sent to the Scribers and the side effect only runs once even though there's multiple subscribers.
This could be highly beneficial if you have multiple subscribers to a single data source that is running some sort of side effect.
That's it for my RxJS quick start.
If this video helped you, please like and subscribe.
And if you wanna get the full source code and additional commentary, head over to angular firebase.com.
Thanks for watching, and I'll see you next time.

Speaker 0: ReactiveX has revolutionized the way modern developers think about building apps. It allows us to treat all data as a stream as it unfolds through the dimension of time. In this lesson, I'm gonna cover about 25 different ways you can use RxJS so you have a solid foundation to use it in your own projects. For this tutorial, I've just created a basic HTML page and imported the RxJS script from a CDN in the head of that page. Then we'll write all of our custom code in this lesson dot j s file and import that in the body of the page.

Then inside lesson JS, I'm creating a helper function that will just Append the results from an observable to the browser on the right side here. So when you see me use the print function, it's to add the values to the browser here on the right. The first thing we're gonna talk about is the observable, and I think the easiest way to think about it is just an array that gets built over time. Then Then you can loop over this array in the dimension of time by subscribing to it. The first thing we're gonna do is create an observable from scratch.

We do this by calling rx. Observablecreate, and then create takes a observer function where we can define what the observable sends to the scriber. To send values, you call observer next with the value you wanna send, and that value can be anything. It could be a string, an object, or whatever you want. Then to make the observable start emitting values, you call subscribe on it.

In this case, we'll take each value and just print it to the screen. If we refresh our page you can see we get hello world printed to the screen. So that's pretty cool but we don't normally need to create observables manually like this. Let's say we wanted to create an observable from click events in the DOM. We can call observable from event, pass it the document, and the event we want to observe, in this case, clicks.

So just like before, we subscribe to it, but this time we'll console log it just to show the full event object. Each time we click the page, we get the mouse event logged along with all of its associated data. If you work with asynchronous JavaScript, you're probably used to working with promises, and we can convert a promise directly into an observable. So here we're just creating a Promise with a time out that resolves after one second. The idea here is to simulate an API call or some other asynchronous operation.

To convert this Promise to an Observable, we just call Observable from Promise and pass it the Promise. This is extremely useful when you're working with a JavaScript library that's built on promises. You can also convert the observable back to a promise by calling to promise on it. So when we subscribe to this observable, we get a one second delay, and then it prints resolved on the page. We can also create a timer by calling observable timer with the amount of milliseconds we wanna wind it up for.

To start the timer, we just call subscribe on it and then it will emit a value once the timer runs out. So we refresh The page and one second later, our timer runs out. If we want a timer that keeps repeating, we can use an interval which emits a value after the specified time frame. So every 1,000 milliseconds, we'll get a new value emitted. In this case here, we'll print out a date with the number of seconds in the minute to show how this works.

We reload the page and then every second we get a new value emitted from the observable. Now I'm gonna show you one last way to create an observable. There's actually more ways than this, but I think this Covers the basics for now. So we'll do observable of, which allows us to pass any static value we want to the observable. So we'll go ahead and pass it a string, an array, a number, a boolean, and an object.

This example shows how any type of data can be stream, which is an important concept to keep in mind when building reactive software. The next concept we'll look at is hot versus cold observables. A cold observable is basically just an observable where the data is created inside of it. So this means it won't actually create the the underlying data until something subscribes to it. Inside this observable, I'm just generating a random number, and then I'll create 2 different subscribers.

And you might intuitively think that they should get the same value. But what happens is the random number gets generated once the subscription starts, so each subscriber gets a different number. That's how you know you're working with a cold observable. But you can make an observable hot by simply building that value outside of the observable itself. So here we set the random number outside the observable and then pass it in as a variable.

Reload the page, and then we'll see both subscribers get the same random number. That technically makes our observable hot, but there is a way to do this without decoupling the data from the observable itself. So we'll put the random number back in the observable, Then we'll create a new hot observable by calling publish on the cold observable. This tells it only to emit data once we call the corresponding connect method on it. So we'll build the subscriptions and at this point nothing will happen, then call connect on the hot observable and that will trigger these subscriptions to emit data and this time it'll be shared between the 2 of them.

And we can verify this by reloading the page and they should get the same random number. The next thing you should know is how to complete an observable. When the observable has reached the end of its life cycle it will send a completed signal. We can see this with a timer using the finally operator which will run the code once the observable is completed. In this case, it will be completed after one second, so we subscribe and then we get the all done signal back.

However, there are other observables that won't complete automatically and in some cases this can result in memory leaks if it's a very data intensive stream. Here we have an interval which doesn't complete on its own so what we do is subscribe to it first then set a time out for 3 seconds and call unsubscribe. This manually forces the observable to send the complete signal. There's also more clever ways to do this which we're gonna see a little bit later in the lesson. Now we're going to look at a whole bunch of RxJS operators starting with map.

Map allows you to transform the emitted value based on some underlying logic. In this case, we created an observable of some numbers, and we're going to transform them to their logarithm. So when we subscribe, instead of getting the actual numbers, we get the log of that number. A more practical example for app developers is when you send an API request that responds in JSON. You need to convert the JSON string to JavaScript.

So what you can do is use the map operator to run JSON parse on that string from the API. Then the observable will emit JavaScript grip objects that you can actually use in your app. The next operator we're going to look at is do. This will allow us to execute code without affecting the underlying observable. So we create an observable of a couple strings, and then we'll print out their names as they first appear.

Then we'll transform them to upper case, and then we'll print them again. When we actually run this code, you can see that it gives us a glimpse into the observable data at any given point in time. So here we see the original value and the upper case value. Now let's take a look at filter. This does pretty much what you'd expect.

You give it a condition and only values meeting that condition make it through. So here we have an observable of a bunch of positive and negative numbers and we'll filter it to only show the positive numbers. So only values greater than or equal to 0 will be displayed and we reload the page and we only see the positive numbers. If we flip greater than to less than, then we get only the negative numbers displayed. Using this same example, I'm going to show you the first and last operator.

The first operator will just take the very first element from the observable. In this case, the first element is negative 3, so that's what we see here on the screen. We can also do the inverse of this with the last operator and negative 2 is the last element, so we'll see it updated to negative 2. Now let's take a look at debounce and throttle. These two operators allow you to deal with events that emit way more values than you actually need.

The mouse move event is a perfect example in the DOM. So we'll subscribe to the mouse event, and then we'll print the type of event here on the screen. Let's first do this without any throttling or debouncing. You can see it only takes about 2 seconds to get hundreds of events printed here on the screen. We can use throttle to get the very first event and then set a delay before it starts emitting any other events.

In this case we'll use the throttle Time helper and pass it 1,000 milliseconds. So now if we mouse over the screen, we'll get the first event and then it will wait at least one second before sending any additional events. Debounce does almost the same exact thing, but instead of giving us the first event, it gives us the last event. So first we mouse over and there's a delay, Then after that delay, it will emit the most recent event. Debounce is especially useful when you wanna make sure the user has stopped doing something such as typing in an autocomplete or or something similar.

Now we're going to move on to the scan operator. This one seems confusing at first, but it's actually very simple. We're going to do this in the context of a video game. So first, we're gonna subscribe to the click events in the browser. And then for each click, we're gonna assign a random number that's gonna represent the score for that click.

Then we'll use the do operator to print that score on the screen. And then we'll use scan to keep a running total of the high score, which is just the combined score of all the clicks. So scan is just keeping a running total of each emitted value from the observable. It works just like the array reduce function in vanilla JavaScript. So we'll go ahead and print out the high score here and we should see it get increasingly larger with each additional click.

So on the first click, the high score and the click score are the same, and then the high score gets increasingly larger with each additional click. Now let's move on to switch map. This operator is especially useful when you have one observable that you need a value from before you can get a second observable. In this example, we have an observable of clicks, but we actually don't care about the click data. We want to start an interval timer after each click.

So on the first click, the interval should start and then when we get a new click, it'll reset the interval back to 0. So we'll go ahead and click the page and then we'll let the interval Count up to 6 and then click again, and it'll reset back to 0. Switch map is commonly used in app development when you have an observable of, say, a user ID And then you need that user ID first before querying a database for that user's data. The next operator is take until. This one allows us to complete an observable based on the value of another observable.

So here we have an interval and a timer. The interval is going to emit values every 500 milliseconds until the timer runs out after 2 seconds. This This is a clever way to unsubscribe from data without actually having to call unsubscribe on the observable itself. So here we get The first few emitted values, then the timer runs out, and so it logs complete. A closely related operator is take while.

This one will tell the observable to emit values until a certain condition turns true. In this example, we have a collection of names and we want to stop the observable once it reaches the name of Doug. In other words, we want it to take values while the name does not equal Doug. Then we'll use the finally operator to verify that the observable completed successfully. So when we run this in the browser, we can see we only get the values that came before Doug.

Now let's look at a few ways we can combine Observables starting with Zip. Zip is something that might be useful if you have 2 observables that are the same length and connected in some kind of way. So here we have observables yin and yang, And we're going to combine them with zip which will combine them into arrays based on their index position in the observable. So peanut butter will be matched with jelly, wine with cheese, rainbows with unicorns. Another way to merge observables is with fork join.

This one will wait for both of the observables to complete, and then it will combine the last two values together. So I'm going to put a delay on the yang observable. Then we'll use the fork join operator to combine them just like Zip. But this time, we should see a 2 second delay And then only the last two values, rainbows and unicorns, should be emitted. This operator is useful if you have a bunch of related API calls and you wanna wait for all of them to resolve before sending any data through to the UI.

Now we're going to look at Catch for handling errors. In this example, I create a new observable from scratch, but in the middle of it, I throw an error. When we get errors in the real world, we want to be able to catch them and then do some error handling. In this case, we'll use the catch operator to complete the observable and just print out the error. So notice that we get the first three values in the observable, but the very last one doesn't get emitted.

Overall, the idea is very similar to how promises work in JavaScript. We also have a useful retry operator that will rerun the observable as many times as we want when an error has occurred. So right after catch, we can add retry and in this case we'll retry it twice. When we run it this time, we'll get the same sequence of events, but they'll happen 3 times. The initial run plus the 2 retries.

So that's all the operators I'm gonna cover for today. There's tons more in RxJS, But I think these are some of the most useful and powerful ones that you'll find. We just have one more topic to cover and that's the RxJS subject. A subject is just an observable with a few extra bonus features. It has the ability to emit new data to its subscribers by acting as a proxy to some other data source.

This will make more sense after the next couple examples. So here we have a plain observable, and we're going to convert it to a subject. When we subscribe to it, it emits the values just like a normal observable would. But the real benefit of subject is to be able to call next on it. So what we do is create a new subject, and then we'll create a couple subscriptions to it.

And then we can just call subject next with some value. That's not something you can do on a normal observable. Then we'll set another next call inside of a time out. So the main benefit of a subject is being able to broadcast new values to subscribers without having to rely on some source data. To build on this topic, we're gonna look at one last thing, and that's multicast.

It's used to send values to multiple subscribers, but not any related side effects. So we create a data source that is the click events happening in the DOM, and then we use the do operator Print, do one time. This is an example of a side effect. Imagine we had a 100 subscribers, it would run this code for every single one of them. So if you had a 100 clicks and a 100 subscribers, this code would run 10000 times.

What we actually want is for it to only run on the 100 clicks coming from the source observable. We can do this by calling multicast on the original observable full and have it return a new subject. Then we can add a couple of subscriptions to the subject. Then lastly, we need to call connect on that subject. When we start clicking in the DOM, we'll see that we get the values sent to the Scribers and the side effect only runs once even though there's multiple subscribers.

This could be highly beneficial if you have multiple subscribers to a single data source that is running some sort of side effect. That's it for my RxJS quick start. If this video helped you, please like and subscribe. And if you wanna get the full source code and additional commentary, head over to angular firebase.com. Thanks for watching, and I'll see you next time.
ReactiveX has revolutionized the way modern developers think about building apps. It allows us to treat all data as a stream as it unfolds through the dimension of time. In this lesson, I'm gonna cover about 25 different ways you can use RxJS so you have a solid foundation to use it in your own projects.
software development
software
For this tutorial, I've just created a basic HTML page and imported the RxJS script from a CDN in the head of that page. Then we'll write all of our custom code in this lesson dot j s file and import that in the body of the page. Then inside lesson JS, I'm creating a helper function that will just Append the results from an observable to the browser on the right side here. So when you see me use the print function, it's to add the values to the browser here on the right. The first thing we're gonna talk about is the observable, and I think the easiest way to think about it is just an array that gets built over time. Then Then you can loop over this array in the dimension of time by subscribing to it. The first thing we're gonna do is create an observable from scratch. We do this by calling rx. Observablecreate, and then create takes a observer function where we can define what the observable sends to the scriber. To send values, you call observer next with the value you wanna send, and that value can be anything. It could be a string, an object, or whatever you want. Then to make the observable start emitting values, you call subscribe on it. In this case, we'll take each value and just print it to the screen.
programming
data
If we refresh our page you can see we get hello world printed to the screen. So that's pretty cool but we don't normally need to create observables manually like this. Let's say we wanted to create an observable from click events in the DOM. We can call observable from event, pass it the document, and the event we want to observe, in this case, clicks. So just like before, we subscribe to it, but this time we'll console log it just to show the full event object. Each time we click the page, we get the mouse event logged along with all of its associated data. If you work with asynchronous JavaScript, you're probably used to working with promises, and we can convert a promise directly into an observable. So here we're just creating a Promise with a time out that resolves after one second. The idea here is to simulate an API call or some other asynchronous operation. To convert this Promise to an Observable, we just call Observable from Promise and pass it the Promise. This is extremely useful when you're working with a JavaScript library that's built on promises. You can also convert the observable back to a promise by calling to promise on it. So when we subscribe to this observable, we get a one second delay, and then it prints resolved on the page. We can also create a timer by calling observable timer with the amount of milliseconds we wanna wind it up for. To start the timer, we just call subscribe on it and then it will emit a value once the timer runs out. So we refresh The page and one second later, our timer runs out. If we want a timer that keeps repeating, we can use an interval which emits a value after the specified time frame. So every 1,000 milliseconds, we'll get a new value emitted. In this case here, we'll print out a date with the number of seconds in the minute to show how this works. We reload the page and then every second we get a new value emitted from the observable.
Now I'm gonna show you one last way to create an observable. There's actually more ways than this, but I think this Covers the basics for now. So we'll do observable of, which allows us to pass any static value we want to the observable. So we'll go ahead and pass it a string, an array, a number, a boolean, and an object. This example shows how any type of data can be stream, which is an important concept to keep in mind when building reactive software. The next concept we'll look at is hot versus cold observables. A cold observable is basically just an observable where the data is created inside of it. So this means it won't actually create the the underlying data until something subscribes to it. Inside this observable, I'm just generating a random number, and then I'll create 2 different subscribers. And you might intuitively think that they should get the same value. But what happens is the random number gets generated once the subscription starts, so each subscriber gets a different number. That's how you know you're working with a cold observable. But you can make an observable hot by simply building that value outside of the observable itself. So here we set the random number outside the observable and then pass it in as a variable.
probability
data
programming
data analysis
data management
Reload the page, and then we'll see both subscribers get the same random number. That technically makes our observable hot, but there is a way to do this without decoupling the data from the observable itself.
So we'll put the random number back in the observable, Then we'll create a new hot observable by calling publish on the cold observable. This tells it only to emit data once we call the corresponding connect method on it. So we'll build the subscriptions and at this point nothing will happen, then call connect on the hot observable and that will trigger these subscriptions to emit data and this time it'll be shared between the 2 of them. And we can verify this by reloading the page and they should get the same random number.
internet
networking
streaming
The next thing you should know is how to complete an observable. When the observable has reached the end of its life cycle it will send a completed signal. We can see this with a timer using the finally operator which will run the code once the observable is completed. In this case, it will be completed after one second, so we subscribe and then we get the all done signal back. However, there are other observables that won't complete automatically and in some cases this can result in memory leaks if it's a very data intensive stream. Here we have an interval which doesn't complete on its own so what we do is subscribe to it first then set a time out for 3 seconds and call unsubscribe. This manually forces the observable to send the complete signal. There's also more clever ways to do this which we're gonna see a little bit later in the lesson. Now we're going to look at a whole bunch of RxJS operators starting with map. Map allows you to transform the emitted value based on some underlying logic. In this case, we created an observable of some numbers, and we're going to transform them to their logarithm. So when we subscribe, instead of getting the actual numbers, we get the log of that number. A more practical example for app developers is when you send an API request that responds in JSON. You need to convert the JSON string to JavaScript. So what you can do is use the map operator to run JSON parse on that string from the API. Then the observable will emit JavaScript grip objects that you can actually use in your app.
The next operator we're going to look at is do. This will allow us to execute code without affecting the underlying observable. So we create an observable of a couple strings, and then we'll print out their names as they first appear. Then we'll transform them to upper case, and then we'll print them again.
programming
operations
When we actually run this code, you can see that it gives us a glimpse into the observable data at any given point in time. So here we see the original value and the upper case value. Now let's take a look at filter. This does pretty much what you'd expect.
You give it a condition and only values meeting that condition make it through. So here we have an observable of a bunch of positive and negative numbers and we'll filter it to only show the positive numbers. So only values greater than or equal to 0 will be displayed and we reload the page and we only see the positive numbers.
mathematics
If we flip greater than to less than, then we get only the negative numbers displayed.
Using this same example, I'm going to show you the first and last operator. The first operator will just take the very first element from the observable. In this case, the first element is negative 3, so that's what we see here on the screen. We can also do the inverse of this with the last operator and negative 2 is the last element, so we'll see it updated to negative 2.
operations
mathematics
Now let's take a look at debounce and throttle. These two operators allow you to deal with events that emit way more values than you actually need.
The mouse move event is a perfect example in the DOM. So we'll subscribe to the mouse event, and then we'll print the type of event here on the screen. Let's first do this without any throttling or debouncing. You can see it only takes about 2 seconds to get hundreds of events printed here on the screen.
animation
We can use throttle to get the very first event and then set a delay before it starts emitting any other events. In this case we'll use the throttle Time helper and pass it 1,000 milliseconds. So now if we mouse over the screen, we'll get the first event and then it will wait at least one second before sending any additional events. Debounce does almost the same exact thing, but instead of giving us the first event, it gives us the last event. So first we mouse over and there's a delay, Then after that delay, it will emit the most recent event. Debounce is especially useful when you wanna make sure the user has stopped doing something such as typing in an autocomplete or or something similar.
Now we're going to move on to the scan operator. This one seems confusing at first, but it's actually very simple. We're going to do this in the context of a video game. So first, we're gonna subscribe to the click events in the browser. And then for each click, we're gonna assign a random number that's gonna represent the score for that click.
video gaming
programming
Then we'll use the do operator to print that score on the screen. And then we'll use scan to keep a running total of the high score, which is just the combined score of all the clicks. So scan is just keeping a running total of each emitted value from the observable.
programming
It works just like the array reduce function in vanilla JavaScript. So we'll go ahead and print out the high score here and we should see it get increasingly larger with each additional click. So on the first click, the high score and the click score are the same, and then the high score gets increasingly larger with each additional click.
Now let's move on to switch map. This operator is especially useful when you have one observable that you need a value from before you can get a second observable. In this example, we have an observable of clicks, but we actually don't care about the click data. We want to start an interval timer after each click.
operations
So on the first click, the interval should start and then when we get a new click, it'll reset the interval back to 0. So we'll go ahead and click the page and then we'll let the interval Count up to 6 and then click again, and it'll reset back to 0. Switch map is commonly used in app development when you have an observable of, say, a user ID And then you need that user ID first before querying a database for that user's data. The next operator is take until. This one allows us to complete an observable based on the value of another observable. So here we have an interval and a timer. The interval is going to emit values every 500 milliseconds until the timer runs out after 2 seconds. This This is a clever way to unsubscribe from data without actually having to call unsubscribe on the observable itself.
So here we get The first few emitted values, then the timer runs out, and so it logs complete. A closely related operator is take while. This one will tell the observable to emit values until a certain condition turns true. In this example, we have a collection of names and we want to stop the observable once it reaches the name of Doug.
operations
In other words, we want it to take values while the name does not equal Doug. Then we'll use the finally operator to verify that the observable completed successfully. So when we run this in the browser, we can see we only get the values that came before Doug. Now let's look at a few ways we can combine Observables starting with Zip.
programming
Zip is something that might be useful if you have 2 observables that are the same length and connected in some kind of way. So here we have observables yin and yang, And we're going to combine them with zip which will combine them into arrays based on their index position in the observable. So peanut butter will be matched with jelly, wine with cheese, rainbows with unicorns. Another way to merge observables is with fork join. This one will wait for both of the observables to complete, and then it will combine the last two values together. So I'm going to put a delay on the yang observable. Then we'll use the fork join operator to combine them just like Zip. But this time, we should see a 2 second delay And then only the last two values, rainbows and unicorns, should be emitted.
This operator is useful if you have a bunch of related API calls and you wanna wait for all of them to resolve before sending any data through to the UI. Now we're going to look at Catch for handling errors. In this example, I create a new observable from scratch, but in the middle of it, I throw an error.
programming
operations
When we get errors in the real world, we want to be able to catch them and then do some error handling. In this case, we'll use the catch operator to complete the observable and just print out the error. So notice that we get the first three values in the observable, but the very last one doesn't get emitted.
logic
Overall, the idea is very similar to how promises work in JavaScript. We also have a useful retry operator that will rerun the observable as many times as we want when an error has occurred. So right after catch, we can add retry and in this case we'll retry it twice.
When we run it this time, we'll get the same sequence of events, but they'll happen 3 times. The initial run plus the 2 retries. So that's all the operators I'm gonna cover for today. There's tons more in RxJS, But I think these are some of the most useful and powerful ones that you'll find.
operations
We just have one more topic to cover and that's the RxJS subject. A subject is just an observable with a few extra bonus features. It has the ability to emit new data to its subscribers by acting as a proxy to some other data source. This will make more sense after the next couple examples. So here we have a plain observable, and we're going to convert it to a subject. When we subscribe to it, it emits the values just like a normal observable would. But the real benefit of subject is to be able to call next on it. So what we do is create a new subject, and then we'll create a couple subscriptions to it. And then we can just call subject next with some value. That's not something you can do on a normal observable.
data
multimedia
publishing
media
Then we'll set another next call inside of a time out.
So the main benefit of a subject is being able to broadcast new values to subscribers without having to rely on some source data. To build on this topic, we're gonna look at one last thing, and that's multicast. It's used to send values to multiple subscribers, but not any related side effects.
media
multimedia
streaming
journalism
So we create a data source that is the click events happening in the DOM, and then we use the do operator Print, do one time. This is an example of a side effect. Imagine we had a 100 subscribers, it would run this code for every single one of them. So if you had a 100 clicks and a 100 subscribers, this code would run 10000 times. What we actually want is for it to only run on the 100 clicks coming from the source observable.
We can do this by calling multicast on the original observable full and have it return a new subject. Then we can add a couple of subscriptions to the subject. Then lastly, we need to call connect on that subject. When we start clicking in the DOM, we'll see that we get the values sent to the Scribers and the side effect only runs once even though there's multiple subscribers.
streaming
This could be highly beneficial if you have multiple subscribers to a single data source that is running some sort of side effect. That's it for my RxJS quick start.
If this video helped you, please like and subscribe. And if you wanna get the full source code and additional commentary, head over to angular firebase.com. Thanks for watching, and I'll see you next time.
youtube
ReactiveX has revolutionized the way modern developers think about building apps. It allows us to treat all data as a stream as it unfolds through the dimension of time. In this lesson, I'm gonna cover about 25 different ways you can use RxJS so you have a solid foundation to use it in your own projects. For this tutorial, I've just created a basic HTML page and imported the RxJS script from a CDN in the head of that page. Then we'll write all of our custom code in this lesson dot j s file and import that in the body of the page. Then inside lesson JS, I'm creating a helper function that will just Append the results from an observable to the browser on the right side here. So when you see me use the print function, it's to add the values to the browser here on the right. The first thing we're gonna talk about is the observable, and I think the easiest way to think about it is just an array that gets built over time. Then Then you can loop over this array in the dimension of time by subscribing to it. The first thing we're gonna do is create an observable from scratch. We do this by calling rx. Observablecreate, and then create takes a observer function where we can define what the observable sends to the scriber. To send values, you call observer next with the value you wanna send, and that value can be anything. It could be a string, an object, or whatever you want. Then to make the observable start emitting values, you call subscribe on it. In this case, we'll take each value and just print it to the screen. If we refresh our page you can see we get hello world printed to the screen. So that's pretty cool but we don't normally need to create observables manually like this. Let's say we wanted to create an observable from click events in the DOM. We can call observable from event, pass it the document, and the event we want to observe, in this case, clicks. So just like before, we subscribe to it, but this time we'll console log it just to show the full event object. Each time we click the page, we get the mouse event logged along with all of its associated data. If you work with asynchronous JavaScript, you're probably used to working with promises, and we can convert a promise directly into an observable. So here we're just creating a Promise with a time out that resolves after one second. The idea here is to simulate an API call or some other asynchronous operation. To convert this Promise to an Observable, we just call Observable from Promise and pass it the Promise. This is extremely useful when you're working with a JavaScript library that's built on promises. You can also convert the observable back to a promise by calling to promise on it. So when we subscribe to this observable, we get a one second delay, and then it prints resolved on the page. We can also create a timer by calling observable timer with the amount of milliseconds we wanna wind it up for. To start the timer, we just call subscribe on it and then it will emit a value once the timer runs out. So we refresh The page and one second later, our timer runs out. If we want a timer that keeps repeating, we can use an interval which emits a value after the specified time frame. So every 1,000 milliseconds, we'll get a new value emitted. In this case here, we'll print out a date with the number of seconds in the minute to show how this works. We reload the page and then every second we get a new value emitted from the observable. Now I'm gonna show you one last way to create an observable. There's actually more ways than this, but I think this Covers the basics for now. So we'll do observable of, which allows us to pass any static value we want to the observable. So we'll go ahead and pass it a string, an array, a number, a boolean, and an object. This example shows how any type of data can be stream, which is an important concept to keep in mind when building reactive software. The next concept we'll look at is hot versus cold observables. A cold observable is basically just an observable where the data is created inside of it. So this means it won't actually create the the underlying data until something subscribes to it. Inside this observable, I'm just generating a random number, and then I'll create 2 different subscribers. And you might intuitively think that they should get the same value. But what happens is the random number gets generated once the subscription starts, so each subscriber gets a different number. That's how you know you're working with a cold observable. But you can make an observable hot by simply building that value outside of the observable itself. So here we set the random number outside the observable and then pass it in as a variable. Reload the page, and then we'll see both subscribers get the same random number. That technically makes our observable hot, but there is a way to do this without decoupling the data from the observable itself. So we'll put the random number back in the observable, Then we'll create a new hot observable by calling publish on the cold observable. This tells it only to emit data once we call the corresponding connect method on it. So we'll build the subscriptions and at this point nothing will happen, then call connect on the hot observable and that will trigger these subscriptions to emit data and this time it'll be shared between the 2 of them. And we can verify this by reloading the page and they should get the same random number. The next thing you should know is how to complete an observable. When the observable has reached the end of its life cycle it will send a completed signal. We can see this with a timer using the finally operator which will run the code once the observable is completed. In this case, it will be completed after one second, so we subscribe and then we get the all done signal back. However, there are other observables that won't complete automatically and in some cases this can result in memory leaks if it's a very data intensive stream. Here we have an interval which doesn't complete on its own so what we do is subscribe to it first then set a time out for 3 seconds and call unsubscribe. This manually forces the observable to send the complete signal. There's also more clever ways to do this which we're gonna see a little bit later in the lesson. Now we're going to look at a whole bunch of RxJS operators starting with map. Map allows you to transform the emitted value based on some underlying logic. In this case, we created an observable of some numbers, and we're going to transform them to their logarithm. So when we subscribe, instead of getting the actual numbers, we get the log of that number. A more practical example for app developers is when you send an API request that responds in JSON. You need to convert the JSON string to JavaScript. So what you can do is use the map operator to run JSON parse on that string from the API. Then the observable will emit JavaScript grip objects that you can actually use in your app. The next operator we're going to look at is do. This will allow us to execute code without affecting the underlying observable. So we create an observable of a couple strings, and then we'll print out their names as they first appear. Then we'll transform them to upper case, and then we'll print them again. When we actually run this code, you can see that it gives us a glimpse into the observable data at any given point in time. So here we see the original value and the upper case value. Now let's take a look at filter. This does pretty much what you'd expect. You give it a condition and only values meeting that condition make it through. So here we have an observable of a bunch of positive and negative numbers and we'll filter it to only show the positive numbers. So only values greater than or equal to 0 will be displayed and we reload the page and we only see the positive numbers. If we flip greater than to less than, then we get only the negative numbers displayed. Using this same example, I'm going to show you the first and last operator. The first operator will just take the very first element from the observable. In this case, the first element is negative 3, so that's what we see here on the screen. We can also do the inverse of this with the last operator and negative 2 is the last element, so we'll see it updated to negative 2. Now let's take a look at debounce and throttle. These two operators allow you to deal with events that emit way more values than you actually need. The mouse move event is a perfect example in the DOM. So we'll subscribe to the mouse event, and then we'll print the type of event here on the screen. Let's first do this without any throttling or debouncing. You can see it only takes about 2 seconds to get hundreds of events printed here on the screen. We can use throttle to get the very first event and then set a delay before it starts emitting any other events. In this case we'll use the throttle Time helper and pass it 1,000 milliseconds. So now if we mouse over the screen, we'll get the first event and then it will wait at least one second before sending any additional events. Debounce does almost the same exact thing, but instead of giving us the first event, it gives us the last event. So first we mouse over and there's a delay, Then after that delay, it will emit the most recent event. Debounce is especially useful when you wanna make sure the user has stopped doing something such as typing in an autocomplete or or something similar. Now we're going to move on to the scan operator. This one seems confusing at first, but it's actually very simple. We're going to do this in the context of a video game. So first, we're gonna subscribe to the click events in the browser. And then for each click, we're gonna assign a random number that's gonna represent the score for that click. Then we'll use the do operator to print that score on the screen. And then we'll use scan to keep a running total of the high score, which is just the combined score of all the clicks. So scan is just keeping a running total of each emitted value from the observable. It works just like the array reduce function in vanilla JavaScript. So we'll go ahead and print out the high score here and we should see it get increasingly larger with each additional click. So on the first click, the high score and the click score are the same, and then the high score gets increasingly larger with each additional click. Now let's move on to switch map. This operator is especially useful when you have one observable that you need a value from before you can get a second observable. In this example, we have an observable of clicks, but we actually don't care about the click data. We want to start an interval timer after each click. So on the first click, the interval should start and then when we get a new click, it'll reset the interval back to 0. So we'll go ahead and click the page and then we'll let the interval Count up to 6 and then click again, and it'll reset back to 0. Switch map is commonly used in app development when you have an observable of, say, a user ID And then you need that user ID first before querying a database for that user's data. The next operator is take until. This one allows us to complete an observable based on the value of another observable. So here we have an interval and a timer. The interval is going to emit values every 500 milliseconds until the timer runs out after 2 seconds. This This is a clever way to unsubscribe from data without actually having to call unsubscribe on the observable itself. So here we get The first few emitted values, then the timer runs out, and so it logs complete. A closely related operator is take while. This one will tell the observable to emit values until a certain condition turns true. In this example, we have a collection of names and we want to stop the observable once it reaches the name of Doug. In other words, we want it to take values while the name does not equal Doug. Then we'll use the finally operator to verify that the observable completed successfully. So when we run this in the browser, we can see we only get the values that came before Doug. Now let's look at a few ways we can combine Observables starting with Zip. Zip is something that might be useful if you have 2 observables that are the same length and connected in some kind of way. So here we have observables yin and yang, And we're going to combine them with zip which will combine them into arrays based on their index position in the observable. So peanut butter will be matched with jelly, wine with cheese, rainbows with unicorns. Another way to merge observables is with fork join. This one will wait for both of the observables to complete, and then it will combine the last two values together. So I'm going to put a delay on the yang observable. Then we'll use the fork join operator to combine them just like Zip. But this time, we should see a 2 second delay And then only the last two values, rainbows and unicorns, should be emitted. This operator is useful if you have a bunch of related API calls and you wanna wait for all of them to resolve before sending any data through to the UI. Now we're going to look at Catch for handling errors. In this example, I create a new observable from scratch, but in the middle of it, I throw an error. When we get errors in the real world, we want to be able to catch them and then do some error handling. In this case, we'll use the catch operator to complete the observable and just print out the error. So notice that we get the first three values in the observable, but the very last one doesn't get emitted. Overall, the idea is very similar to how promises work in JavaScript. We also have a useful retry operator that will rerun the observable as many times as we want when an error has occurred. So right after catch, we can add retry and in this case we'll retry it twice. When we run it this time, we'll get the same sequence of events, but they'll happen 3 times. The initial run plus the 2 retries. So that's all the operators I'm gonna cover for today. There's tons more in RxJS, But I think these are some of the most useful and powerful ones that you'll find. We just have one more topic to cover and that's the RxJS subject. A subject is just an observable with a few extra bonus features. It has the ability to emit new data to its subscribers by acting as a proxy to some other data source. This will make more sense after the next couple examples. So here we have a plain observable, and we're going to convert it to a subject. When we subscribe to it, it emits the values just like a normal observable would. But the real benefit of subject is to be able to call next on it. So what we do is create a new subject, and then we'll create a couple subscriptions to it. And then we can just call subject next with some value. That's not something you can do on a normal observable. Then we'll set another next call inside of a time out. So the main benefit of a subject is being able to broadcast new values to subscribers without having to rely on some source data. To build on this topic, we're gonna look at one last thing, and that's multicast. It's used to send values to multiple subscribers, but not any related side effects. So we create a data source that is the click events happening in the DOM, and then we use the do operator Print, do one time. This is an example of a side effect. Imagine we had a 100 subscribers, it would run this code for every single one of them. So if you had a 100 clicks and a 100 subscribers, this code would run 10000 times. What we actually want is for it to only run on the 100 clicks coming from the source observable. We can do this by calling multicast on the original observable full and have it return a new subject. Then we can add a couple of subscriptions to the subject. Then lastly, we need to call connect on that subject. When we start clicking in the DOM, we'll see that we get the values sent to the Scribers and the side effect only runs once even though there's multiple subscribers. This could be highly beneficial if you have multiple subscribers to a single data source that is running some sort of side effect. That's it for my RxJS quick start. If this video helped you, please like and subscribe. And if you wanna get the full source code and additional commentary, head over to angular firebase.com. Thanks for watching, and I'll see you next time.
ReactiveX
reactivex
has
has
revolutionized
revolutionized
the
the
way
way
modern
modern
developers
developers
think
think
about
about
building
building
apps.
apps
It
it
allows
allows
us
us
to
to
treat
treat
all
all
data
data
as
as
a
a
stream
stream
as
as
it
it
unfolds
unfolds
through
through
the
the
dimension
dimension
of
of
time.
time
In
in
this
this
lesson,
lesson
I'm
i'm
gonna
gonna
cover
cover
about
about
25
25
different
different
ways
ways
you
you
can
can
use
use
RxJS
rxjs
so
so
you
you
have
have
a
a
solid
solid
foundation
foundation
to
to
use
use
it
it
in
in
your
your
own
own
projects.
projects
For
for
this
this
tutorial,
tutorial
I've
i've
just
just
created
created
a
a
basic
basic
HTML
html
page
page
and
and
imported
imported
the
the
RxJS
rxjs
script
script
from
from
a
a
CDN
cdn
in
in
the
the
head
head
of
of
that
that
page.
page
Then
then
we'll
we'll
write
write
all
all
of
of
our
our
custom
custom
code
code
in
in
this
this
lesson
lesson
dot
dot
j
j
s
s
file
file
and
and
import
import
that
that
in
in
the
the
body
body
of
of
the
the
page.
page
Then
then
inside
inside
lesson
lesson
JS,
js
I'm
i'm
creating
creating
a
a
helper
helper
function
function
that
that
will
will
just
just
Append
append
the
the
results
results
from
from
an
an
observable
observable
to
to
the
the
browser
browser
on
on
the
the
right
right
side
side
here.
here
So
so
when
when
you
you
see
see
me
me
use
use
the
the
print
print
function,
function
it's
it's
to
to
add
add
the
the
values
values
to
to
the
the
browser
browser
here
here
on
on
the
the
right.
right
The
the
first
first
thing
thing
we're
we're
gonna
gonna
talk
talk
about
about
is
is
the
the
observable,
observable
and
and
I
i
think
think
the
the
easiest
easiest
way
way
to
to
think
think
about
about
it
it
is
is
just
just
an
an
array
array
that
that
gets
gets
built
built
over
over
time.
time
Then
then
Then
then
you
you
can
can
loop
loop
over
over
this
this
array
array
in
in
the
the
dimension
dimension
of
of
time
time
by
by
subscribing
subscribing
to
to
it.
it
The
the
first
first
thing
thing
we're
we're
gonna
gonna
do
do
is
is
create
create
an
an
observable
observable
from
from
scratch.
scratch
We
we
do
do
this
this
by
by
calling
calling
rx.
rx
Observablecreate,
observablecreate
and
and
then
then
create
create
takes
takes
a
a
observer
observer
function
function
where
where
we
we
can
can
define
define
what
what
the
the
observable
observable
sends
sends
to
to
the
the
scriber.
scriber
To
to
send
send
values,
values
you
you
call
call
observer
observer
next
next
with
with
the
the
value
value
you
you
wanna
wanna
send,
send
and
and
that
that
value
value
can
can
be
be
anything.
anything
It
it
could
could
be
be
a
a
string,
string
an
an
object,
object
or
or
whatever
whatever
you
you
want.
want
Then
then
to
to
make
make
the
the
observable
observable
start
start
emitting
emitting
values,
values
you
you
call
call
subscribe
subscribe
on
on
it.
it
In
in
this
this
case,
case
we'll
we'll
take
take
each
each
value
value
and
and
just
just
print
print
it
it
to
to
the
the
screen.
screen
If
if
we
we
refresh
refresh
our
our
page
page
you
you
can
can
see
see
we
we
get
get
hello
hello
world
world
printed
printed
to
to
the
the
screen.
screen
So
so
that's
that's
pretty
pretty
cool
cool
but
but
we
we
don't
don't
normally
normally
need
need
to
to
create
create
observables
observables
manually
manually
like
like
this.
this
Let's
let's
say
say
we
we
wanted
wanted
to
to
create
create
an
an
observable
observable
from
from
click
click
events
events
in
in
the
the
DOM.
dom
We
we
can
can
call
call
observable
observable
from
from
event,
event
pass
pass
it
it
the
the
document,
document
and
and
the
the
event
event
we
we
want
want
to
to
observe,
observe
in
in
this
this
case,
case
clicks.
clicks
So
so
just
just
like
like
before,
before
we
we
subscribe
subscribe
to
to
it,
it
but
but
this
this
time
time
we'll
we'll
console
console
log
log
it
it
just
just
to
to
show
show
the
the
full
full
event
event
object.
object
Each
each
time
time
we
we
click
click
the
the
page,
page
we
we
get
get
the
the
mouse
mouse
event
event
logged
logged
along
along
with
with
all
all
of
of
its
its
associated
associated
data.
data
If
if
you
you
work
work
with
with
asynchronous
asynchronous
JavaScript,
javascript
you're
you're
probably
probably
used
used
to
to
working
working
with
with
promises,
promises
and
and
we
we
can
can
convert
convert
a
a
promise
promise
directly
directly
into
into
an
an
observable.
observable
So
so
here
here
we're
we're
just
just
creating
creating
a
a
Promise
promise
with
with
a
a
time
time
out
out
that
that
resolves
resolves
after
after
one
one
second.
second
The
the
idea
idea
here
here
is
is
to
to
simulate
simulate
an
an
API
api
call
call
or
or
some
some
other
other
asynchronous
asynchronous
operation.
operation
To
to
convert
convert
this
this
Promise
promise
to
to
an
an
Observable,
observable
we
we
just
just
call
call
Observable
observable
from
from
Promise
promise
and
and
pass
pass
it
it
the
the
Promise.
promise
This
this
is
is
extremely
extremely
useful
useful
when
when
you're
you're
working
working
with
with
a
a
JavaScript
javascript
library
library
that's
that's
built
built
on
on
promises.
promises
You
you
can
can
also
also
convert
convert
the
the
observable
observable
back
back
to
to
a
a
promise
promise
by
by
calling
calling
to
to
promise
promise
on
on
it.
it
So
so
when
when
we
we
subscribe
subscribe
to
to
this
this
observable,
observable
we
we
get
get
a
a
one
one
second
second
delay,
delay
and
and
then
then
it
it
prints
prints
resolved
resolved
on
on
the
the
page.
page
We
we
can
can
also
also
create
create
a
a
timer
timer
by
by
calling
calling
observable
observable
timer
timer
with
with
the
the
amount
amount
of
of
milliseconds
milliseconds
we
we
wanna
wanna
wind
wind
it
it
up
up
for.
for
To
to
start
start
the
the
timer,
timer
we
we
just
just
call
call
subscribe
subscribe
on
on
it
it
and
and
then
then
it
it
will
will
emit
emit
a
a
value
value
once
once
the
the
timer
timer
runs
runs
out.
out
So
so
we
we
refresh
refresh
The
the
page
page
and
and
one
one
second
second
later,
later
our
our
timer
timer
runs
runs
out.
out
If
if
we
we
want
want
a
a
timer
timer
that
that
keeps
keeps
repeating,
repeating
we
we
can
can
use
use
an
an
interval
interval
which
which
emits
emits
a
a
value
value
after
after
the
the
specified
specified
time
time
frame.
frame
So
so
every
every
1,000
1,000
milliseconds,
milliseconds
we'll
we'll
get
get
a
a
new
new
value
value
emitted.
emitted
In
in
this
this
case
case
here,
here
we'll
we'll
print
print
out
out
a
a
date
date
with
with
the
the
number
number
of
of
seconds
seconds
in
in
the
the
minute
minute
to
to
show
show
how
how
this
this
works.
works
We
we
reload
reload
the
the
page
page
and
and
then
then
every
every
second
second
we
we
get
get
a
a
new
new
value
value
emitted
emitted
from
from
the
the
observable.
observable
Now
now
I'm
i'm
gonna
gonna
show
show
you
you
one
one
last
last
way
way
to
to
create
create
an
an
observable.
observable
There's
there's
actually
actually
more
more
ways
ways
than
than
this,
this
but
but
I
i
think
think
this
this
Covers
covers
the
the
basics
basics
for
for
now.
now
So
so
we'll
we'll
do
do
observable
observable
of,
of
which
which
allows
allows
us
us
to
to
pass
pass
any
any
static
static
value
value
we
we
want
want
to
to
the
the
observable.
observable
So
so
we'll
we'll
go
go
ahead
ahead
and
and
pass
pass
it
it
a
a
string,
string
an
an
array,
array
a
a
number,
number
a
a
boolean,
boolean
and
and
an
an
object.
object
This
this
example
example
shows
shows
how
how
any
any
type
type
of
of
data
data
can
can
be
be
stream,
stream
which
which
is
is
an
an
important
important
concept
concept
to
to
keep
keep
in
in
mind
mind
when
when
building
building
reactive
reactive
software.
software
The
the
next
next
concept
concept
we'll
we'll
look
look
at
at
is
is
hot
hot
versus
versus
cold
cold
observables.
observables
A
a
cold
cold
observable
observable
is
is
basically
basically
just
just
an
an
observable
observable
where
where
the
the
data
data
is
is
created
created
inside
inside
of
of
it.
it
So
so
this
this
means
means
it
it
won't
won't
actually
actually
create
create
the
the
the
the
underlying
underlying
data
data
until
until
something
something
subscribes
subscribes
to
to
it.
it
Inside
inside
this
this
observable,
observable
I'm
i'm
just
just
generating
generating
a
a
random
random
number,
number
and
and
then
then
I'll
i'll
create
create
2
2
different
different
subscribers.
subscribers
And
and
you
you
might
might
intuitively
intuitively
think
think
that
that
they
they
should
should
get
get
the
the
same
same
value.
value
But
but
what
what
happens
happens
is
is
the
the
random
random
number
number
gets
gets
generated
generated
once
once
the
the
subscription
subscription
starts,
starts
so
so
each
each
subscriber
subscriber
gets
gets
a
a
different
different
number.
number
That's
that's
how
how
you
you
know
know
you're
you're
working
working
with
with
a
a
cold
cold
observable.
observable
But
but
you
you
can
can
make
make
an
an
observable
observable
hot
hot
by
by
simply
simply
building
building
that
that
value
value
outside
outside
of
of
the
the
observable
observable
itself.
itself
So
so
here
here
we
we
set
set
the
the
random
random
number
number
outside
outside
the
the
observable
observable
and
and
then
then
pass
pass
it
it
in
in
as
as
a
a
variable.
variable
Reload
reload
the
the
page,
page
and
and
then
then
we'll
we'll
see
see
both
both
subscribers
subscribers
get
get
the
the
same
same
random
random
number.
number
That
that
technically
technically
makes
makes
our
our
observable
observable
hot,
hot
but
but
there
there
is
is
a
a
way
way
to
to
do
do
this
this
without
without
decoupling
decoupling
the
the
data
data
from
from
the
the
observable
observable
itself.
itself
So
so
we'll
we'll
put
put
the
the
random
random
number
number
back
back
in
in
the
the
observable,
observable
Then
then
we'll
we'll
create
create
a
a
new
new
hot
hot
observable
observable
by
by
calling
calling
publish
publish
on
on
the
the
cold
cold
observable.
observable
This
this
tells
tells
it
it
only
only
to
to
emit
emit
data
data
once
once
we
we
call
call
the
the
corresponding
corresponding
connect
connect
method
method
on
on
it.
it
So
so
we'll
we'll
build
build
the
the
subscriptions
subscriptions
and
and
at
at
this
this
point
point
nothing
nothing
will
will
happen,
happen
then
then
call
call
connect
connect
on
on
the
the
hot
hot
observable
observable
and
and
that
that
will
will
trigger
trigger
these
these
subscriptions
subscriptions
to
to
emit
emit
data
data
and
and
this
this
time
time
it'll
it'll
be
be
shared
shared
between
between
the
the
2
2
of
of
them.
them
And
and
we
we
can
can
verify
verify
this
this
by
by
reloading
reloading
the
the
page
page
and
and
they
they
should
should
get
get
the
the
same
same
random
random
number.
number
The
the
next
next
thing
thing
you
you
should
should
know
know
is
is
how
how
to
to
complete
complete
an
an
observable.
observable
When
when
the
the
observable
observable
has
has
reached
reached
the
the
end
end
of
of
its
its
life
life
cycle
cycle
it
it
will
will
send
send
a
a
completed
completed
signal.
signal
We
we
can
can
see
see
this
this
with
with
a
a
timer
timer
using
using
the
the
finally
finally
operator
operator
which
which
will
will
run
run
the
the
code
code
once
once
the
the
observable
observable
is
is
completed.
completed
In
in
this
this
case,
case
it
it
will
will
be
be
completed
completed
after
after
one
one
second,
second
so
so
we
we
subscribe
subscribe
and
and
then
then
we
we
get
get
the
the
all
all
done
done
signal
signal
back.
back
However,
however
there
there
are
are
other
other
observables
observables
that
that
won't
won't
complete
complete
automatically
automatically
and
and
in
in
some
some
cases
cases
this
this
can
can
result
result
in
in
memory
memory
leaks
leaks
if
if
it's
it's
a
a
very
very
data
data
intensive
intensive
stream.
stream
Here
here
we
we
have
have
an
an
interval
interval
which
which
doesn't
doesn't
complete
complete
on
on
its
its
own
own
so
so
what
what
we
we
do
do
is
is
subscribe
subscribe
to
to
it
it
first
first
then
then
set
set
a
a
time
time
out
out
for
for
3
3
seconds
seconds
and
and
call
call
unsubscribe.
unsubscribe
This
this
manually
manually
forces
forces
the
the
observable
observable
to
to
send
send
the
the
complete
complete
signal.
signal
There's
there's
also
also
more
more
clever
clever
ways
ways
to
to
do
do
this
this
which
which
we're
we're
gonna
gonna
see
see
a
a
little
little
bit
bit
later
later
in
in
the
the
lesson.
lesson
Now
now
we're
we're
going
going
to
to
look
look
at
at
a
a
whole
whole
bunch
bunch
of
of
RxJS
rxjs
operators
operators
starting
starting
with
with
map.
map
Map
map
allows
allows
you
you
to
to
transform
transform
the
the
emitted
emitted
value
value
based
based
on
on
some
some
underlying
underlying
logic.
logic
In
in
this
this
case,
case
we
we
created
created
an
an
observable
observable
of
of
some
some
numbers,
numbers
and
and
we're
we're
going
going
to
to
transform
transform
them
them
to
to
their
their
logarithm.
logarithm
So
so
when
when
we
we
subscribe,
subscribe
instead
instead
of
of
getting
getting
the
the
actual
actual
numbers,
numbers
we
we
get
get
the
the
log
log
of
of
that
that
number.
number
A
a
more
more
practical
practical
example
example
for
for
app
app
developers
developers
is
is
when
when
you
you
send
send
an
an
API
api
request
request
that
that
responds
responds
in
in
JSON.
json
You
you
need
need
to
to
convert
convert
the
the
JSON
json
string
string
to
to
JavaScript.
javascript
So
so
what
what
you
you
can
can
do
do
is
is
use
use
the
the
map
map
operator
operator
to
to
run
run
JSON
json
parse
parse
on
on
that
that
string
string
from
from
the
the
API.
api
Then
then
the
the
observable
observable
will
will
emit
emit
JavaScript
javascript
grip
grip
objects
objects
that
that
you
you
can
can
actually
actually
use
use
in
in
your
your
app.
app
The
the
next
next
operator
operator
we're
we're
going
going
to
to
look
look
at
at
is
is
do.
do
This
this
will
will
allow
allow
us
us
to
to
execute
execute
code
code
without
without
affecting
affecting
the
the
underlying
underlying
observable.
observable
So
so
we
we
create
create
an
an
observable
observable
of
of
a
a
couple
couple
strings,
strings
and
and
then
then
we'll
we'll
print
print
out
out
their
their
names
names
as
as
they
they
first
first
appear.
appear
Then
then
we'll
we'll
transform
transform
them
them
to
to
upper
upper
case,
case
and
and
then
then
we'll
we'll
print
print
them
them
again.
again
When
when
we
we
actually
actually
run
run
this
this
code,
code
you
you
can
can
see
see
that
that
it
it
gives
gives
us
us
a
a
glimpse
glimpse
into
into
the
the
observable
observable
data
data
at
at
any
any
given
given
point
point
in
in
time.
time
So
so
here
here
we
we
see
see
the
the
original
original
value
value
and
and
the
the
upper
upper
case
case
value.
value
Now
now
let's
let's
take
take
a
a
look
look
at
at
filter.
filter
This
this
does
does
pretty
pretty
much
much
what
what
you'd
you'd
expect.
expect
You
you
give
give
it
it
a
a
condition
condition
and
and
only
only
values
values
meeting
meeting
that
that
condition
condition
make
make
it
it
through.
through
So
so
here
here
we
we
have
have
an
an
observable
observable
of
of
a
a
bunch
bunch
of
of
positive
positive
and
and
negative
negative
numbers
numbers
and
and
we'll
we'll
filter
filter
it
it
to
to
only
only
show
show
the
the
positive
positive
numbers.
numbers
So
so
only
only
values
values
greater
greater
than
than
or
or
equal
equal
to
to
0
0
will
will
be
be
displayed
displayed
and
and
we
we
reload
reload
the
the
page
page
and
and
we
we
only
only
see
see
the
the
positive
positive
numbers.
numbers
If
if
we
we
flip
flip
greater
greater
than
than
to
to
less
less
than,
than
then
then
we
we
get
get
only
only
the
the
negative
negative
numbers
numbers
displayed.
displayed
Using
using
this
this
same
same
example,
example
I'm
i'm
going
going
to
to
show
show
you
you
the
the
first
first
and
and
last
last
operator.
operator
The
the
first
first
operator
operator
will
will
just
just
take
take
the
the
very
very
first
first
element
element
from
from
the
the
observable.
observable
In
in
this
this
case,
case
the
the
first
first
element
element
is
is
negative
negative
3,
3
so
so
that's
that's
what
what
we
we
see
see
here
here
on
on
the
the
screen.
screen
We
we
can
can
also
also
do
do
the
the
inverse
inverse
of
of
this
this
with
with
the
the
last
last
operator
operator
and
and
negative
negative
2
2
is
is
the
the
last
last
element,
element
so
so
we'll
we'll
see
see
it
it
updated
updated
to
to
negative
negative
2.
2
Now
now
let's
let's
take
take
a
a
look
look
at
at
debounce
debounce
and
and
throttle.
throttle
These
these
two
two
operators
operators
allow
allow
you
you
to
to
deal
deal
with
with
events
events
that
that
emit
emit
way
way
more
more
values
values
than
than
you
you
actually
actually
need.
need
The
the
mouse
mouse
move
move
event
event
is
is
a
a
perfect
perfect
example
example
in
in
the
the
DOM.
dom
So
so
we'll
we'll
subscribe
subscribe
to
to
the
the
mouse
mouse
event,
event
and
and
then
then
we'll
we'll
print
print
the
the
type
type
of
of
event
event
here
here
on
on
the
the
screen.
screen
Let's
let's
first
first
do
do
this
this
without
without
any
any
throttling
throttling
or
or
debouncing.
debouncing
You
you
can
can
see
see
it
it
only
only
takes
takes
about
about
2
2
seconds
seconds
to
to
get
get
hundreds
hundreds
of
of
events
events
printed
printed
here
here
on
on
the
the
screen.
screen
We
we
can
can
use
use
throttle
throttle
to
to
get
get
the
the
very
very
first
first
event
event
and
and
then
then
set
set
a
a
delay
delay
before
before
it
it
starts
starts
emitting
emitting
any
any
other
other
events.
events
In
in
this
this
case
case
we'll
we'll
use
use
the
the
throttle
throttle
Time
time
helper
helper
and
and
pass
pass
it
it
1,000
1,000
milliseconds.
milliseconds
So
so
now
now
if
if
we
we
mouse
mouse
over
over
the
the
screen,
screen
we'll
we'll
get
get
the
the
first
first
event
event
and
and
then
then
it
it
will
will
wait
wait
at
at
least
least
one
one
second
second
before
before
sending
sending
any
any
additional
additional
events.
events
Debounce
debounce
does
does
almost
almost
the
the
same
same
exact
exact
thing,
thing
but
but
instead
instead
of
of
giving
giving
us
us
the
the
first
first
event,
event
it
it
gives
gives
us
us
the
the
last
last
event.
event
So
so
first
first
we
we
mouse
mouse
over
over
and
and
there's
there's
a
a
delay,
delay
Then
then
after
after
that
that
delay,
delay
it
it
will
will
emit
emit
the
the
most
most
recent
recent
event.
event
Debounce
debounce
is
is
especially
especially
useful
useful
when
when
you
you
wanna
wanna
make
make
sure
sure
the
the
user
user
has
has
stopped
stopped
doing
doing
something
something
such
such
as
as
typing
typing
in
in
an
an
autocomplete
autocomplete
or
or
or
or
something
something
similar.
similar
Now
now
we're
we're
going
going
to
to
move
move
on
on
to
to
the
the
scan
scan
operator.
operator
This
this
one
one
seems
seems
confusing
confusing
at
at
first,
first
but
but
it's
it's
actually
actually
very
very
simple.
simple
We're
we're
going
going
to
to
do
do
this
this
in
in
the
the
context
context
of
of
a
a
video
video
game.
game
So
so
first,
first
we're
we're
gonna
gonna
subscribe
subscribe
to
to
the
the
click
click
events
events
in
in
the
the
browser.
browser
And
and
then
then
for
for
each
each
click,
click
we're
we're
gonna
gonna
assign
assign
a
a
random
random
number
number
that's
that's
gonna
gonna
represent
represent
the
the
score
score
for
for
that
that
click.
click
Then
then
we'll
we'll
use
use
the
the
do
do
operator
operator
to
to
print
print
that
that
score
score
on
on
the
the
screen.
screen
And
and
then
then
we'll
we'll
use
use
scan
scan
to
to
keep
keep
a
a
running
running
total
total
of
of
the
the
high
high
score,
score
which
which
is
is
just
just
the
the
combined
combined
score
score
of
of
all
all
the
the
clicks.
clicks
So
so
scan
scan
is
is
just
just
keeping
keeping
a
a
running
running
total
total
of
of
each
each
emitted
emitted
value
value
from
from
the
the
observable.
observable
It
it
works
works
just
just
like
like
the
the
array
array
reduce
reduce
function
function
in
in
vanilla
vanilla
JavaScript.
javascript
So
so
we'll
we'll
go
go
ahead
ahead
and
and
print
print
out
out
the
the
high
high
score
score
here
here
and
and
we
we
should
should
see
see
it
it
get
get
increasingly
increasingly
larger
larger
with
with
each
each
additional
additional
click.
click
So
so
on
on
the
the
first
first
click,
click
the
the
high
high
score
score
and
and
the
the
click
click
score
score
are
are
the
the
same,
same
and
and
then
then
the
the
high
high
score
score
gets
gets
increasingly
increasingly
larger
larger
with
with
each
each
additional
additional
click.
click
Now
now
let's
let's
move
move
on
on
to
to
switch
switch
map.
map
This
this
operator
operator
is
is
especially
especially
useful
useful
when
when
you
you
have
have
one
one
observable
observable
that
that
you
you
need
need
a
a
value
value
from
from
before
before
you
you
can
can
get
get
a
a
second
second
observable.
observable
In
in
this
this
example,
example
we
we
have
have
an
an
observable
observable
of
of
clicks,
clicks
but
but
we
we
actually
actually
don't
don't
care
care
about
about
the
the
click
click
data.
data
We
we
want
want
to
to
start
start
an
an
interval
interval
timer
timer
after
after
each
each
click.
click
So
so
on
on
the
the
first
first
click,
click
the
the
interval
interval
should
should
start
start
and
and
then
then
when
when
we
we
get
get
a
a
new
new
click,
click
it'll
it'll
reset
reset
the
the
interval
interval
back
back
to
to
0.
0
So
so
we'll
we'll
go
go
ahead
ahead
and
and
click
click
the
the
page
page
and
and
then
then
we'll
we'll
let
let
the
the
interval
interval
Count
count
up
up
to
to
6
6
and
and
then
then
click
click
again,
again
and
and
it'll
it'll
reset
reset
back
back
to
to
0.
0
Switch
switch
map
map
is
is
commonly
commonly
used
used
in
in
app
app
development
development
when
when
you
you
have
have
an
an
observable
observable
of,
of
say,
say
a
a
user
user
ID
id
And
and
then
then
you
you
need
need
that
that
user
user
ID
id
first
first
before
before
querying
querying
a
a
database
database
for
for
that
that
user's
user's
data.
data
The
the
next
next
operator
operator
is
is
take
take
until.
until
This
this
one
one
allows
allows
us
us
to
to
complete
complete
an
an
observable
observable
based
based
on
on
the
the
value
value
of
of
another
another
observable.
observable
So
so
here
here
we
we
have
have
an
an
interval
interval
and
and
a
a
timer.
timer
The
the
interval
interval
is
is
going
going
to
to
emit
emit
values
values
every
every
500
500
milliseconds
milliseconds
until
until
the
the
timer
timer
runs
runs
out
out
after
after
2
2
seconds.
seconds
This
this
This
this
is
is
a
a
clever
clever
way
way
to
to
unsubscribe
unsubscribe
from
from
data
data
without
without
actually
actually
having
having
to
to
call
call
unsubscribe
unsubscribe
on
on
the
the
observable
observable
itself.
itself
So
so
here
here
we
we
get
get
The
the
first
first
few
few
emitted
emitted
values,
values
then
then
the
the
timer
timer
runs
runs
out,
out
and
and
so
so
it
it
logs
logs
complete.
complete
A
a
closely
closely
related
related
operator
operator
is
is
take
take
while.
while
This
this
one
one
will
will
tell
tell
the
the
observable
observable
to
to
emit
emit
values
values
until
until
a
a
certain
certain
condition
condition
turns
turns
true.
true
In
in
this
this
example,
example
we
we
have
have
a
a
collection
collection
of
of
names
names
and
and
we
we
want
want
to
to
stop
stop
the
the
observable
observable
once
once
it
it
reaches
reaches
the
the
name
name
of
of
Doug.
doug
In
in
other
other
words,
words
we
we
want
want
it
it
to
to
take
take
values
values
while
while
the
the
name
name
does
does
not
not
equal
equal
Doug.
doug
Then
then
we'll
we'll
use
use
the
the
finally
finally
operator
operator
to
to
verify
verify
that
that
the
the
observable
observable
completed
completed
successfully.
successfully
So
so
when
when
we
we
run
run
this
this
in
in
the
the
browser,
browser
we
we
can
can
see
see
we
we
only
only
get
get
the
the
values
values
that
that
came
came
before
before
Doug.
doug
Now
now
let's
let's
look
look
at
at
a
a
few
few
ways
ways
we
we
can
can
combine
combine
Observables
observables
starting
starting
with
with
Zip.
zip
Zip
zip
is
is
something
something
that
that
might
might
be
be
useful
useful
if
if
you
you
have
have
2
2
observables
observables
that
that
are
are
the
the
same
same
length
length
and
and
connected
connected
in
in
some
some
kind
kind
of
of
way.
way
So
so
here
here
we
we
have
have
observables
observables
yin
yin
and
and
yang,
yang
And
and
we're
we're
going
going
to
to
combine
combine
them
them
with
with
zip
zip
which
which
will
will
combine
combine
them
them
into
into
arrays
arrays
based
based
on
on
their
their
index
index
position
position
in
in
the
the
observable.
observable
So
so
peanut
peanut
butter
butter
will
will
be
be
matched
matched
with
with
jelly,
jelly
wine
wine
with
with
cheese,
cheese
rainbows
rainbows
with
with
unicorns.
unicorns
Another
another
way
way
to
to
merge
merge
observables
observables
is
is
with
with
fork
fork
join.
join
This
this
one
one
will
will
wait
wait
for
for
both
both
of
of
the
the
observables
observables
to
to
complete,
complete
and
and
then
then
it
it
will
will
combine
combine
the
the
last
last
two
two
values
values
together.
together
So
so
I'm
i'm
going
going
to
to
put
put
a
a
delay
delay
on
on
the
the
yang
yang
observable.
observable
Then
then
we'll
we'll
use
use
the
the
fork
fork
join
join
operator
operator
to
to
combine
combine
them
them
just
just
like
like
Zip.
zip
But
but
this
this
time,
time
we
we
should
should
see
see
a
a
2
2
second
second
delay
delay
And
and
then
then
only
only
the
the
last
last
two
two
values,
values
rainbows
rainbows
and
and
unicorns,
unicorns
should
should
be
be
emitted.
emitted
This
this
operator
operator
is
is
useful
useful
if
if
you
you
have
have
a
a
bunch
bunch
of
of
related
related
API
api
calls
calls
and
and
you
you
wanna
wanna
wait
wait
for
for
all
all
of
of
them
them
to
to
resolve
resolve
before
before
sending
sending
any
any
data
data
through
through
to
to
the
the
UI.
ui
Now
now
we're
we're
going
going
to
to
look
look
at
at
Catch
catch
for
for
handling
handling
errors.
errors
In
in
this
this
example,
example
I
i
create
create
a
a
new
new
observable
observable
from
from
scratch,
scratch
but
but
in
in
the
the
middle
middle
of
of
it,
it
I
i
throw
throw
an
an
error.
error
When
when
we
we
get
get
errors
errors
in
in
the
the
real
real
world,
world
we
we
want
want
to
to
be
be
able
able
to
to
catch
catch
them
them
and
and
then
then
do
do
some
some
error
error
handling.
handling
In
in
this
this
case,
case
we'll
we'll
use
use
the
the
catch
catch
operator
operator
to
to
complete
complete
the
the
observable
observable
and
and
just
just
print
print
out
out
the
the
error.
error
So
so
notice
notice
that
that
we
we
get
get
the
the
first
first
three
three
values
values
in
in
the
the
observable,
observable
but
but
the
the
very
very
last
last
one
one
doesn't
doesn't
get
get
emitted.
emitted
Overall,
overall
the
the
idea
idea
is
is
very
very
similar
similar
to
to
how
how
promises
promises
work
work
in
in
JavaScript.
javascript
We
we
also
also
have
have
a
a
useful
useful
retry
retry
operator
operator
that
that
will
will
rerun
rerun
the
the
observable
observable
as
as
many
many
times
times
as
as
we
we
want
want
when
when
an
an
error
error
has
has
occurred.
occurred
So
so
right
right
after
after
catch,
catch
we
we
can
can
add
add
retry
retry
and
and
in
in
this
this
case
case
we'll
we'll
retry
retry
it
it
twice.
twice
When
when
we
we
run
run
it
it
this
this
time,
time
we'll
we'll
get
get
the
the
same
same
sequence
sequence
of
of
events,
events
but
but
they'll
they'll
happen
happen
3
3
times.
times
The
the
initial
initial
run
run
plus
plus
the
the
2
2
retries.
retries
So
so
that's
that's
all
all
the
the
operators
operators
I'm
i'm
gonna
gonna
cover
cover
for
for
today.
today
There's
there's
tons
tons
more
more
in
in
RxJS,
rxjs
But
but
I
i
think
think
these
these
are
are
some
some
of
of
the
the
most
most
useful
useful
and
and
powerful
powerful
ones
ones
that
that
you'll
you'll
find.
find
We
we
just
just
have
have
one
one
more
more
topic
topic
to
to
cover
cover
and
and
that's
that's
the
the
RxJS
rxjs
subject.
subject
A
a
subject
subject
is
is
just
just
an
an
observable
observable
with
with
a
a
few
few
extra
extra
bonus
bonus
features.
features
It
it
has
has
the
the
ability
ability
to
to
emit
emit
new
new
data
data
to
to
its
its
subscribers
subscribers
by
by
acting
acting
as
as
a
a
proxy
proxy
to
to
some
some
other
other
data
data
source.
source
This
this
will
will
make
make
more
more
sense
sense
after
after
the
the
next
next
couple
couple
examples.
examples
So
so
here
here
we
we
have
have
a
a
plain
plain
observable,
observable
and
and
we're
we're
going
going
to
to
convert
convert
it
it
to
to
a
a
subject.
subject
When
when
we
we
subscribe
subscribe
to
to
it,
it
it
it
emits
emits
the
the
values
values
just
just
like
like
a
a
normal
normal
observable
observable
would.
would
But
but
the
the
real
real
benefit
benefit
of
of
subject
subject
is
is
to
to
be
be
able
able
to
to
call
call
next
next
on
on
it.
it
So
so
what
what
we
we
do
do
is
is
create
create
a
a
new
new
subject,
subject
and
and
then
then
we'll
we'll
create
create
a
a
couple
couple
subscriptions
subscriptions
to
to
it.
it
And
and
then
then
we
we
can
can
just
just
call
call
subject
subject
next
next
with
with
some
some
value.
value
That's
that's
not
not
something
something
you
you
can
can
do
do
on
on
a
a
normal
normal
observable.
observable
Then
then
we'll
we'll
set
set
another
another
next
next
call
call
inside
inside
of
of
a
a
time
time
out.
out
So
so
the
the
main
main
benefit
benefit
of
of
a
a
subject
subject
is
is
being
being
able
able
to
to
broadcast
broadcast
new
new
values
values
to
to
subscribers
subscribers
without
without
having
having
to
to
rely
rely
on
on
some
some
source
source
data.
data
To
to
build
build
on
on
this
this
topic,
topic
we're
we're
gonna
gonna
look
look
at
at
one
one
last
last
thing,
thing
and
and
that's
that's
multicast.
multicast
It's
it's
used
used
to
to
send
send
values
values
to
to
multiple
multiple
subscribers,
subscribers
but
but
not
not
any
any
related
related
side
side
effects.
effects
So
so
we
we
create
create
a
a
data
data
source
source
that
that
is
is
the
the
click
click
events
events
happening
happening
in
in
the
the
DOM,
dom
and
and
then
then
we
we
use
use
the
the
do
do
operator
operator
Print,
print
do
do
one
one
time.
time
This
this
is
is
an
an
example
example
of
of
a
a
side
side
effect.
effect
Imagine
imagine
we
we
had
had
a
a
100
100
subscribers,
subscribers
it
it
would
would
run
run
this
this
code
code
for
for
every
every
single
single
one
one
of
of
them.
them
So
so
if
if
you
you
had
had
a
a
100
100
clicks
clicks
and
and
a
a
100
100
subscribers,
subscribers
this
this
code
code
would
would
run
run
10000
10000
times.
times
What
what
we
we
actually
actually
want
want
is
is
for
for
it
it
to
to
only
only
run
run
on
on
the
the
100
100
clicks
clicks
coming
coming
from
from
the
the
source
source
observable.
observable
We
we
can
can
do
do
this
this
by
by
calling
calling
multicast
multicast
on
on
the
the
original
original
observable
observable
full
full
and
and
have
have
it
it
return
return
a
a
new
new
subject.
subject
Then
then
we
we
can
can
add
add
a
a
couple
couple
of
of
subscriptions
subscriptions
to
to
the
the
subject.
subject
Then
then
lastly,
lastly
we
we
need
need
to
to
call
call
connect
connect
on
on
that
that
subject.
subject
When
when
we
we
start
start
clicking
clicking
in
in
the
the
DOM,
dom
we'll
we'll
see
see
that
that
we
we
get
get
the
the
values
values
sent
sent
to
to
the
the
Scribers
scribers
and
and
the
the
side
side
effect
effect
only
only
runs
runs
once
once
even
even
though
though
there's
there's
multiple
multiple
subscribers.
subscribers
This
this
could
could
be
be
highly
highly
beneficial
beneficial
if
if
you
you
have
have
multiple
multiple
subscribers
subscribers
to
to
a
a
single
single
data
data
source
source
that
that
is
is
running
running
some
some
sort
sort
of
of
side
side
effect.
effect
That's
that's
it
it
for
for
my
my
RxJS
rxjs
quick
quick
start.
start
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
get
get
the
the
full
full
source
source
code
code
and
and
additional
additional
commentary,
commentary
head
head
over
over
to
to
angular
angular
firebase.com.
firebase.com
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
next
next
time.
time
success
In this conversation, the speakers discuss various RxJS operators and their use in various projects. They explain how to create a timer for a website, create a new one, and use filters and adjust values for a specific degree. They also discuss the use of operator and catch operators, as well as multi-casting and the benefits of multi-cast for subscribers. They provide examples of how to use these operators and explain the process of printing events and creating a high score for each click.
RxJS Quick Start with Practical Examples
ReactiveX has revolutionized the way modern developers think about building apps. It allows us to treat all data as a stream as it unfolds through the dimension of time. In this lesson, I'm gonna cover about 25 different ways you can use RxJS so you have a solid foundation to use it in your own projects. For this tutorial, I've just created a basic HTML page and imported the RxJS script from a CDN in the head of that page. Then we'll write all of our custom code in this lesson dot j s file and import that in the body of the page. Then inside lesson JS, I'm creating a helper function that will just Append the results from an observable to the browser on the right side here. So when you see me use the print function, it's to add the values to the browser here on the right. The first thing we're gonna talk about is the observable, and I think the easiest way to think about it is just an array that gets built over time. Then Then you can loop over this array in the dimension of time by subscribing to it. The first thing we're gonna do is create an observable from scratch. We do this by calling rx. Observablecreate, and then create takes a observer function where we can define what the observable sends to the scriber. To send values, you call observer next with the value you wanna send, and that value can be anything. It could be a string, an object, or whatever you want. Then to make the observable start emitting values, you call subscribe on it. In this case, we'll take each value and just print it to the screen. If we refresh our page you can see we get hello world printed to the screen. So that's pretty cool but we don't normally need to create observables manually like this. Let's say we wanted to create an observable from click events in the DOM. We can call observable from event, pass it the document, and the event we want to observe, in this case, clicks. So just like before, we subscribe to it, but this time we'll console log it just to show the full event object. Each time we click the page, we get the mouse event logged along with all of its associated data. If you work with asynchronous JavaScript, you're probably used to working with promises, and we can convert a promise directly into an observable. So here we're just creating a Promise with a time out that resolves after one second. The idea here is to simulate an API call or some other asynchronous operation. To convert this Promise to an Observable, we just call Observable from Promise and pass it the Promise. This is extremely useful when you're working with a JavaScript library that's built on promises. You can also convert the observable back to a promise by calling to promise on it. So when we subscribe to this observable, we get a one second delay, and then it prints resolved on the page. We can also create a timer by calling observable timer with the amount of milliseconds we wanna wind it up for. To start the timer, we just call subscribe on it and then it will emit a value once the timer runs out. So we refresh The page and one second later, our timer runs out. If we want a timer that keeps repeating, we can use an interval which emits a value after the specified time frame. So every 1,000 milliseconds, we'll get a new value emitted. In this case here, we'll print out a date with the number of seconds in the minute to show how this works. We reload the page and then every second we get a new value emitted from the observable. Now I'm gonna show you one last way to create an observable. There's actually more ways than this, but I think this Covers the basics for now. So we'll do observable of, which allows us to pass any static value we want to the observable. So we'll go ahead and pass it a string, an array, a number, a boolean, and an object. This example shows how any type of data can be stream, which is an important concept to keep in mind when building reactive software. The next concept we'll look at is hot versus cold observables. A cold observable is basically just an observable where the data is created inside of it. So this means it won't actually create the the underlying data until something subscribes to it. Inside this observable, I'm just generating a random number, and then I'll create 2 different subscribers. And you might intuitively think that they should get the same value. But what happens is the random number gets generated once the subscription starts, so each subscriber gets a different number. That's how you know you're working with a cold observable. But you can make an observable hot by simply building that value outside of the observable itself. So here we set the random number outside the observable and then pass it in as a variable. Reload the page, and then we'll see both subscribers get the same random number. That technically makes our observable hot, but there is a way to do this without decoupling the data from the observable itself. So we'll put the random number back in the observable, Then we'll create a new hot observable by calling publish on the cold observable. This tells it only to emit data once we call the corresponding connect method on it. So we'll build the subscriptions and at this point nothing will happen, then call connect on the hot observable and that will trigger these subscriptions to emit data and this time it'll be shared between the 2 of them. And we can verify this by reloading the page and they should get the same random number. The next thing you should know is how to complete an observable. When the observable has reached the end of its life cycle it will send a completed signal. We can see this with a timer using the finally operator which will run the code once the observable is completed. In this case, it will be completed after one second, so we subscribe and then we get the all done signal back. However, there are other observables that won't complete automatically and in some cases this can result in memory leaks if it's a very data intensive stream. Here we have an interval which doesn't complete on its own so what we do is subscribe to it first then set a time out for 3 seconds and call unsubscribe. This manually forces the observable to send the complete signal. There's also more clever ways to do this which we're gonna see a little bit later in the lesson. Now we're going to look at a whole bunch of RxJS operators starting with map. Map allows you to transform the emitted value based on some underlying logic. In this case, we created an observable of some numbers, and we're going to transform them to their logarithm. So when we subscribe, instead of getting the actual numbers, we get the log of that number. A more practical example for app developers is when you send an API request that responds in JSON. You need to convert the JSON string to JavaScript. So what you can do is use the map operator to run JSON parse on that string from the API. Then the observable will emit JavaScript grip objects that you can actually use in your app. The next operator we're going to look at is do. This will allow us to execute code without affecting the underlying observable. So we create an observable of a couple strings, and then we'll print out their names as they first appear. Then we'll transform them to upper case, and then we'll print them again. When we actually run this code, you can see that it gives us a glimpse into the observable data at any given point in time. So here we see the original value and the upper case value. Now let's take a look at filter. This does pretty much what you'd expect. You give it a condition and only values meeting that condition make it through. So here we have an observable of a bunch of positive and negative numbers and we'll filter it to only show the positive numbers. So only values greater than or equal to 0 will be displayed and we reload the page and we only see the positive numbers. If we flip greater than to less than, then we get only the negative numbers displayed. Using this same example, I'm going to show you the first and last operator. The first operator will just take the very first element from the observable. In this case, the first element is negative 3, so that's what we see here on the screen. We can also do the inverse of this with the last operator and negative 2 is the last element, so we'll see it updated to negative 2. Now let's take a look at debounce and throttle. These two operators allow you to deal with events that emit way more values than you actually need. The mouse move event is a perfect example in the DOM. So we'll subscribe to the mouse event, and then we'll print the type of event here on the screen. Let's first do this without any throttling or debouncing. You can see it only takes about 2 seconds to get hundreds of events printed here on the screen. We can use throttle to get the very first event and then set a delay before it starts emitting any other events. In this case we'll use the throttle Time helper and pass it 1,000 milliseconds. So now if we mouse over the screen, we'll get the first event and then it will wait at least one second before sending any additional events. Debounce does almost the same exact thing, but instead of giving us the first event, it gives us the last event. So first we mouse over and there's a delay, Then after that delay, it will emit the most recent event. Debounce is especially useful when you wanna make sure the user has stopped doing something such as typing in an autocomplete or or something similar. Now we're going to move on to the scan operator. This one seems confusing at first, but it's actually very simple. We're going to do this in the context of a video game. So first, we're gonna subscribe to the click events in the browser. And then for each click, we're gonna assign a random number that's gonna represent the score for that click. Then we'll use the do operator to print that score on the screen. And then we'll use scan to keep a running total of the high score, which is just the combined score of all the clicks. So scan is just keeping a running total of each emitted value from the observable. It works just like the array reduce function in vanilla JavaScript. So we'll go ahead and print out the high score here and we should see it get increasingly larger with each additional click. So on the first click, the high score and the click score are the same, and then the high score gets increasingly larger with each additional click. Now let's move on to switch map. This operator is especially useful when you have one observable that you need a value from before you can get a second observable. In this example, we have an observable of clicks, but we actually don't care about the click data. We want to start an interval timer after each click. So on the first click, the interval should start and then when we get a new click, it'll reset the interval back to 0. So we'll go ahead and click the page and then we'll let the interval Count up to 6 and then click again, and it'll reset back to 0. Switch map is commonly used in app development when you have an observable of, say, a user ID And then you need that user ID first before querying a database for that user's data. The next operator is take until. This one allows us to complete an observable based on the value of another observable. So here we have an interval and a timer. The interval is going to emit values every 500 milliseconds until the timer runs out after 2 seconds. This This is a clever way to unsubscribe from data without actually having to call unsubscribe on the observable itself. So here we get The first few emitted values, then the timer runs out, and so it logs complete. A closely related operator is take while. This one will tell the observable to emit values until a certain condition turns true. In this example, we have a collection of names and we want to stop the observable once it reaches the name of Doug. In other words, we want it to take values while the name does not equal Doug. Then we'll use the finally operator to verify that the observable completed successfully. So when we run this in the browser, we can see we only get the values that came before Doug. Now let's look at a few ways we can combine Observables starting with Zip. Zip is something that might be useful if you have 2 observables that are the same length and connected in some kind of way. So here we have observables yin and yang, And we're going to combine them with zip which will combine them into arrays based on their index position in the observable. So peanut butter will be matched with jelly, wine with cheese, rainbows with unicorns. Another way to merge observables is with fork join. This one will wait for both of the observables to complete, and then it will combine the last two values together. So I'm going to put a delay on the yang observable. Then we'll use the fork join operator to combine them just like Zip. But this time, we should see a 2 second delay And then only the last two values, rainbows and unicorns, should be emitted. This operator is useful if you have a bunch of related API calls and you wanna wait for all of them to resolve before sending any data through to the UI. Now we're going to look at Catch for handling errors. In this example, I create a new observable from scratch, but in the middle of it, I throw an error. When we get errors in the real world, we want to be able to catch them and then do some error handling. In this case, we'll use the catch operator to complete the observable and just print out the error. So notice that we get the first three values in the observable, but the very last one doesn't get emitted. Overall, the idea is very similar to how promises work in JavaScript. We also have a useful retry operator that will rerun the observable as many times as we want when an error has occurred. So right after catch, we can add retry and in this case we'll retry it twice. When we run it this time, we'll get the same sequence of events, but they'll happen 3 times. The initial run plus the 2 retries. So that's all the operators I'm gonna cover for today. There's tons more in RxJS, But I think these are some of the most useful and powerful ones that you'll find. We just have one more topic to cover and that's the RxJS subject. A subject is just an observable with a few extra bonus features. It has the ability to emit new data to its subscribers by acting as a proxy to some other data source. This will make more sense after the next couple examples. So here we have a plain observable, and we're going to convert it to a subject. When we subscribe to it, it emits the values just like a normal observable would. But the real benefit of subject is to be able to call next on it. So what we do is create a new subject, and then we'll create a couple subscriptions to it. And then we can just call subject next with some value. That's not something you can do on a normal observable. Then we'll set another next call inside of a time out. So the main benefit of a subject is being able to broadcast new values to subscribers without having to rely on some source data. To build on this topic, we're gonna look at one last thing, and that's multicast. It's used to send values to multiple subscribers, but not any related side effects. So we create a data source that is the click events happening in the DOM, and then we use the do operator Print, do one time. This is an example of a side effect. Imagine we had a 100 subscribers, it would run this code for every single one of them. So if you had a 100 clicks and a 100 subscribers, this code would run 10000 times. What we actually want is for it to only run on the 100 clicks coming from the source observable. We can do this by calling multicast on the original observable full and have it return a new subject. Then we can add a couple of subscriptions to the subject. Then lastly, we need to call connect on that subject. When we start clicking in the DOM, we'll see that we get the values sent to the Scribers and the side effect only runs once even though there's multiple subscribers. This could be highly beneficial if you have multiple subscribers to a single data source that is running some sort of side effect. That's it for my RxJS quick start. If this video helped you, please like and subscribe. And if you wanna get the full source code and additional commentary, head over to angular firebase.com. Thanks for watching, and I'll see you next time.
In this conversation, the speakers discuss various RxJS operators and their use in various projects. They explain how to create a timer for a website, create a new one, and use filters and adjust values for a specific degree. They also discuss the use of operator and catch operators, as well as multi-casting and the benefits of multi-cast for subscribers. They provide examples of how to use these operators and explain the process of printing events and creating a high score for each click.