Today I am going to discuss how to draw Marble Diagrams. I just came across it in the Reactive Framework. In Channel 9 videos, Jeffrey Van Gogh shows how to get started with Rx. Ever since I look deep into it, I find it very interesting, and perhaps a new way of thinking or understanding for Asynchronous programming structure. Reactive Framework introduces a few operators, which you might apply to an
Observable to get the resultant observable. The way to represent each of these attributes can be done using Marble Diagrams.
Before you start dealing with Reactive Framework, it is good to start with
IObserver. I have already introduced with these two interfaces which are the building blocks for the Reactive Framework. You can read these articles before going through with Marble Diagrams.
How to Create a Marble Diagram
Marble diagram is basically a way to represent the Rx operations. You may think of a marble diagram to be a pictorial representation of different operators that are defined with Reactive Framework. Let's look at how to create a Marble Diagram:
So in the sample image, you can see that we measure Time in X-Axis while operations on Y-axis. Say for instance, you have an
Observable which is represented by the first horizontal line. The small circles represent
OnNext calls of
IObserver. If you know already, read about
Observer, you might already know that each
Observer has the
OnNext method, which gets invoked whenever the observer changes its state. Hence, in our case the observer invokes a function
f() to get to the new State. The | represents the
OnComplete for the
Observer. So after
Observer will stop observing states.
OnError using X in a marble diagram. In case of an
OnComplete produces the end point for the observer. So, here after executing the two
OnNext if the
Observer encounters with an
OnError gets invoked and the
Observer will terminate.
So on the first image, we execute the function
f() to get the new state with the Bottom Line. Now on, I am going to create a few Marble Diagrams, to make your understanding clear.
SelectMany is very easy to explain. Say you have two or more
Observers. In this case,
SelectMany will eventually invoke all the
OnNext of each observer.
So if you have 3 observers, the
SelectMany will produce
Observer which aggregates all of them.
var ob1 = Observable.Return(5);
var ob2 = Observable.Return(4);
var ob3 = ob1.SelectMany(ob2);
var disp = ob3.Subscribe( r => Console.WriteLine("OnNext"),
r => Console.WriteLine("Completed"),
() => Console.WriteLine("Error"));
Observer will select from each of the
Observers and get you the output.
In case of an error, the final
Observer will stop when the first error of any
Observer is encountered.
SkipUntil / SkipWhile
SkipUntil work in opposite. Say for instance, you have two
SkipUntil gives you
OnNext for each of them until the
OnNext from the other observer is received. On the contrary,
SkipWhile will produce
OnNext for the
Observer while the
OnNext from the second observer is received. When the second observer is
Complete or gives an error, the final observer will terminate in case of
So in the above diagrams, you can see
While will bypass all the values until the second observer receives an entry.
To learn the operators of Marble Diagrams, you can see the latest Videos on Channel 9. Here are a few more Operators:
I hope this will help you to understand the Marble Diagrams, and hope these will describe some more operators of Rx Framework.