The first function tells the program what to do. You start at the top and loop through the logic to end at the bottom with the final result.
The second function tells the program how to do something. It ultimately produces the same result, but the code doesn't have a flow; the essence of declarative. No additional plumbing is needed and it’s easier to read.
(F)RP is not an acronym for a genre of games, but it can be an adventure
‘Reactive programming is programming with asynchronous data streams.’ (1)
The functional part means that you can combine these streams, using one as input for the next, or combine several of them into one or more new ones. RxJS is an extension of this – it gives you observables in various flavours and a large collection of functions to use on them. It’s basically a toolbox with more tools than you’ll need for any one job – just pick the ones you need and ignore the rest.
You want to use it because it produces easy-to-read code, similar to C#’s LINQ. You’ll recognise the notation, which involves dot-chaining every action like this: array.doThis().doThat().doTheFinalThing(). Every output of the previous function is the input for the next.
The explanations of declarative, imperative and reactive that I’ve given above are simplified, but these subjects go much deeper. There are many people smarter than me who have written books on these subjects, but that goes beyond the scope of this blog. Check the sources list at the end for further reading on the subject.
With that under your belt, let’s move on to RxJS!
Keep your eye on the Observable
Let’s start with the absolute basic building block: the Observable object (2). These are collections that may, at some indeterminable time in the future, possibly contain values. They expose three functions that you need to be aware of: Next, Error and Complete. This is an implementation of the generic Observer pattern. (3)
You can do various things with an Observable. For example, you can subscribe to it and wait for something to show up. You can combine several Observables and only do something when they all contain at least one value. You can map the Observable’s result to something else. That sounds pretty complex, but in reality, it behaves like an array and doesn’t trigger anything until it either gets a value, runs into an error or indicates that it’s completed doing whatever it was doing. In other words, the Next, Error and Completed events.
Let’s create a sandbox to play around in first
In order to demonstrate and play with RxJS, we’ll need to create a sandbox first. This isn’t overly complicated and only takes a few minutes. I assume that you are familiar with Git, NodeJS and NPM, and have them installed and ready. If you don’t, check my previous blogs for instructions.
Clone your own sandbox like this:
git clone https://github.com/Rarz/rxjs-demo.git
npm run start
That will download the sandbox, build it and start it.
Go to your favourite browser and head for the local webpack-dev-server, which you can find at http://localhost:8080/
Press F12 to open the dev console and F5 to refresh the page so you can see the logged results.
Go to the src\index.ts file. It will look like this, which is also the first example: