My Cart (0)  |  My Orders  |  My Downloads  |  My Auction  |  My Account  |  Help

Login |Register        Search

Using Reactive Extensions in DNN

                Print      Add To Favorite     Add To Watch List     Contact Author

Creator: host   7/15/2015 4:58:11 AM    Author: Jonathan Sheely   Source:   Views: 1731    0    0  
Module develop DNN 8 Dnn Tutorial Dnn development Javascript

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

  1. What happens if a user clicks the button twice?
  2. 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?
  3. 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.

Rating People: 0   Average Rating:   is built to provide DNN quality modules and DNN skins, some of them are free, some not. We wish these stuffs (free or not ) can be useful to you.

     Besides that, we also provide a full range of professional services, ranging from web site build, seo, system management, administration, support, senior consultancy and security services. We act as if your development project or network was ours, with care and respect. We are not satisfied until it works the way you want it to, and we don't silently ignore found issues as somebody else's problem.