I recently learned about FRP, or Functional Reactive Programming. In frontend web development, two of the most popular tools for FRP are RxJS and the Observable Pattern.
Keep reading to learn more about this topic and to start applying it.

A few months ago I had the opportunity to participate as co-host in DojoLIVE!, a Nearsoft initiative in which we chat with professionals in the software industry via Hangouts On Air.

Carlos Ponce is the intellectual author of this initiative, which is basically a conversation with an industry expert on a particular topic. We talk with the guest while encouraging the audience to ask questions, too.

On this occasion, our guest was Berkeley Martinez (@BerkeleyTrue), and the theme was “React, Redux and RxJS: Async and You.” It is a very technical topic on three tools that allow you to use Functional Reactive Programming with JavaScript. We also talked about other topics, like Free Code Camp, a website I have been a follower of for some time.

Common Scenarios

I asked Berkeley about using FRP with RxJS in a Web application. Berkeley said that the most common example is to do things like tracking the dragging of the mouse within a canvas or div. Combining this type of asynchronous events in a consistent manner becomes very trivial with these tools.

On the other hand, one of the most interesting things to do in Free Code Camp with RxJS is to use an observable as a cache for storing and providing the frontend to the programming challenges offered by the site. In Berkeley’s opinion, these types of things are a little more complicated without this tool.

The Ubiquity of FRP and ReactiveX

Another question was about the difference between ReactiveX (Reactive eXtensions) and RxJS (Reactive Extensions for JavaScript). The first is the overall API to perform asynchronous programming through the use of observable, while the latter is a concrete implementation of this API (a library) in JavaScript.

Having multiple implementations, ReactiveX is cross-platform and can be used both in the backend, as well as in the frontend.

Using RxJS in Smaller Applications

The success case we find more often when researching FRP and RxJS, is Netflix. This made me think that perhaps FRP is a tool that should be used in applications that deal with a large amount of data and interactions. When I asked him if it was advisable to use it on a simpler Web application, Berkeley responded,

…I would say yes. Whenever you need to do anything asynchronously, I believe that observable is by itself a much better pattern that ‘callbacks’. Especially if you’re using promises, you can also replace promises with observable very easily… I think that the only time that you really don’t want to include RxJS is if you have something that is very static or simple. With a quick one-timer, you won’t see a great benefit by adding RxJS, but I personally use it as much as possible.

Berkeley also commented that when using RxJS, you don’t have to worry if something is synchronous or asynchronous, since all this is abstracted in an observable. They will make sure that any asynchronous operation (e.g., calls to databases), are finalized.

What Exactly Is an Observable?

Trying to keep the conversation a little more beginner-friendly, Berkeley explained that RxJS is a library that allows us to create observable. An observable is a difficult concept to grasp at first, but the easiest way is as follows: an observable is a special kind of function that can return many elements over time. A function can take an entry and return an output. This way, an observable can return one, zero or many results.

You can think of it as an array whose elements are obtained through time.
A good way to see the practical use of it is talking about events. On a Web page, a click of the mouse on a div is an event. What if we want to detect each click? The traditional way of doing this would be using event emitters and callbacks.

Alternatively, you can wrap the event in an observable and receive each click as a continuous flow of events over time.

I implemented this simple example in the following “pen” to learn a little bit more and see how different the code would be using jQuery versus RxJS.

Here’s a copy-paste of the important parts to facilitate this comparison,

Event handling using jQuery.

Event handling using RxJS.

With a simple example it appears that the use of observable does not disclose too much. Performing more complex tasks than just obtaining the coordinates of a click can be difficult if done traditionally. It takes a lot code to move data from one place to another and get the information that really interests us. However, an observable allows you to map these events more cleanly. You can perform various operations on an observable (e.g., mapping, filtering, projecting, etc).

In addition, you can combine different types of events. For example, the mousedown and mouseup events could be combined in such a way so as to obtain the exact area in the viewport in which the user has clicked and dragged the mouse over. Then you could use that information to make, say,a video game where you drag something on the screen.

Introducing FRP into an Existing Project

Something that I was very interested in was obtaining some tips on how to sell the idea of introducing FRP into an existing project. People might be reluctant to change. I believe that this is worse when it comes to introducing a new paradigm.

For example, in JavaScript, many people are not accustomed to the functional style that is allowed by the language and some tools such as Underscore.js.

On this, Berkeley gave a couple of recommendations. First, explain this to whoever is responsible for making decisions in regards to the team’s main technology stack. There are strong reasons for using observable and functional programming, although there may be a steep learning curve ahead.

Another way would be to participate in a hackathon using RxJS so that the team starts to become familiar with this technology. This may make it easier to adopt the new paradigm and tools after the team members have used them.

Taking the First Steps with RxJS and Observables

Something that Berkeley mentioned is that he would not recommend starting with RxJS and observable for someone who is taking his first steps in programming, since it is a more appropriate tool for a developer with at least some experience.

He also mentioned that there may be a “mental strain” when adopting a new technology or paradigm, like RxJS and observable. The learning curve can be steep, and reaching the first hilltop of this curve can be most difficult.

It is sometimes necessary for someone to push you to do it, and what worked for him was simply watching many presentations on observable, diving into them, and starting to learn the tool.

…When using it in your project, you can witness the benefit and overcome the mental strain of adopting the paradigm. Once you understand it, once you click, then you think ‘I should be using this on all sides.’

Functional Programming: Beyond JavaScript

We talked a little bit about other programming languages. Berkeley mentioned that he has a particular interest in Clojure, ClojureScript, and Elm.

Clojure and ClojureScript are extremely interesting, although they may have a noisy syntax for those who are not accustomed to it, or are easily distracted by so many parentheses. On the other hand, Elm is another functional language that compiles to JavaScript and was the inspiration behind Redux.

…I think that the difficulty is that JavaScript is everywhere. It is in the browser, you can launch servers extremely easy …

It is difficult to find languages that can overcome the barriers to dethrone JavaScript. There are a lot of interesting languages out there, [but] I believe that using JavaScript in a functional way is not enough.”

Free Code Camp and Other Topics

I invite you to watch the complete video of this DojoLIVE! episode.

I hope more people will benefit from this type of discussions. Hopefully, it peaks your interest in experimenting with FRP and tools such as RxJS.

Being a co-host was a very good experience. I look forward to being one again in the near future.