What is RXJS

RXJS is a Javascript library for reactive programming. It provides a reactive way of working with your data through the use of Observables. In this post I'm going to explain this by using an analogy using marbles ( and I'll try not to lose them in the process ;) )

Observables

Observables are the basis of RXJS, they are observable and this makes the code reactive, you react to changes in data. Well here goes the analogy:
An Observable is like a marbles machine it emits all marbles (data) it has, in order and one by one until it's empty.

// from generates an Observable from an array
import { from } from "rxjs"

// create a machine with 4 marbles
const marbles = ['red', 'green', 'red', 'blue'];

// observe the machine
from(marbles).subscribe(
  (marble) => console.log(marble)
) 

// outputs:
// red - green - red - blue

Subjects

In the example the Observable (marble machine) is created and subscribed (observed). The downside is that if the machine is empty there is no way to refill it and is only usefull for one observer. This is where RXJS Subjects come in. Subjects are a special type of Observable, they can share the emitted data over multiple observers and make it possible to emit data to all observers. In our analogy: The marble machine has a marble loader and all the marbles that come out will be cloned and given to all observers.

import { Subject } from "rxjs"

//create an advanced marble machine
const marbleMachine = new Subject(); 

// Pete observes the machine
marbleMachine.subscribe(
  (marble) => console.log('Observer:Pete', marble)
)

// add a red marble
marbleMachine.next('red')

// Output:
// Observer:Pete, red 

// Anna observes the machine
marbleMachine.subscribe(
  (marble) => console.log('Observer:Anna', marble)
)

// add a green marble
marbleMachine.next('green')

// Output:
// Observer:Pete, green 
// Observer:Anna, green 

Pipes/Operators

What if you want to count the number of red marbles the machine emits. Of course you could collect all marbles and count the red ones but it can be done better. What RXJS allows you to do is create a pipe from the Observable to an operator. In marbles language: you can connect pipes tot the machine to redirect all marbles to small machines (operators) that can do stuff. So if Pete wants to do something with the red marbles and Anna with the green ones you'll get the next example

import { Subject } from "rxjs"
import { filter } from "rxjs/operators"

//create an advanced marble machine
const marbleMachine = new Subject(); 

// Pete adds a pipe to the machine to a small marble machine that
// only emits the red marbles and then observes that machine
marbleMachine.pipe(
  filter((marble) => marble === 'red')
).subscribe(
  (marble) => console.log('Observer:Pete', marble)
)

// Anna adds a pipe to the machine to a small marble machine that 
// only emits the green and red marbles and then observes that machine
marbleMachine.pipe(
  filter((marble) => marble === 'green' || marble === 'red')
).subscribe(
  (marble) => console.log('Observer:Anna', marble)
)

// feed the machine a yellow marble
marbleMachine.next('yellow');

// feed the machine a green marble
marbleMachine.next('green');

// output:
// Observer:Anna, green

// feed the machine a red marble
marbleMachine.next('red');

// output:
// Observer:Pete, red
// Observer:Anna, red

The operators generate a new Observable so you could pipe them to another operator etc. etc.

What to do next

Play with it! Look at the operators available for RXJS and try to combine them an create useful Observables! Or go play with marbles, that's always fun ;)

Why use RXJS

RXJS is a great way to get a grip on the data flow in your Javascript application. Personally I use it pretty much for every Javascript project, mostly in combination with Angular which itself also uses RXJS.

I want more!

I'm planning on doing a follow-up, if this post is popular enough, using the marbles analogy for more advanced RXJS examples.