Learn about RxJS to write efficient asynchronous code. Explore subjects, operators, and observables. Gain insights into creating projects like a reactive local database and handling DOM events.

mocha.tar.gz

rxjsCodeWidget

rxjsSPA

mocha

RxJS (Reactive Extensions for JavaScript) is a very powerful library for web development which allows you to easily write asynchronous or call-back code.

In this course, you will explore the latest version of RxJS in detail, focusing on how to apply the reactive paradigm to solve your day-to-day tasks. You will learn all the major components of this library including: subjects, operators, and how to test observables.

In the last section of this course, you will get hands-on with this library to create your own project. Throughout this project, you’ll learn about building a centralized loading indicator, how to handle DOM events, how to build a reactive local database, and more.

By the end of this course, you will have a great new skill to add to your resume, and a cool new project for your portfolio.

Building Reactive Applications with RxJS

# Project overview

I believe this is a very interesting final project for the course. Suppose you are delivering a SaaS, which takes a few seconds to load, and you don't want to leave your users staring at a loading spinner. Instead, you would like to show some tips and tricks for using your application. 

Take lucidchart.com, for example: While the application is loading, tips & tricks, keyboard shortcuts, etc. are shown behind a loading screen. They stop showing when the application is fully loaded. This means that from the moment a request is made to the API until the response is received, the tips & tricks screen is shown.

# Simulation

Let's see how we can implement this functionality using reactive streams. To begin, we need to make the HTTP request. Ideally, we can do this via an Observable that can wrap a `Promise`. At that moment, the application starts to show the tips & tricks, and when the Observable emits the first value, the tips & tricks are not shown anymore.

To simulate this behavior, I have created an array of tips and a custom Observable that logs a random tip every 500ms. The following code demonstrates the simulation of the tips Observable.

    const tipsObservable$ = new 
       Observable(observer => {
        const interval = setInterval(() => {
           const tipIndex = getRandomInt(TIPS.length);
           observer.next(TIPS[tipIndex]);
    }, 500);

        return () => clearInterval(interval)
    })

To simulate the entire logic, we suppose that the request is initially made, and we need to start showing the tips until the Observable handling the request finally emits. Do you recall what RxJS operator we can use in this case?

`takeUntil` is the correct answer. The following code snippet shows the implementation of the tips pipeline. It will continue logging the tips in the console until the data is received from the backend.

    tipsObservable$.pipe(
        tap(tip => console.log(tip)),
        takeUntil(getDataFromHTTPService())
    ).subscribe();


The entire simulation is given below, and you can try it out with different tips and time values. Feel free to experiment with additional data transformations along the stream.

Learn how to keep your users engaged by displaying tips & tricks while your application is loading.

The Need for Reactive Programming

RxJS Subjects

RxJS Operators

Testing Observables

Real-World Projects in RxJS

Conclusion

Loading Screen Tips & Tricks

Project overview