How to read Rx marble diagrams

When trying Rx for the first time and you heard it’s a steep learning curve but you went for it anyway and you are searching the internet to get you started and you open up the first result on Google and you see this..

mergeMap vs flatMap vs concatMap vs switchMap | Tolik Code

and you be like…

Arrested Development meme gob huge mistake on Bingeclock

But no worries! Let’s try to understand what is going on here. First of all these are Marble Diagrams and they help you to understand what the different Operator functions of Rx do!

I’m by no means an expert user of Rx, but I’ve used it enough to make sense of these “marble diagrams”. So let’s start easy.

Note: Everything I discuss here can also be found at the official documentation here

The basics

Observables are asynchronous operations, so we need a way to represent the passage of time. This can be done with an arrow moving left to right.

The vertical line at the end of an arrow represents the successful completion of an Observable and finally, those circles represent values and can show up anywhere on the arrow’s timeline. 

So now reading this diagram of the of function should be do-able

This is an creational operator which created it’s own value, therefor you see one line. When this operator it’s called it will emit the value 1 and the observable closes.

Let’s get into it a little bit deeper with this min function

The first timeline is the Input Observable and emits a couple of values. Then the min operator is called and this basicly outputs the smallest number that it came across, in this example it’s the number 1.

Here is an example of how this would look like in code and let’s continue more difficult marble diagrams in part 2.