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

# Work/view mode use case
In this lesson, we will go through a very common scenario when building web applications. Suppose that you are building a SPA web application- a web-based image editor similar to Photoshop that will work in two modes: **work Mode** and **view Mode**. It will have several components that must communicate with each other by exchanging keyboard and mouse events, HTTP requests, etc.

When in work mode, every kind of communication between components **must** take place (with every keyboard and mouse event handled accordingly), and the appropriate action should be triggered. 

When in view mode, the event handlers should be disabled so that no action is triggered on any keyboard or mouse events (or the interested subscribers should not be able to listen). 

Finally, you must provide a way to allow switching from one mode to another, in most cases, via a switch button.

# Solution overview

The solution might seem pretty simple at first glance. When clicking the switch mode button (work mode), every subscriber to the event emitters should unsubscribe, and when switching to view mode, every old subscriber should re-subscribe to listen to the mouse and keyboard events.

Now, imagine the scenario where you have multiple components that are interested in keyboard or mouse events. What would happen when more diverse events take place, like HTTP calls, socket subscriptions, and so on? Applying the above-mentioned solution for every use case is not appropriate, nor it is scalable.

What we need in this case is a centralized place where we can control the data stream by toggling the values it emits. Every interested component could subscribe to the controlled data stream and only receive values when the data stream is active. 

On the other hand, the component that contains the mode toggle button will enable or disable the controlled data stream.

To centralize the data stream control, we will create a centralized service that can be injected into any interested component. The use case is illustrated below:

Learn how to create a centralized service that will serve as a switch between application modes, including work mode and view mode.

The Need for Reactive Programming

RxJS Subjects

RxJS Operators

Testing Observables

Real-World Projects in RxJS

Conclusion

Controlling Data Streams

Work/view mode use case