The Reactive Extensions is a utility library utilizing the
iterator and
observer design patterns in a way that is ideal for handling asynchronous and event based operations.
For those who attended my session on Using Reactive Extensions in DNN at DNN-CON 2014 this year some reference slides.
Now if you haven't heard of the Reactive Extensions that's okay. You don't even have to know exactly how it works either to take advantage of its features. In the same way you don't need to know exactly how
jQuery or
AngularJS is written to see the value its implementation.
The Reactive Extensions for JavaScript (RxJS) is a set of libraries for composing asynchronous and event-based programs using observable sequences and fluent query operators modeled after Language Integrated Queries (LINQ). Using RxJS, developers represent asynchronous data streams with Observables, query asynchronous data streams using LINQ operators, and parameterize the concurrency in the asynchronous data streams using Schedulers. Simply put, RxJS = Observables + LINQ + Schedulers. Whether you are authoring a web-based application in JavaScript or a server-side application in Node.js, you have to deal with asynchronous and event-based programming as a matter of course. Although some patterns are emerging such as the Promise pattern, handling exceptions, cancellation, and synchronization is difficult and error-prone. -- RxJS
Now the first time I read that it honestly didn't make a lot of sense. But after taking a look at the the use case examples and digging a little deeper into the design pattern my mind was blown.
Use Cases - Asynchronous Operations
If you've taken a look at Clint Patterson introduction to module development series you'll see the section on service based architecture or API driven development. In today's web development AJAX and Web Sockets (SignalR) are the dominant technologies. But with that comes a rather difficult problem which is: When is this operation going to run?
If you're familiar with the concept of Promises then you'll recognize this pattern
A few problems arrive when looking at this code
- What happens if a user clicks the button twice?
- What happens if there is an error in requesting the first resource? And more importantly what happens if an error happens on the second resource?
- Code starts looking like a giraffe's head as it continues to nested indent inside itself.
This sequence of events in an asynchronous world can be better handles with the Reactive Extensions and fix a few of the issues identified above.
A few important keywords now present themselves as part of the RxJS sequence. throttle, flatMapLatest, map, flatMap, subscribe. Instead of breaking down this code bit by bit I will instead explain what these keywords do and how pairing them together brilliantly handles the sequence.
Firstly we bind to the click event and turn that into an observable. Which in simple terms just starts the pipeline so we can start adding our other keywords.
throttle takes the click events and will automatically ignore clicks within a specific period of time. We now have the ability to not fire multiple ajax requests when someone double clicks on your buttons.
flatMapLatest Think of this as an array of ajax requests. As a new item is added to the array it ignore any responses from the previous items in the array and wait for the latest response. If a second click does happen after the throttle window then this gives us the ability to ignore the results of the first request.
map is simply a way of formatting data before passing it down the chain. This becomes cornerstone when you start merging multiple sequences together.
flatMap Since each step of the animation becomes observable. flatMap flattens out the animation into a single sequence because we only care of it's done or not.
subscribe This is the listener for the results. Subscribe takes three callbacks. onNext, onError, onComplete. In many cases the onNext() is the only callback used. But the ability to specify an onError() and onComplete() function is what makes RxJS sequences so powerful.
Additional Resources
The Rx library is extremely powerful and is more than I could ever hope to cover in a single blog post. If you're interested in learning more here are a few resources.
I highly recommend you check out the example on creating an AutoComplete as it is one of the best examples of the problems that arise with asynchronous operations.
Jonathan Sheely a Senior Application Developer at InspectorIT. Jon is an out of the box thinker who has over 10 years experience building and supporting web application software and infrastructure. Jon specializes in ASP.NET C#, Javascript and CSS but is willing to learn anything that gets the job done.
Thomas Edison tried and failed nearly 2,000 times to develop the carbonized cotton-thread filament for the incandescent light bulb. And when asked about it, he said “I didn’t fail; I found out 2,000 ways how not to make a light bulb,” but he only needed one way to make it work.
