Axxes IT Consultancy

How can Reactive Programming improve your front-end with RxJS

Skyrocketing in the enormous world of programming is the concept of Reactive Programming. RxJS is just one of the many implementations of this paradigm. This blog tells us something more about experiencing the paradigm of Reactive programming and using Reactive programming inside your frontend applications with RxJS. The way of programming we used for decades, and are still using most of the time right now, is based upon part A of our program asking for data from part B and doing something with it or just waiting to be called from another part. This is what we call pull based programming.

Reactive Programming uses the concept of data flows. Data flowing from the same part B to part A. This is what we call push based programming. The receiving end of our program will have to react to whatever data will be send to him in the future. This is why it’s called Reactive Programming.

My first Experience

To be honest, my first contact with reactive programming was not that pleasurable. My team inherited a chaotic backend application from another team filled with Observables. Nobody knew what to do with tem, let alone knowing how to use them. Being quite uncomfortable with Reactive Programming, we decided to remove it.

When a few months later we received the order of making an application, that used the innovative technology of websockets, we decided to use reactive programming in our frontend because their was a clear presence of data flowing from one part to the other. That’s were I first came in contact with RxJS. In fact their are a lot of implementations of Reactive programming in a lot of different languages. See: reactivex.io.

RxJS

RxJS

Although my first experience with Reactive Programming was not that great, I started to love the way it worked when using RxJS. The basic keyword that comes with RxJS (or any Reactive Implementations in that matter) is Observables. As the word describes, it is an object that can be observed and used by other parts of your software. When you want to use the data that comes out of an Observable, you have to subscribe to it with the subscribe function. Because there are a lot of filters, operations and functions you can do with and on Observables, it can be a little overwhelming. When doing my first-hand research I discovered a website called RxMarbles.com which helped me a lot understanding about operation of function to use in a particular situation.

rxjs marblesWhat the website does is explaining, in an interactive way, what every function, filter or operation does with your data coming out of your Observable. The website still uses RxJS 2.5 although the current version is 4.0.8 and version 5 is already available in beta. The website still gives you a good understanding of the working of some functions and operations.

At the same time I started using Java 8 streams and realised Reactive programming and streams were pretty much the same thing. I started to compare them with a pipeline flowing with water. On a certain point in the pipeline you can install yourself a filter, extracting all the invaluable things out of the water. At a later point in the pipeline you can decide to add some value (oxygen for example) to the pipeline. At the end of the pipeline you can add every drop into a bucket.

I know this is a pretty abstract way of describing the way RxJS and Reactive programming works in general, so let’s transform this example into some code. (jsfiddle) (note that the example sends a final number of values into the pipeline)

What if 2 pipelines from 2 different cities have to be combined into 1, filtered and provided with minerals to be healthy to be drinkable again. Again look at the code example of this use-case. (jsfiddle) (note that the each pipeline sends an infinite number of values)

I’m pretty sure you can find much more complicated and extraordinary examples all over the internet but I was just showing the way RxJS is used to define a flow of data being manipulated and filtered on the way.

A lot of people compare RxJS with promises and callbacks that can be chained together. In my opinion you can compare them in a way but with the enormous difference promises/callbacks are unstoppable. Once a promise is triggered there is no way to stop them. Once fired they WILL end and call their callback method, if you want it or not, either in a successful way or in an error. Observables though are stoppable and can be called to a halt in the middle of its process.

When I started understanding the way Reactive Programming works and what they want to accomplish with it, I started loving it immediately. Now I am looking forward to learn much more about it in order to use Reactive Programming in a correct way when the opportunity is there.

I hope you enjoyed my first post ever and am glad to hear your feedback.

Joey

Over de auteur

Joey Comhaire

Joey Comhaire

Frontend/Java Consultant

Deel dit artikel

LEER ONS BETER KENNEN

Maak alvast beter kennis met Axxes en onze bedrijfscultuur!

Need professional help in RxJS?

Contact us and let's see how we can help you!

Blijf op de hoogte van nieuws en updates in de sector