New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.

Using Reative Extensions (RxJS)

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.

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.

Twitter LinkedIn 



There are currently no comments, be the first to post one.

Comment Form

Only registered users may post comments.


Aderson Oliveira (22)
Alec Whittington (11)
Alessandra Davies (3)
Alex Shirley (10)
Andrew Hoefling (3)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (37)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Bogdan Litescu (1)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (213)
Chris Paterra (55)
Clint Patterson (108)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (181)
Daniel Valadas (48)
Dave Buckner (2)
David Poindexter (12)
David Rodriguez (3)
Dennis Shiao (1)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (80)
Francisco Perez Andres (17)
Geoff Barlow (12)
George Alatrash (12)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Kelly Ford (4)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matt Rutledge (2)
Matthias Schlomann (16)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (40)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Oliver Hine (1)
Patricio F. Salinas (1)
Patrick Ryan (1)
Peter Donker (54)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Sacha Trauwaen (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott Schlesier (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Steven Fisher (1)
Tony Henrich (3)
Torsten Weggen (3)
Tycho de Waard (4)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (180)
William Severance (5)
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out