What is rxjs?
RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code. It provides an API for asynchronous programming with observable streams.
What are rxjs's main functionalities?
Creating Observables
This feature allows you to create an Observable stream of data. The code sample demonstrates how to create an Observable that emits several values over time.
const { Observable } = require('rxjs');
const observable = new Observable(subscriber => {
subscriber.next(1);
subscriber.next(2);
subscriber.next(3);
setTimeout(() => {
subscriber.next(4);
subscriber.complete();
}, 1000);
});
Subscribing to Observables
This feature allows you to subscribe to an Observable and react to the data being emitted. The code sample shows how to subscribe to an Observable created from an array.
const { from } = require('rxjs');
const observable = from([10, 20, 30]);
const subscription = observable.subscribe(x => console.log(x));
Operators
Operators are methods on the Observable type that allow for composing asynchronous operations in a declarative manner. The code sample demonstrates the use of 'filter' and 'map' operators to process data.
const { of } = require('rxjs');
const { map, filter } = require('rxjs/operators');
const nums = of(1, 2, 3, 4, 5);
const squaredNums = nums.pipe(
filter(n => n % 2 !== 0),
map(n => n * n)
);
squaredNums.subscribe(x => console.log(x));
Handling Errors
This feature allows you to handle errors in an Observable sequence. The code sample demonstrates how to catch and handle errors using the 'catchError' operator.
const { throwError, of } = require('rxjs');
const { catchError } = require('rxjs/operators');
const observable = throwError(new Error('Something went wrong!'));
const handled = observable.pipe(
catchError(error => of(`Caught: ${error.message}`))
);
handled.subscribe(x => console.log(x), err => console.error(err));
Combining Observables
This feature allows you to combine multiple Observables into one. The code sample demonstrates how to use 'combineLatest' to combine two streams of data.
const { combineLatest, of } = require('rxjs');
const temperature = of(70, 72, 76, 79, 75);
const humidity = of(40, 44, 49, 58, 55);
const combined = combineLatest([temperature, humidity]);
combined.subscribe(([temp, hum]) => console.log(`Temperature: ${temp} Humidity: ${hum}`));
Other packages similar to rxjs
most
Most.js is a high-performance reactive programming library. It offers similar functionality to RxJS but focuses on providing a smaller, faster, and more modular library.
xstream
XStream is a library for building asynchronous and event-based programs using observable streams. It is similar to RxJS but with a focus on simplicity and minimalism, offering a smaller set of operators.
kefir
Kefir.js is a Reactive Programming library with a focus on high performance and low memory usage. It is similar to RxJS but is more lightweight and has a slightly different API.
RxJS 5 (beta)
Reactive Extensions Library for JavaScript. This is a rewrite of Reactive-Extensions/RxJS and is intended to supersede it once this is ready. This rewrite is meant to have better performance, better modularity, better debuggable call stacks, while staying mostly backwards compatible, with some breaking changes that reduce the API surface.
Apache 2.0 License
Important
By contributing or commenting on issues in this repository, whether you've read them or not, you're agreeing to the Contributor Code of Conduct. Much like traffic laws, ignorance doesn't grant you immunity.
Installation and Usage
ES6 via npm
npm install rxjs-es
To import the entire core set of functionality:
import Rx from 'rxjs/Rx';
Rx.Observable.of(1,2,3)
To import only what you need by patching (this is useful for size-sensitive bundling):
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
Observable.of(1,2,3).map(x => x + '!!!');
To import what you need and use it with ES next function bind (best overall method, if possible):
import {Observable} from 'rxjs/Observable';
import {map} from 'rxjs/operator/map';
Observable.of(1,2,3)::map(x => x + '!!!');
CommonJS via npm
npm install rxjs
Import all core functionality:
var Rx = require('rxjs/Rx');
Rx.Observable.of(1,2,3);
Import only what you need and patch Observable (this is useful in size-sensitive bundling scenarios):
var Observable = require('rxjs/Observable').Observable;
require('rxjs/add/operator/map');
Observable.of(1,2,3).map(function (x) { return x + '!!!'; });
Import operators and use them manually you can do the following (this is also useful for bundling):
var Observable = require('rxjs/Observable').Observable;
var map = require('rxjs/operator/map').map;
map.call(Observable.of(1,2,3), function (x) { return x + '!!!'; });
You can also use the above method to build your own Observable and export it from your own module.
All Module Types (CJS/ES6/AMD/TypeScript) via npm
To install this library via npm version 3, use the following command:
npm install @reactivex/rxjs
If you are using npm version 2 before this library has achieved a stable version, you need to specify the library version explicitly:
npm install @reactivex/rxjs@5.0.0-beta.1
CDN
For CDN, you can use npmcdn. Just replace version
with the current
version on the link below:
https://npmcdn.com/@reactivex/rxjs@version/dist/global/Rx.umd.js
Node.js Usage:
var Rx = require('@reactivex/rxjs');
Rx.Observable.of('hello world')
.subscribe(function(x) { console.log(x); });
Goals
- Provide better performance than preceding versions of RxJS
- To model/follow the Observable Spec Proposal to the observable.
- Provide more modular file structure in a variety of formats
- Provide more debuggable call stacks than preceding versions of RxJS
Building/Testing
The build and test structure is fairly primitive at the moment. There are various npm scripts that can be run:
- build_es6: Transpiles the TypeScript files from
src/
to dist/es6
- build_cjs: Transpiles the ES6 files from
dist/es6
to dist/cjs
- build_amd: Transpiles the ES6 files from
dist/es6
to dist/amd
- build_global: Transpiles/Bundles the CommonJS files from
dist/cjs
to dist/global/Rx.js
- build_all: Performs all of the above in the proper order.
- build_test: builds ES6, then CommonJS, then runs the tests with
jasmine
- build_perf: builds ES6, CommonJS, then global, then runs the performance tests with
protractor
- build_docs: generates API documentation from
dist/es6
to dist/docs
- build_cover: runs
istanbul
code coverage against test cases - test: runs tests with
jasmine
, must have built prior to running. - tests2png: generates PNG marble diagrams from test cases.
npm run info
will list available script.
Example
npm run build_all
Performance Tests
Run npm run build_perf
or npm run perf
to run the performance tests with protractor
.
Run npm run perf_micro
to run micro performance test benchmarking operator.
Adding documentation
RxNext uses ESDoc to generate API documentation. Refer to ESDoc's documentation for syntax. Run npm run build_docs
to generate.
Generating PNG marble diagrams
The script npm run tests2png
requires some native packages installed locally: imagemagick
, graphicsmagick
, and ghostscript
.
For Mac OS X with Homebrew:
brew install imagemagick
brew install graphicsmagick
brew install ghostscript
For Debian Linux:
sudo add-apt-repository ppa:dhor/myway
apt-get install imagemagick
apt-get install graphicsmagick
apt-get install ghostscript
For Windows and other Operating Systems, check the download instructions here: