The project is actively developed by Microsoft, in collaboration with a community of open source developers.
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.
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.
/* Get stock data somehow */const source = getAsyncStockData;const subscription = sourcefilterquote => quoteprice > 30mapquote => quotepriceforEachprice => console.log`Prices higher than $30: `;
Now what if this data were to come as some sort of event, for example a stream, such as a WebSocket? Then we could pretty much write the same query to iterate our data, with very little change.
/* Get stock data somehow */const source = getAsyncStockData;const subscription = sourcefilterquote => quoteprice > 30mapquote => quotepricesubscribeprice => console.log`Prices higher than $30: `err => console.log`Something went wrong: `;;/* When we're done */subscriptiondispose;
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. Note the use of
subscribe instead of
forEach. We could also use
forEach which is an alias for
subscribe but we highly suggest you use
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. If you're an implementor of RxJS, then you can start out with
This set of libraries include:
To give you an idea about rich composition, we can create an autocompletion service which takes user input from a text input and then throttles queries a service (to avoid flooding the service with calls for every key stroke).
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.
const $input = $'#input';const $results = $'#results';/* Only get the value from each key up */var keyups = RxObservablefromEvent$input 'keyup'pluck'target' 'value'filtertext => textlength > 2 ;/* Now debounce the input for 500ms */var debounced = keyupsdebounce500 /* ms */;/* Now get only distinct values, so we eliminate the arrows and other control characters */var distinct = debounceddistinctUntilChanged;
Now, let's query Wikipedia! In RxJS, we can instantly bind to any Promises A+ implementation through the
Rx.Observable.fromPromise method. Or, directly return it and RxJS will wrap it for you.
return $ajaxurl: ''dataType: 'jsonp'data:action: 'opensearch'format: 'json'search: termpromise;
Once that is created, we can tie together the distinct throttled input and query the service. In this case, we'll call
flatMapLatest to get the value and ensure we're not introducing any out of order sequence calls.
var suggestions = distinctflatMapLatestsearchWikipedia;
Finally, we call the
subscribe method on our observable sequence to start pulling data.
suggestionssubscribedata =>$resultsemptyappend$mapdata1 value => $'<li>'textvalueerror=>$resultsemptyappend$'<li>'text'Error:' + error;;
And there you have it!
Please check out:
git clonecd ./rxjs
```bash` $ npm install rx $ npm install -g rx
### Using with Node.js and Ringo.js```jsvar Rx = require('rx');
$ bower install rxjs
$ jam install rx
$ Install-Package RxJS-All
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
<!-- Just the core RxJS --><!-- Or all of RxJS minus testing --><!-- Or keeping it lite -->
require'paths':'rx': 'path/to/rx-lite.js''rx' Rx =>const obs = RxObservableof42;obsforEachx => console.logx;;
RxJS has been thoroughly tested against all major browsers and supports IE6+, Chrome 4+, FireFox 1+, and Node.js v0.4+.
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.
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
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.