rx

What is rx?

The 'rx' npm package is a library for composing asynchronous and event-based programs using observable sequences. It provides powerful utilities for creating, transforming, and querying data streams.

What are rx's main functionalities?

Creating Observables

This code demonstrates how to create an Observable that emits a single value, 'Hello', and then completes.

const { Observable } = require('rx');
const observable = Observable.create(observer => {
  observer.onNext('Hello');
  observer.onCompleted();
});
observable.subscribe(value => console.log(value));

Transforming Data

This code shows how to transform data in an Observable sequence using the 'map' operator, multiplying each number by 10.

const { Observable } = require('rx');
const source = Observable.from([1, 2, 3]);
const multiplied = source.map(value => value * 10);
multiplied.subscribe(value => console.log(value));

Combining Observables

This code snippet illustrates how to combine two Observables into one using 'combineLatest', which emits values from both Observables as an array.

const { Observable } = require('rx');
const obs1 = Observable.of('Hello');
const obs2 = Observable.of('World');
const combined = Observable.combineLatest(obs1, obs2, (v1, v2) => v1 + ' ' + v2);
combined.subscribe(value => console.log(value));

Error Handling

This example demonstrates how to handle errors in an Observable sequence using the 'throw' operator and the error handling function in 'subscribe'.

const { Observable } = require('rx');
const source = Observable.throw(new Error('Oops!'));
source.subscribe(
  value => console.log(value),
  error => console.error(error.message)
);

Filtering Data

This code sample shows how to filter data in an Observable sequence using the 'filter' operator, emitting only even numbers.

const { Observable } = require('rx');
const source = Observable.from([1, 2, 3, 4, 5]);
const filtered = source.filter(value => value % 2 === 0);
filtered.subscribe(value => console.log(value));

Other packages similar to rx

rxjs

RxJS is a reactive programming library for JavaScript. It offers a more modern API and is more actively maintained compared to 'rx'. It is the standard choice for use with frameworks like Angular.

most

Most.js is another reactive programming library that focuses on high performance and low memory usage. It claims to be one of the fastest reactive streaming libraries.

baconjs

Bacon.js provides functional reactive programming and streams. It has a different API design and is known for its ease of use and integration with other libraries and frameworks.

kefir

Kefir.js is a Reactive Programming library with focus on high performance and low memory usage. It is similar to Bacon.js but with a smaller API surface and less overhead.

README

The Need to go Reactive | About the Reactive Extensions | Batteries Included | Why RxJS? | Dive In! | Resources | Getting Started | What about my libraries? | Compatibility | Contributing | License

The Reactive Extensions for JavaScript (RxJS) ^2.5...

...is a set of libraries to compose asynchronous and event-based programs using observable collections and Array#extras style composition in JavaScript

The project is actively developed by Microsoft Open Technologies, Inc., in collaboration with a community of open source developers.

The Need to go Reactive

Applications, especially on the web have changed over the years from being a simple static page, to DHTML with animations, to the Ajax revolution. Each time, we're adding more complexity, more data, and asynchronous behavior to our applications. How do we manage it all? How do we scale it? By moving towards "Reactive Architectures" which are event-driven, resilient and responsive. With the Reactive Extensions, you have all the tools you need to help build these systems.

About the Reactive Extensions

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 that many of you already know by Array#extras in JavaScript. Using RxJS, developers represent asynchronous data streams with Observables, query asynchronous data streams using our many operators, and parameterize the concurrency in the asynchronous data streams using Schedulers. Simply put, RxJS = Observables + Operators + 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.

Using RxJS, you can represent multiple asynchronous data streams (that come from diverse sources, e.g., stock quote, tweets, computer events, web service requests, etc.), and subscribe to the event stream using the Observer object. The Observable notifies the subscribed Observer instance whenever an event occurs.

Because observable sequences are data streams, you can query them using standard query operators implemented by the Observable type. Thus you can filter, project, aggregate, compose and perform time-based operations on multiple events easily by using these operators. In addition, there are a number of other reactive stream specific operators that allow powerful queries to be written. Cancellation, exceptions, and synchronization are also handled gracefully by using the methods on the Observable object.

But the best news of all is that you already know how to program like this. Take for example the following JavaScript code, where we get some stock data and then manipulate and then iterate the results.

/* Get stock data somehow */
var source = getStockData();

source
  .filter(function (quote) {
      return quote.price > 30;
  })
  .map(function (quote) {
      return quote.price;
  })
  .forEach(function (price) {
    console.log('Prices higher than $30: $' + price);
  });

Now what if this data were to come as some sort of event, for example a stream, such as as a WebSocket, then we could pretty much write the same query to iterate our data, with very little change.

/* Get stock data somehow */
var source = getAsyncStockData();

var subscription = source
  .filter(function (quote) {
    return quote.price > 30;
  })
  .map(function (quote) {
    return quote.price;
  })
  .forEach(
    function (price) {
      console.log('Prices higher than $30: $' + price);
    },
    function (err) {
      console.log('Something went wrong: ' + err.message);
    });

/* When we're done */
subscription.dispose();

The only difference is that we can handle the errors inline with our subscription. And when we're no longer interested in receiving the data as it comes streaming in, we call dispose on our subscription.

Batteries Included

Sure, there are a lot of libraries to get started with RxJS. Confused on where to get started? Start out with the complete set of operators with rx.all.js, then you can reduce it to the number of operators that you really need, and perhaps stick with something as small as rx.lite.js.

This set of libraries include:

• rx.all.js - complete version of RxJS with all operators, minus the testing operators, and comes with a compat file for older browsers.
• rx.lite.js - lite version with event bindings, creation, time and standard query operators with a compat file for older browsers. For most operations, this is the file you'll want to use unless you want the full power of RxJS.
• rx.lite.extras.js - the operators missing from rx.lite.js that can be found in rx.js.
• rx.js - core library for ES5 compliant browsers and runtimes plus compatibility for older browsers.
• rx.aggregates.js - aggregation event processing query operations
• rx.async.js - async operations such as events, callbacks and promises plus a compat file for older browsers.
• rx.backpressure.js - backpressure operators such as pause/resume and controlled.
• rx.binding.js - binding operators including multicast, publish, publishLast, publishValue, and replay
• rx.coincidence.js - reactive coincidence join event processing query operations
• rx.experimental.js - experimental operators including imperative operators and forkJoin
• rx.joinpatterns.js - join patterns event processing query operations
• rx.testing.js - used to write unit tests for complex event processing queries
• rx.time.js - time-based event processing query operations
• rx.virtualtime.js - virtual-time-based schedulers

Why RxJS?

One question you may ask yourself, is why RxJS? What about Promises? Promises are good for solving asynchronous operations such as querying a service with an XMLHttpRequest, where the expected behavior is one value and then completion. The Reactive Extensions for JavaScript unifies both the world of Promises, callbacks as well as evented data such as DOM Input, Web Workers, Web Sockets. Once we have unified these concepts, this enables rich composition.

To give you an idea about rich composition, we can create an autocompletion service which takes the user input from a text input and then query a service, making sure not to flood the service with calls for every key stroke, but instead allow to go at a more natural pace.

First, we'll reference the JavaScript files, including jQuery, although RxJS has no dependencies on jQuery...

<script src="http://code.jquery.com/jquery.js"></script>
<script src="rx.lite.js"></script>

Next, we'll get the user input from an input, listening to the keyup event by using the Rx.Observable.fromEvent method. This will either use the event binding from jQuery, Zepto, AngularJS, Backbone.js and Ember.js if available, and if not, falls back to the native event binding. This gives you consistent ways of thinking of events depending on your framework, so there are no surprises.

var $input = $('#input'),
    $results = $('#results');

/* Only get the value from each key up */
var keyups = Rx.Observable.fromEvent($input, 'keyup')
  .map(function (e) {
    return e.target.value;
  })
  .filter(function (text) {
    return text.length > 2;
  });

/* Now debounce the input for 500ms */
var debounced = keyups
  .debounce(500 /* ms */);

/* Now get only distinct values, so we eliminate the arrows and other control characters */
var distinct = debounced
  .distinctUntilChanged();

Now, let's query Wikipedia! In RxJS, we can instantly bind to any Promises A+ implementation through the Rx.Observable.fromPromise method or by just directly returning it, and we wrap it for you.

function searchWikipedia (term) {
  return $.ajax({
    url: 'http://en.wikipedia.org/w/api.php',
    dataType: 'jsonp',
    data: {
      action: 'opensearch',
      format: 'json',
      search: term
    }
  }).promise();
}

Once that is created, now we can tie together the distinct throttled input and then query the service. In this case, we'll call flatMapLatest to get the value and ensure that we're not introducing any out of order sequence calls.

var suggestions = distinct
  .flatMapLatest(searchWikipedia);

Finally, we call the forEach method on our observable sequence to start pulling data.

suggestions.forEach(
  function (data) {
    $results
      .empty()
      .append ($.map(data[1], function (value) {
        return $('<li>').text(value);
      }));
  },
  function (error) {
    $results
      .empty()
      .append($('<li>'))
        .text('Error:' + error);
  });

And there you have it!

Dive In!

Please check out:

• The full documentation
• Our many great examples
• Our design guidelines
• Our contribution guidelines
• Our complete Unit Tests
• Our recipes

Resources

• Contact us

  • Tech Blog
  • Twitter @ReactiveX
  • Twitter @OpenAtMicrosoft
  • StackOverflow rxjs
  • Slack

• Tutorials

  • The introduction to Reactive Programming you've been missing
  • 2 minute introduction to Rx
  • Learn RxJS
  • RxJS Koans
  • RxJS Workshop
  • Rx Workshop
  • Reactive Programming and MVC

• Reference Material

  • Rx Marbles
  • RxJS GitBook
  • Intro to Rx
  • 101 Rx Samples Wiki
  • Rx Design Guidelines
  • Beginners Guide to Rx
  • Visualizing Reactive Streams

• Community Examples

  • React
    • Rx-React
    • RxReact
    • cycle-react
    • React RxJS Autocomplete
    • React RxJS TODO MVC
    • Rx TODO MVC
    • React RxJS Router
    • React + RxJS + Angular 2.0 di.js TODO MVC
    • React + RxJS Reactive Cube
    • Real-Time with React + RxJS + Meteor
    • React + RxJS Flow
    • Reactive Widgets
    • React RxJS Infinite Scroll
  • Flux
    • Rx-Flux
    • ReactiveFlux
    • Thundercats.js
    • Flurx
    • RR
  • Ember
    • RxEmber
  • AngularJS
    • Ninya.io - Angular + RxJS + rx.angular.js - Site
    • The Car Game - Site - Blog Post
  • Cycle
    • Cycle TODO MVC
  • WebRx
  • Everything else
    • RxVision
    • Mario Elm Example
    • Firebase + RxJS
    • Reactive Trader - Site
  • NPM Dependencies

• Presentations

  • Don't Cross the Streams - Cascadia.js 2012 slides/demos | video
  • Curing Your Asynchronous Blues - Strange Loop 2013 slides/demos | video
  • Streaming and event-based programming using FRP and RxJS - FutureJS 2014 slides/demos | video
  • Tyrannosaurus Rx - James Hughes
  • Taming Asynchronous Workflows with Functional Reactive Programming - EuroClojure - Leonardo Borges slides | video

• Reactive All the Things - ng-conf 2015 - Martin Gontovnikas & Ben Lesh

  • Slides
  • Video

• Videos

  • Practical Rx with Matthew Podwysocki, Bart de Smet and Jafar Husain
  • Netflix and RxJS
  • Hello RxJS - Channel 9
  • MIX 2011
  • RxJS Today and Tomorrow - Channel 9
  • Reactive Extensions Videos on Channel 9
  • Asynchronous JavaScript at Netflix - Netflix JavaScript Talks - Jafar Husain
  • Asynchronous JavaScript at Netflix - MountainWest JavaScript 2014 - Jafar Husain
  • Asynchronous JavaScript at Netflix - HTML5DevConf - Jafar Husain
  • Adding Even More Fun to Functional Programming With RXJS - Ryan Anklam
  • Reactive Angular - Devoxx France 2014 - Martin Gontovnikas
  • Reactive Game Programming for the Discerning Hipster - JSConf 2014 - Bodil Stokke

• Podcasts

  • .NET Rocks #907
  • JavaScript Jabber #83

• Articles

  • Your Mouse is a Database

• Books

  • RxJS
  • Intro to Rx
  • Programming Reactive Extensions and LINQ

Getting Started

There are a number of ways to get started with RxJS. The files are available on cdnjs and jsDelivr.

Custom Builds

You can use the rx-cli to perform custom builds to create the RxJS you want:

$ rx --lite --compat --methods select,selectmany,takeuntil,fromevent

Download the Source

git clone https://github.com/Reactive-Extensions/rxjs.git
cd ./rxjs

Installing with NPM

```bash` $ npm install rx $ npm install -g rx

### Using with Node.js and Ringo.js

```js
var Rx = require('rx');

Installing with Bower

$ bower install rxjs

Installing with Jam

$ jam install rx

Installing All of RxJS via NuGet

$ Install-Package RxJS-All

Install individual packages via NuGet:

Install-Package RxJS-All
Install-Package RxJS-Lite
Install-Package RxJS-Main
Install-Package RxJS-Aggregates
Install-Package RxJS-Async
Install-Package RxJS-BackPressure
Install-Package RxJS-Binding
Install-Package RxJS-Coincidence
Install-Package RxJS-Experimental
Install-Package RxJS-JoinPatterns
Install-Package RxJS-Testing
Install-Package RxJS-Time

In a Browser:

<!-- Just the core RxJS -->
<script src="rx.js"></script>

<!-- Or all of RxJS minus testing -->
<script src="rx.all.js"></script>

<!-- Or keeping it lite -->
<script src="rx.lite.js"></script>

Along with a number of our extras for RxJS:

<script src="rx.aggregates.js"></script>
<script src="rx.async.js"></script>
<script src="rx.backpressure.js"></script>
<script src="rx.binding.js"></script>
<script src="rx.coincidencejs"></script>
<script src="rx.experimental.js"></script>
<script src="rx.joinpatterns.js"></script>
<script src="rx.time.js"></script>
<script src="rx.virtualtime.js"></script>
<script src="rx.testing.js"></script>

Using RxJS with an AMD loader such as Require.js

require({
  'paths': {
    'rx': 'path/to/rx-lite.js'
  }
},
['rx'], function(Rx) {
  var obs = Rx.Observable.of(42);
  obs.forEach(function (x) { console.log(x); });
});

What about my libraries?

The Reactive Extensions for JavaScript have no external dependencies any library, so they'll work well with just about any library. We provide bridges and support for various libraries including:

• Node.js
• React
  • Rx-React
  • RxReact
  • cycle-react
• Flux
  • Rx-Flux
  • ReactiveFlux
  • Thundercats.js
  • Flurx
  • RR
• Ember
  • RxEmber
• AngularJS
• HTML DOM
• jQuery (1.4+)
• MooTools
• Dojo 1.7+
• ExtJS

Compatibility

RxJS has been thoroughly tested against all major browsers and supports IE6+, Chrome 4+, FireFox 1+, and Node.js v0.4+.

Contributing

There are lots of ways to contribute to the project, and we appreciate our contributors. If you wish to contribute, check out our style guide.

You can contribute by reviewing and sending feedback on code checkins, suggesting and trying out new features as they are implemented, submit bugs and help us verify fixes as they are checked in, as well as submit code fixes or code contributions of your own. Note that all code submissions will be rigorously reviewed and tested by the Rx Team, and only those that meet an extremely high bar for both quality and design/roadmap appropriateness will be merged into the source.

License

Copyright (c) Microsoft Open Technologies, Inc. All rights reserved. Microsoft Open Technologies would like to thank its contributors, a list of whom are at https://github.com/Reactive-Extensions/RxJS/wiki/Contributors.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.