Reactive Programming Made Simple

Reactive programming may have been an option once, but today it is almost a necessity in mobile development. For the past few years, it’s been the norm on Android, and with the introduction of SwiftUI and Combine last year it’s about to take iOS by storm too. So…what the heck is it?

Reactive programming is a style of programming that builds off basic functional programming. Let’s take another step back. Functional programming is programming built upon the idea of everything being a function (yeah, right?). Meaning you write a function like printSomething() and then calling that function causes the function’s logic takes place. Fairly straightforward.

Reactive programming is a little more complex with the key idea being that logic revolves around streams. Think of a stream as a tube that data pieces can pass through. There are three parts (the tube’s entrance, inside the tube, and the tube’s exit). As a piece of data goes through the stream, it can be modified and come out the other end as a modified piece of data. Then at the end of the stream there is something patiently waiting to use that new piece of data.

A Visualization of Streams:

Here’s a way to think about Reactive streams that I’ve found helpful. Remember Marbleworks? If so, you’re welcome for a blast to the past. And if not here’s an image to help you visualize.

These toys were building blocks you could piece together and roll marbles through. You could build the tubes however you wanted, and once they were complete you would drop a marble in the top and watch it roll through the custom course.

Tube = stream. Marble = piece of data. That’s it. There is one tube that you build once, and then after it’s built you can drop as many marbles into it as you want. Then when the marbles reach the bottom of the course, they are ready to be used by someone waiting to pick them up.

Jumping back into development, reactive functioning revolves around listeners. Let’s think about how you can respond to button clicks in an app: With a listener. Do you recognize this code?

button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        //Do something
    }
});

With this code we’re setting up a listener for the button that now knows what to do when a click event is received. We set it up once, but now every time the button is clicked an event fires and the same onClick logic occurs each time.

This is the essence of reactive programming. So now that we have a definition, let’s look at a popular mobile reactive library.

ReactiveX:

Reactive Extensions (ReactiveX) is a library for composing asynchronous and event-based programs by using observable sequences. In other words, it’s a library that helps us easily create Marbleworks towers like the one above. There are multiple implementations of this library, but the common mobile ones are RxJava and RxSwift.

To set up RxJava we need to add the library’s implementation to the build.gradle file, and for RxSwift we need to install the podfile:

implementation “io.reactivex.rxjava3:rxjava:3.0.3”
pod ‘RxSwift’, ‘5.1.1’

That’s all the set up we need to start reactively programming on either platform. So let’s quickly revisit the tube we described above. Remember there are three key parts of the reactive stream. These are the Observable, Operator, and Observer, and respectively they are the front, middle, and end of the tube. When first starting it’s easy to get these mixed up, but an easy way to remember is that the Observer is waiting (or observing) at the bottom of the tube, always watching for new data to come through.

There are several ways to set up the stream. We’ll start with a basic example using the Observable method just.

Observable<String> observable = Observable.just("word1", "word2", "word3");

This creates an Observable that will drop three marbles into the stream. BUT…here’s a very important note on streams: nothing will start going through the stream until an Observer is set up at the bottom. Let’s create that now.

observable.subscribe(dataPiece -> {
    System.out.print(dataPiece);
});

The Observable method subscribe creates an Observer that is now listening to the Observable. When any data comes through the stream, the observer at the end of the stream is prepared to do something with that data. In this case we just print it.

If we put both of these pieces of code into our app and run it we will see the three Strings printed in the console. We’ve officially created a stream with the data type String, and have dropped three pieces of data into it. These data pieces then run through the stream and are printed by the observer at the bottom!

Now this stream obviously isn’t the most useful since we just put in data and then printed it again, but it demonstrates the power of reactive streams. We build the logic once, and if we add more and more data we are already set up to handle whatever comes our way.

In part 2 of this series we’ll expand on this example and get into using the third O: Operators.

If you liked this post and want to see others like it check out FreeMobileTutorials.com