Understanding RxJs - What are Streams?

Hello, everyone, and welcome back. In this lesson, we are going to introduce one of the first core notions of rxjs. It's going to be the notion of stream of values. Many times people dive in straight into the notion of observables without understanding the notion of stream of values first. But this is the best starting point for understanding Rxjs Let's cover then what is a stream In this lesson? We are going to give several examples of streams of values using here. This very simple about component which corresponds to the component that we have here with a title and the course image. Let's then start with maybe what is the most fundamental notion in Rxjs, which is the notion of stream of values. As you know, in a JavaScript program, everything almost is a synchronous. We have requests coming from the network, bringing us new values from the backend. We have timeouts occurring in the front end. We have user interaction with clicks and mouse over events. All of those are asynchronous events that we need to combine in order to produce the final result of our program. Let's give a couple of examples. For example, every click that you do in an application that will be a stream of values containing the click event. Let's have a look at the stream of values in the console. Let's take, for example, a given element of this page, and we could take a particular button where we want to detect clicks. But in order to make it simple, we are going to detect here the whole document and we are going to detect here a stream of clicks anywhere on the page. Let's subscribe to the Click event and let's now print the event to the console. We are going to reload our application and we are going to open the console so that we see here the stream of events. So now if we click anywhere on the page, we are going to see that we have here a series of mouse events being printed out to the screen. So what we see here whenever we click on the mouse is an example of a stream of values that are being emitted over time. Let's give another example of a stream of values. Another example that we often find in JavaScript programs are JavaScript intervals. So this is code that is periodically executed by the runtime in order to perform a certain task, such as, for example, if our application is doing long polling in the background, Let's say that for example, we have here an interval that is emitting a new value. Each second we are going to define here a variable. We are going to initialize it to zero and we are going to emit a new value over time and we are going to increment the counter each time that we emit our value. Let's have a look at what this new stream of values looks like in the console. If we now open the console, we are going to see that now we get one value per second. So we have here zero, one, two, three, etcetera as expected. And we also have here our second stream of values, which is the stream of mouse clicks. So our program now has two independent streams of values, clicks and an interval that we might want to combine together. Let's now give a third example of a stream that is very similar to what happens in the case of an Http request, which would be calling set, timeout, set. Timeout is another very common asynchronous operation that we are going to find in nearly all JavaScript programs and we might not think of this operation as a stream, but this is indeed a special type of stream. It's a stream that only emits one value and then completes. So let's create here a timeout that is going to be triggered after three seconds and we are going to log here simply to the console that the timeout has elapsed. So unlike the previous stream here, set interval, this stream only contains one value, even though it only emits one value. It's still an example of a stream and in fact set timeout is very similar to a request to the backend that gives us back a value after the request has completed via a callback. So it's really not that different from an Ajax request with the exception that it cannot go wrong. There is no way that this could emit an error. Let's now have a look at this new stream of values. We are going to open the console and we are going to see that after three seconds. Indeed, we have here this value that got emitted and the stream is completed, meaning it will never emit a new value again. However, the setinterval stream is still emitting values constantly and this click stream here is still active and will continue to emit clicks as we click on the page. So. These two streams that we have defined here are multi value streams. They continue to emit values over time and they will never complete. So that's an important notion. When we are talking about streams, can they be completed? When are they completed? This stream here emits a value and completes these ones, emit multiple values and never complete. It would be perfectly possible, for example, for a stream to emit two values or three values and then complete. It's just not the case of these examples that we have here now that we have understood the most essential notion of rxjs, which is the notion of stream of values. Let's now introduce the Rxjs library itself. Let's learn why it's called Rxjs and what is its main use case?