What do you need to observe? Changes to the DOM, data, requests?

RxJS Observables

Create, Subscribe To, Process, & Reuse Observables

RxJS is a library for reactive programming, which put simply, is when you build your program in a way that all it’s doing is reacting to data changes. It’s a subset of event-driven programming and actually, you don’t have to use RxJS for pure reactive programming; it can be used as way of making event driven programming much simpler.

I believe RxJS is very simple to grasp, but it’s difficulty comes from bad documentation that doesn’t explain the basic concepts well, mixed in with the massive number of helper functions (which are great though) that obfuscate to newcomers where to start in order to understand the underlying structures that make everything work. Hopefully this tutorial will give you a foundation to RxJS so that anytime you see a new reactive function, you’ll clearly understand what’s going on.

Understanding RxJS Observables

If you’re wondering whether you need RxJs, this quick tut will show you the basic reason for why it’s so useful.

What You Need For This Tutorial

Nothing unless you want to experiment, in which case: a Javascript playground with RxJS

Importing

I believe some frameworks, like Angular, come with the library installed. For everyone else, you can do this:

npm install rxjs

Or, if you want to load the library on the front-end from a CDN:

<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>

Below is an example of getting the Rx object using es6 modules import and commonJS require:

// es6 modules 
import { Rx } from 'rxjs/Rx'; 
// commmonjs 
const Rx = require('rxjs'); 
// example usage: 
Rx.from([1,2,3]);

You also have the option to import only the stuff you need:

import { Observable, from, of, range }…