« Back
read.

Reactive Programming in a nutshell.

What is Reactive Programming?

Just like many things involving programming, there are a varying degree of answers to this question. So let's start with the simple one:

Reactive Programming is programming in a way where changes throughout the system are propagated to other parts of the program over a period of time. This means that when a certain action has been taken in the system such as a network response or user interaction, certain parts of the application are notified and updated in response to those changes.

Simply put; Reactive Programming reacts to the changes that happen within the system, rather than simply following a set of instructions.

Comparison By Example

Compared with the more traditional Imperative Programming (a paradigm that focuses around telling the computer what to do in a step-by-step layout).

In the below imperative example, when the value y is assigned, it's only tied to x at the time of assigning. After which, value of y never changes (unless y is explicitly assigned to another value)

In Reactive Programming, the value of y changes when the value of x changes. In a way, the system reacts to the changes. In the below Reactive example, the value of y would change when the value of x changes.

Asynchronous Data Streams

Most define Reactive Programming as programming using the term asynchronous data streams. This is too big of a generalization but it does help understand the principles of Reactive Programming.

Data Stream is a sequence of data provided over time. It's a concept that much of our computer hardware is built upon. Imagine your keyboard, connected to your computer. In effect, your computer is listening to a stream of keys (data) that you press over a period of time. In reactive programming, a stream is usually a user input as well, like a mouse click.

The Asynchronous part is about how we react to these streams. When a data stream event is received, the system reacts to it asynchronously, which means that a user can hit multiple keys without being blocked, no matter what type of logic is happening.

Implicit vs Explicit Declaration

We know now that Reactive Programming is about reacting to the changes in the system that happen over a period of time. But how do we set up those relationships?

Some languages/frameworks/libraries give you the tools to set up these relationships explicitly, while some frameworks implicitly set up the connections needed to react to changes.

Explicit

If you have done any web development, then you have already probably used some reactive programming in the form of event handlers. In javascript, you can set up listeners that react to certain user inputs.

For example, say we have a button and when the button is clicked, we want to alert the user of the click. We can set up the connection using simple javascript:

Using the onclick function on the DOM element, we set up a function that would execute whenever the button was clicked. And every time it was clicked, we reacted by alerting the user. As you can see, we have explicitly set up a connection between clicking and alerting a user.

Implicit

Because of how helpful Reactive Programming is, many frameworks create bindings automatically to react to changes in the system.

React.js is a very popular view library for the front-end that adopts many of the Reactive Programming principles. In React, components are set up automatically to react to changes in the system.

Below is a simple React component which has a state variable called name. This component renders another component called UserWidget and passes the name to it. React automatically binds the name variable in this component to the name that is passed down to the UserWidget. Which means that, whenever we somehow change the value of the name here, React would react to it by triggering the render of the UserWidget.

Reactive Programming in Web Development

Reactive Programming is very beneficial in asynchronous complex systems that rely on heavy user interaction, which is what most of modern web is now. A typical web application will be making network requests, listening to some user text input, watching for mouse movements and many other events. All of these things can happen in any random combination and a single change could have effects in many parts of the application. And this is what makes Reactive Programming great for web development.

Simple example

Imagine you have a little widget in the navigation bar of your web application that shows the number of messages you have. And you have the message screen in the main part of the application, which shows messages themselves. Now imagine, you make an API request to your server to fetch the messages, when this call is finished, you have to update the number count in the top right and also show all the messages in the main body. Using reactive programming, this problem can be simplified by having a single model for messages, and having the widget and the message body connected to this model. Thus when the messages object changes due to any change, all the elements can "react" to it and update accordingly without creating any dependencies between them.

Without Reactive Programming, you might have to do something like:

  1. MessageComponent loads
  2. MessageComponent initializes API request
  3. MessageComponent receives response
  4. MessageComponent notifies MessageCountWidget with the number of messages

As you can see, we have coupled our MessageCountWidget to our MessageComponent, which means that our widget can't exist independently and creates dependencies that will become hard to manage as the complexity our application grows.

With Reactive Programming:

  1. MessageModel initializes
  2. MessageComponent loads and subscribes to MessageModel
  3. MessageCountWidget loads and subscribes to MessageModel
  4. MessageModel component triggers an API request to get messages
  5. MessageModel receives a response
  6. MessageModel updates which triggers changes both on the MessageComponent and MessageCountWidget

Now, because of reactive programming, instead of gluing different parts of our application together, MessageCountWidget and MessageComponent can exist independently and they can be notified of changes regardless of what triggers a change in the message count.

This is what makes Reactive Programming important to web development. By using Reactive Programming, you simplify your code and reduce dependencies between components by having each component react independently based on a fundamental state change of your application.

In Summary

Reactive Programming is a very important concept that many people already use without explicitly knowing about it. Reactive Programming has been the basis for many of changes happening to the Web Development ecosystem. There is already a Reactive Manifesto signed by around 14k developers (at the time of writing) which outlines some of the principles established.

Furthermore, many of the popular front-end frameworks make heavy use of the Reactive Principles in their implementations like React.js and Ember.js.

comments powered by Disqus