What is RxJs? What Problem Does it Solve?

Hello, everyone, and welcome back. In the last lesson, we have introduced the notion of stream of values, which is one of the core concepts of Rxjs. And we gave several examples of streams. In this lesson, we are going to introduce the Rxjs library by understanding its core use case. What is a Rxjs? When should we use it and why? What benefits does it give us? Let's understand that by starting where we left off in the last lesson where we had here an example with three separate streams. Well, one typical thing that we want to do is to combine these streams together. We would probably want to do something like after the user clicks on a certain part of the screen, we might want to wait for three seconds and only then start emitting the interval. So if we would want to combine the streams in that way, we would have to do something like this. We would have to take this setTimeout wait for the click, then trigger here a set timeout and wait for three seconds and only then start the interval. So we would have to completely nest these three callbacks together, creating what is known sometimes as callback hell. Let's have a look to see if indeed this behaves as one would expect. So if we open here the console, we are going to see that no value gets emitted and this is normal. Now if we click here somewhere on the application, we are going to see that three seconds after we are going to see here that the values are getting emitted. And we can see here even that the values are being emitted twice. And that's because I clicked here on a mouse twice. So I triggered two of these streams at the same time. So as you can see, our typical JavaScript front end program is really a program that intends to combine multiple types of streams, streams caused by user interaction, by backend requests, by timeouts intervals, all of those asynchronous events we want to combine together in order to produce a final result. So all these streams have natively defined at the level of the browser. This callback API that as we can see, is not very convenient if we are combining multiple of these streams of values together. So we are going to see a better way of combining streams other than using here the native callbacks. We are going to introduce the Rxjs library. Rxjs stands for Reactive Extensions for JavaScript and it's a library that makes it very simple to combine streams of values together in a maintainable way. It's an extension to standard JavaScript because the plain JavaScript version that we have in our browsers only has this callback interface that really does not scale well in complexity. We start having here lot of nested code and our program starts to become more and more hard to read and reason about. Now that we understand well, what is rxjs? What concrete problem does it solve? And now that we understand well the basic notion of stream of values, let's now start diving deeper into Rxjs. We are going to introduce the library and we're going to cover its key notion, the observable. This is coming right up in the next lesson.