Streams & Reactive Programming

Learning Objectives

  • Know what streams are and how to think about things that happen in an application as streams.

  • Know what reactive programming is and how to transform your thinking from imperative to reactive.

What are Streams?

Streams are a sequence of values over time, that’s it.

For example a number that goes up by 1 every second might have a stream that looks like


Another stream might be a sequence of x and y positions of mouse click events, like so:

[(12,34), (345,22), (1,993)]

We could even have a stream to represent a user filling in a form on a website.

We could have a stream to represent each keypress, like so:


Or we could have a stream which contains a json representation of the whole form as the user enters data, like so:

  { "name": "A" },
  { "name": "As" },
  { "name": "Asi" },
  { "name": "Asim" }

We could have a stream for:

  • The x,y position of the mouse as it moves around the screen in a HTML5 game.

  • The data returned from a real-time websockets connection.

  • The chat windows opened by this user in a browser.

The more you think about it the more everything we do with a web application can be thought of as a stream.

What is Reactive Programming?

Reactive programming is the idea that you can create your entire program just by defining the different streams and the operations that are performed on those streams.

As a concept that is easy to write, but how can we actually train our mind to program reactively?

To explain this lets convert a simple imperative function into a reactive one.


Imperative programming is a programming paradigm that you probably have been using so far in your career, it’s by far the most common and it’s involves executing statements that change a programs state, i.e. call functions that change the values of variables.

To get a good overview of the different programming paradigms read this article
Streams Animation 1

We have a function called add and some state variables, A, B and C.

To add A and B together and change the state of C to be the sum we call the function add.

Later on the value of B changes to 4, we first need a way of knowing that B has changed and secondly we need to know that because B has changed we need to recalculate C.

Applications can be thought of as just a huge pile of variables as well logic we created to decide which functions to call, and in what order, when any of those variables change.

Calling those functions then also changes the values of variables, for which we need additional logic to figure out what other functions to call…​ it’s endless!

With reactive programming we stop thinking about variables, instead we think in terms of streams and how those streams are connected together.


An analogy which works for me is to think about reactive programming as plumbing. We decide which pipes we need in our application, we decide how those pipes are connected together and then we turn on the water and sit back.

Going back to our example, we convert the variables A, B and C into streams, the function add we think of an an operation we perform which connects the output of streams A and B to the input of stream C, a visual representation would be something like the below:

Streams Animation 2

Now if we push some numbers onto stream A and B, the add operation is automatically called, it calculates the sum and pushed that onto stream C.

Streams Animation 3

If stream C was connected to another stream via another operation, that operation would then automatically be called as well.

With reactive programming we don’t call functions, we just define how our application is plumbed together and start pushing values onto streams and let the plumbing and operations handle the rest.

So if later on the value of B changes, we simply push the new value onto the stream B and then let the plumbing handle the rest, like so:

Streams Animation 4

If the above still isn’t clear check out this animation:

Streams Animation


Streams are just a sequence of values over time.

Reactive programming is the idea we can define an application as a series of different streams with operations that connect the different streams together and which are automatically called when new values are pushed onto those streams.

In this this lecture we just covered the idea, the concept of reactive programming, in the next we’ll cover how to actually program reactively using observables and RxJS.

results matching ""

    No results matching ""