Close

Marble diagrams: Indispensable for Rx concepts

You might have heard that Marble Diagrams are indispensable when it comes to learning Rx. If you have worked with any Reactive programming or if you want to switch to reactive programming for any specific language be in RxJava, RxSwift, RxJS etc., chances are that you have or will encounter Marble diagrams.

Marble diagrams are interactive diagrams that depict how Rx operators work with observable sequences.

Let’s have a look at a few examples and figure out how to work your way through Rx concepts by making use of Marble Diagrams.

Rx is all about working with Observable sequences; the way you work with them is by using one or more operators on them. Operators are methods of the various observable types as discussed in my blog: Basic building blocks of Functional reactive programming(FRP): IOS.

Consider this example:

map.png

You can visit RxMarbles.com to view and play around with marble diagrams for most Rx operators that you will find in RxSwift. For instance, from the preceding marble diagram, you can see how a map operator works.

The elements in the top line represent elements emitted from an observable sequence and the elements in the bottom line represent the outcome sequence, that is, after invoking the operator with whatever parameters are specified on the original sequence or multiple sequences in some cases.

Here in map operator in the marble diagram, there are three elements emitted from the observable sequence. The map operator is used to map the operation specified inside the map operation and apply it to each element of the observable sequence as shown by the top line. So, in this case, the map operator will take each element from the observable sequence and produce a square of each value to generate a new sequence, as shown by the bottom line.

The vertical line at the end indicates that a sequence has terminated normally via a completed event.

Let’s take another example — the following image describes a merge operator; the functionality depicts that elements emitted from two observable sequences will be merged together in one sequence:

merge.png

Moving any of the elements along the sequence reveals that merge will produce the merged sequence in the order they are emitted.

You can see this in the following diagram:

Merge happens as the elements are emitted from the observable sequences. Marble diagrams are also displayed on the ReactiveX website, although some of them are not interactive.

Here’s an example of the catch operator from the website:

Source: Rxmarbles.com

It is actually called the catch error operator in RxSwift, but the functionality is the same. The ‘X’ represents that the observable sequence terminated with an error. In this example, the sequence terminates with an error, but the catch operator introduces a new sequence that will take over and begin emitting its own events in place of the terminated one. If you want to explore more with marble diagrams using an IOS app, you’re in luck. Head to the app store and search for RxMarbles; the app is built in RxSwift, and the most astonishing part is that it is open source and you can find the source code of this app on Github.

Fun exercise 🙂 : Find the link to the Github repository for this application. So put on your googler hats and start searching! I am sure it won’t be hard to find.

Once you have found the library, you can download the project, check the code for yourself, and run the app in the IOS simulator as well. After a quick introduction, you can browse through all the operators. The operators mentioned earlier in this section can be found too. Do play with the app, it is a fun way to learn this important concept. You can edit these diagrams to add an event or error element and observe how the operators are affected. This app is indispensable in learning Rx.

To read in depth about Rx concepts and RxSwift you can follow my book Reactive programming in Swift 4 as shown in the image on the left.

To check out the book: Click on the Image 🙂

For other updates you can follow me on Twitter on my twitter handle @NavRudraSambyal

 

Thanks for reading, please share it if you found it useful 🙂

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Back to top
%d bloggers like this: