Atlanta, GA

Precursor

I am inordinately excited to launch a blog post about Reactive Programming in general but in specific to JavaScript (RxJS). There has been quite a lot of activity around the JS world, but the concept of Reactive Programming in itself is little old. I believe the reason for the hustle and bustle around RxJS is due to the typhoonlike wave of JS that’s devouring everything in its path like a Tasmanian devil. A caveat here is, every concept in software science has outgrown itself. Despite that, I have made an honest attempt to capture the holy grail and this is not a compendium of asynchrony.

Asynchronous at the heart

Reactive programming dates to the 1960s and the definition goes like this- “Any system that needs high user interactivity and hence cannot wait for the lull and delay while the ‘screen freezes’ for data retrieval… AJAX programming predates Async programming and Async programming predates the Reactive Programming (achieved through Stream-explained below), at least in terms of trend and vocabulary popularity”. Are we saying that the impetus of this concept is to improve user interactivity? A big YES is an answer. Remember the evolution of techniques we had in recent years AJAX, promises, $q library, async/await, Publish/Subscribe models, Observables (explained below) and then RxJS. It’s my opinion that these methodical improvements are syntactically simplified superior programming constructs or sugars contrary to the earlier unwieldy clunkier asynchronous programming approaches.

What is Asynchrony?

AJAX Pull Based Code: 

$.getJSON('https://designnutcracker.com/api/blogposts/1', function(data) {

  $('body').append(data.content);

});

//More programming syntaxes

//Like performing a computation or evaluation function.

computeFunction1();

computeFunction2();

Now on the contrary (not depicted in the above figure), the synchronous code would be like, pulling the REST API data and waiting for the data to be pulled and then execute the ‘append’ function and then subsequently execute the computeFunction 1 and 2. This way synchronous call blocks further execution and hence freezes the screen. This is resolved in the above simple example of AJAX request using jQuery library. Asynchronous programming makes it possible to express waiting for long-running actions without freezing the program during these actions. How? The $.getJSON API call can run and get data over the wire in its own sweet time, maybe 10 seconds or so but the computeFunction 1 and 2 is not blocked during that 10 seconds wait. It gets fired instantaneously and, hence unblocking.

What is an Observable concerning RxJS?

Observable Push Based Streams:

For brevity, we are jumping right into the typhoon called RxJS Streams. Now imagine you are at your desktop screen and you are dragging your mouse at various random sides- in consequence to that, the mousemove event is going to generate a steady stream of <x,y> coordinates. This is called a stream of values. This is just a cooked-up example and, one could type in a search bar and that based on each character press- fires a REST HTTP call retrieving data and populating the search dropdown – which is commonly called as lookahead or typeahead. This is a real-world scenario of streams. A stream of strings. How do we elegantly handle such stream? There is an awkward way of handling such scenarios. Like listening to the event click or mousedown and then in the callback you do your data manipulation or data pull. 

Refer the Gang of Four Observable pattern for better understanding the eye of the concept. Also familiarize with the concepts around Subject/Publisher, Observer, Attach/Detach, Notify, Update calls etc. Now we know what streams are and observable pattern is. We are going to mash things together to get the RxJS Observable.

GOF vs RxJS Observable: Assuming you have a solid grasp of the observable GOF pattern – (https://www.dofactory.com/net/observer-design-pattern), here the ‘attach’ is equivalent to ‘subscribe’, ‘notify’ is akin ‘next’, the ‘observer’ is the same in both GOF and RxJS Observable. How? The real RsJS code for observable is a wee bit over anybody’s head and hence here is a simplified one below:

For every ‘next’ call invocation- a series of the subscribed function gets fired looping one after another. Therefore ‘next’ is like ‘notify’ in GOF. But on a grand scale how does AJAX and mousemove examples we described above relate here. Observable in RxJS has a whole bunch of operators, which allow to slice and dice the stream. Like for example, you can create an observable stream of mousemove from operator ‘fromevent’, thus you can slice and dice using operator applied on top of it, like ‘filter’. Why AJAX? AJAX is a pull-based architecture and RsJS is a push-based architecture. The subscription technique allows firing series of callbacks (subscribed functions) as when the data is available, as opposed to waiting for the data to be pulled. 

Synopsis

That said, it’s time to wind down this post before it gets into a marathon of discussion. To conclude one could say that the crux of all these seemingly inconsequential inventions is user interface responsiveness and that’s exactly what reactive programming addresses. Is reactive programming the next holy grail, I am not convinced with that statement. The reason is that it addresses one part (responsiveness of UI) of the challenge.

I am not afraid of failure but success-CBA.