rxjs

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.

README

RxJS: Reactive Extensions For JavaScript

RxJS 6 Stable

MIGRATION AND RELEASE INFORMATION:

Find out how to update to v6, automatically update your TypeScript code, and more!

• Current home is MIGRATION.md

FOR V 5.X PLEASE GO TO THE 5.0 BRANCH

Reactive Extensions Library for JavaScript. This is a rewrite of Reactive-Extensions/RxJS and is the latest production-ready version of RxJS. 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

• Code of Conduct
• Contribution Guidelines
• Maintainer Guidelines
• Creating Operators
• API Documentation (WIP)

Versions In This Repository

• master - This all of the current, unreleased work, which is against v6 of RxJS right now
• stable - This is the branch for the latest version you'd get if you do npm install rxjs

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

To import only what you need by patching (this is useful for size-sensitive bundling):

import { Observable, Subject, ReplaySubject, from, of, range } from 'rxjs';
import { map, filter, switchMap } from 'rxjs/operators';

range(1, 200)
  .pipe(filter(x => x % 2 === 1), map(x => x + x))
  .subscribe(x => console.log(x));

Alternatively, you can use the built-in pipe method on Observables. See pipeable operators for more information.

CommonJS via npm

To install this library for CommonJS (CJS) usage, use the following command:

npm install rxjs

(Note: destructuring available in Node 8+)

const { Observable, Subject, ReplaySubject, from, of, range } = require('rxjs');
const { map, filter, switchMap } = require('rxjs/operators');

range(1, 200)
  .pipe(filter(x => x % 2 === 1), map(x => x + x))
  .subscribe(x => console.log(x));

CDN

For CDN, you can use unpkg:

https://unpkg.com/rxjs/bundles/rxjs.umd.min.js

The global namespace for rxjs is rxjs:

const { Observable, Subject, ReplaySubject, from, of, range } = rxjs;
const { map, filter, switchMap } = rxjs.operators;

range(1, 200)
  .pipe(filter(x => x % 2 === 1), map(x => x + x))
  .subscribe(x => console.log(x));

Goals

• Smaller overall bundles sizes
• 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

• npm run build_all - builds everything
• npm test - runs tests

npm run info will list available scripts (there are a lot LOL)

Performance Tests

Run npm run build_perf or npm run perf to run the performance tests with protractor.

Run npm run perf_micro [operator] 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.

At the moment we are trying to improve the documentation. For this purpose the Documentation is in a separate GitHub Repository. For a quick instruction take a look at the documentation guidelines. We are really happy about any type of contributions!

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
• You may need to install the Ghostscript fonts manually:
  • Download the tarball from the gs-fonts project
  • mkdir -p /usr/local/share/ghostscript && tar zxvf /path/to/ghostscript-fonts.tar.gz -C /usr/local/share/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:

• http://imagemagick.org
• http://www.graphicsmagick.org
• http://www.ghostscript.com/