Share via

The Reactive Extensions for JavaScript (RxJS) V2.0 now released

  • Article

Hot on the heels of the announcement of the availability of the Reactive Extensions for .NET v2.0 RTM, we are pleased to announce the release of the Reactive Extensions for JavaScript (RxJS) v2.0 RTM.  This release, just as in previous releases, strives to maintain parity with the Reactive Extensions for .NET as much as possible, minus such things as the blocking operators.  This is a major milestone in the life of the RxJS, including shipping source that you can use for debug purposes.

This post will focus on what’s inside and how you can get started.

Getting the Reactive Extensions for JavaScript

The Reactive Extensions for JavaScript consists of a number of files, which you can include based upon the functionality you want.  This keeps the size of your includes down significantly, where you may only end up using a few of the many Observable operators we support.  Currently, we ship three variations of each file, a source version, a Visual Studio Documentation (VSDoc) version and the minimized version.

RxJS consists of the following files and we’ll cover the details of each in subsequent posts:

  • rx.js – the  main library for the Reactive Extensions
  • rx.aggregates.js – aggregation operators such as min/max, count, sum, and average
  • rx.binding.js – binding operators such as multicast, publish and replay
  • rx.coincidence.js – coincidence operators such as join, and groupJoin
  • rx.experimental.js – experimental operators such as the imperative operators and forkJoin
  • rx.joinpatterns.js – join pattern calculus implementation
  • rx.testing.js – used to write unit tests for complex processing queries
  • rx.time.js – time-based event processing query operations

You have a number of ways of getting RxJS including a direct download from MSDN, NuGet NPM via Node.js, and as well on our GitHub page.

Installing with NuGet

The first option of getting RxJS is through NuGet.  Starting with Visual Studio 2012, NuGet is automatically built in, but for previous versions you can install via www.nuget.org.  We have a number of packages in NuGet which correspond to the names of our files from above.  Each package contains the source file, as well as the documentation via a VSDoc file, and a minimized version. 

We ship the following packages in NuGet:

  • RxJS-All
  • RxJS-Main
  • RxJS-Aggregates
  • RxJS-Binding
  • RxJS-Coincidence
  • RxJS-Experimental
  • RxJS-JoinPatterns
  • RxJS-Testing
  • RxJS-Time

In addition to these main packages, we will continue to deliver the bridges to other libraries such as jQuery, Dojo, MooTools, ExtJS and more.  Just search for RxJS-Bridges to find them all.

Installing with NPM and Node.js

In this release we’ve also made the Reactive Extensions for JavaScript available through NPM, a package manager built on the popular Node.js platform.   With this past release, we’ve made an effort to make sure the Reactive Extensions for JavaScript works great on Node.js.  We’ve worked on modularization where you can include all of RxJS including all the operators all the files such as aggregates, binding, time, and more.  

To get started, just install rx from NPM from a command window. 

 > npm install rx

Once installed, you can reference RxJS like the following example of returning a single value and then writing the value to the console when we subscribe.

 // Reference main Rx
 var Rx = require('rx');
  
 var observable = Rx.Observable.returnValue(42);
  
 var subscription = observable.subscribe( function (value) {
     console.log(value);
 });

RxJS, with its emphasis on querying streams of data, is really well suited for Node.js applications. We’ll explore more of RxJS and Node.js in subsequent posts

 

Asynchronous Module Definition (AMD) support

Modularity is important for many JavaScript developers as code bases in JavaScript become larger, we look for ways of modularizing our code bases and loading only what we need.  One emerging format for modularity has emerged in Asynchronous Module Definition (AMD) which provides a way for JavaScript developers to build modularity into your web based applications.  The AMD format has been embraced by such libraries as jQuery, Dojo, MooTools and now, RxJS.

In the following example, we can use Require.js to load both the main RxJS library as well as the time-based operators to build a simple observable sequence which writes to the console every half second.

 // Require both core and time-based operators
 require(['rx', 'rx.time'], function (Rx) {
     
  
     // Print a value every 500ms
     var subscription = Rx.Observable
         .interval(500 /* ms */)
         .subscribe( function (x) {
             console.log(x);
         });
  
 });

How Do I Get Started…

One of the often asked questions when it comes to RxJS is how one gets started using the library.  This To that end, we’ve created a GitHub repository especially for our samples called RxJS-Examples.  This is just a sampling of some of the examples we have which highlight some of the Reactive Extensions capabilities.

  • Autocomplete (source) (demo)

    An autocomplete scenario which throttles typing to query Wikipedia for search suggestions.

  • Canvas Painting (source) (demo)

    Painting on a HTML5 Canvas.

  • Drag and Drop (source) (demo)

    Drag and Drop example with the Volta logo.

  • AMD and Require.js Integration (source) (demo)    
    Integration of the Asynchronous Module Definition pattern, Require.js and RxJS.

  • Time Flies Like an Arrow (source) (demo)

    A time based delay for each letter based upon its position .

  • Testing using QUnit (source) (demo)    
    Unit testing example using QUnit showing how you can test the timing aspects of observable sequences.

  • Testing using Node.js and Mocha (source)

    Unit testing example with Mocha and Node.js, which shows how to test the timings of observable sequences.

This is just the start of some of the samples and we’ll be posting more in the near future as well as more complete documentation.

Conclusion

We hope you enjoy the Reactive Extensions for JavaScript V2.0!  Stay tuned to this blog for more in the coming weeks and check out our samples on how you can get started with RxJS.

Comments

  • Anonymous
    November 04, 2012
    are there  any plans porting rx to typescript or just making a rx.d.ts?

  • Anonymous
    November 04, 2012
    We have an early draft of a TypeScript declarations file but are also checking with the TypeScript team about their plans to support generics. Depending on how things align, we'll ship what we have or hold off until we can do a better job using generics, reflecting the intended semantics even better. Stay tuned!

  • Anonymous
    January 03, 2013
    we’ll cover the details of each in subsequent posts. When?

  • Anonymous
    January 14, 2013
    Can't you do both? Release an TS 0.8.1 compatible  rx.d.ts. Then do a full rx.ts when TS 1.0 ships.

  • Anonymous
    March 11, 2013
    How to unsubscribe from observable?

  • Anonymous
    June 24, 2013
    Is there a plan of releasing official Typescript definition for RxJS now? TS v0.9 now supports generics.

  • Anonymous
    August 06, 2013
    Do the node JS bindings use the EventEmitter facility of Node?

  • Anonymous
    September 30, 2013
    Any word on the Typescript definition for RxJS? Any chance of getting better documentation for rxJS?

  • Anonymous
    September 30, 2013
    The comment has been removed