DEV Community

loading...
Cover image for RxJS Simplified (don't lose your marbles)

RxJS Simplified (don't lose your marbles)

🐤🥇 Jasper de Jager
Loves the human side of programming | Makes difficult things seem easy
Updated on ・3 min read

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
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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.

Discussion (4)

Collapse
fedelway profile image
Federico Perez

Nice explaination. I really liked the marble machine analogies.

This piece of code was a little bit confusing for me when I first read it:

marbleMachine.pipe(
  filter((marble) => ['green', 'red'].indexOf(marble) > -1)
).subscribe(
Enter fullscreen mode Exit fullscreen mode

Probably using Array method contains makes it a little bit easier to understand without losing focus on the important stuff: RxJs

Collapse
jmdejager profile image
🐤🥇 Jasper de Jager Author

Thnx!
And good point. I'll change this to something more easy to read. Thanks for the help 🙂

Collapse
polaroidkidd profile image
Daniel Einars

This is a very good intro to RXJS. I've been meaning to read up on it for ages but their 40min intro video (from redux-observable) always took the wind out of my sails. Looking forward reading the whole series!

Collapse
jmdejager profile image
🐤🥇 Jasper de Jager Author

Thanks Daniel!

The documentation of RXJS is not easy and sometimes even confusing. This series is meant to be a simple and foremost fun intro into RXJS because it is really powerful and not at all as hard as it sometimes seems.