Use Marble Diagrams to Understand RxJS Operators

[00:00] As we're going to see in upcoming lessons, there are many operators available. In order to understand them, we need to have a simple way of communicating how they transform a source observable into a result observable over time.

[00:12] Instead of using sentences in English to explain how they work, a diagram often works best. Throughout this course, we're going to see the so-called marble diagrams. They're really handy and easy to draw. For instance, here's how they look like in ASCII form inside these comments.

[00:28] We're going to draw the marble diagram for one observable, this observable interval of one second. They always look like this. They start with these dashes to indicate time, where time starts from the left side and it progresses towards the right.

[00:45] If we have lowercase characters like these, they will represent values delivered to the observer.next. If they are numbers, they are also values. We're going to consider them to represent values. If the character is a pipe character, that represents the completed notification. If it's the uppercase X, then that represents an error.

[01:13] That's everything that an observable can deliver -- values, completed, or error. Values would be in the range of zero and nine, those numbers, or A to Z as letters. Then, completed is the pipe and X is the error.

[01:36] Let's draw the observable marble diagram for interval. Let's consider one second to be four dashes. This is really arbitrary. We're just choosing an amount of dashes to mean one second. After one second, delivers the value zero, then delivers one, then delivers two, three, four, five. Then, we can also use ellipses here to indicate that this just continues indefinitely.

[02:03] There's a special case when we have synchronous values being delivered. For instance, if we use the observable of, then these values will be immediately delivered, so synchronously, when we subscribe to that observable.

[02:18] That is different to represent, because we use the parentheses to indicate that all of the values here in this parentheses group will be delivered synchronously. In case we had this special observable that after delivering one, two, three, four, it would deliver five after one second and six after another second, then we would represent that like this.

[02:44] Just to indicate that these happened synchronously, but five did not happen in that synchronous execution. It happened after a while. Just keep in mind that when we use parentheses, we mean that all of these are actually grouped inside one instantaneous moment.

[03:07] Marble diagrams are also handy for representing operators. We represent operators by using one marble diagram for an observable at the top for the source. Then, we use text here just to indicate what is the operator that we're using, and we indicate the result observable at the bottom here.

[03:31] Let's see how that would look like if we have interval of one second. If that is foo, as our source, let's even write here. Foo, we can do that, and bar is the result. Let's say we're multiplying by two. Then, after one second, we deliver zero on foo, two, three, etc. Zero multiplied by two is zero, two, four, six, and etc.

[04:10] Just keep in mind that at the top, we have the source observable. In the middle, we have the operator and its arguments. At the bottom, we have the result observable.

[04:20] This is how we will indicate most of our marble diagrams for operators in order to understand better how they work.