Top Related Projects
Observables for ECMAScript
Simple, scalable state management.
RxJava – Reactive Extensions for the JVM – a library for composing asynchronous and event-based programs using observable sequences for the Java VM.
Reactive Programming in Swift
RxJS middleware for action side effects in Redux using "Epics"
A functional and reactive JavaScript framework for predictable code
Quick Overview
RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using Observables, making it easier to compose asynchronous or callback-based code. It provides powerful tools for handling complex asynchronous operations and event-based programs, allowing developers to write more maintainable and efficient code.
Pros
- Powerful abstraction for handling asynchronous operations and event streams
- Extensive set of operators for transforming, combining, and manipulating data streams
- Excellent for managing complex application state and side effects
- Strong TypeScript support and integration with Angular framework
Cons
- Steep learning curve for developers new to reactive programming concepts
- Can lead to overly complex code if not used judiciously
- Performance overhead for simple use cases
- Large bundle size if not properly tree-shaken
Code Examples
- Creating and subscribing to an Observable:
import { Observable } from 'rxjs';
const observable = new Observable(subscriber => {
subscriber.next(1);
subscriber.next(2);
subscriber.next(3);
setTimeout(() => {
subscriber.next(4);
subscriber.complete();
}, 1000);
});
observable.subscribe({
next: x => console.log('Got value ' + x),
error: err => console.error('Something wrong occurred: ' + err),
complete: () => console.log('Done'),
});
- Using operators to transform data:
import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';
of(1, 2, 3, 4, 5)
.pipe(
filter(n => n % 2 === 0),
map(n => n * 2)
)
.subscribe(x => console.log(x));
// Output: 4, 8
- Handling HTTP requests with RxJS:
import { fromEvent } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
const searchBox = document.getElementById('search');
fromEvent(searchBox, 'input')
.pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap(event => ajax(`https://api.github.com/users/${event.target.value}`))
)
.subscribe(response => console.log(response.response));
Getting Started
To start using RxJS in your project:
- Install RxJS:
npm install rxjs
- Import and use RxJS in your code:
import { of } from 'rxjs';
import { map } from 'rxjs/operators';
of(1, 2, 3)
.pipe(map(x => x * 2))
.subscribe(console.log);
// Output: 2, 4, 6
For more detailed information and advanced usage, refer to the official RxJS documentation.
Competitor Comparisons
Observables for ECMAScript
Pros of proposal-observable
- Simpler and more lightweight, focusing on core Observable functionality
- Designed as a potential ECMAScript standard, aiming for broader adoption
- Provides a foundational API that can be extended by libraries like RxJS
Cons of proposal-observable
- Limited feature set compared to RxJS's extensive operators and utilities
- Less mature ecosystem and community support
- Lacks advanced functionality for complex reactive programming scenarios
Code Comparison
proposal-observable:
const observable = new Observable(observer => {
observer.next(1);
observer.next(2);
observer.complete();
});
observable.subscribe(console.log);
RxJS:
import { Observable } from 'rxjs';
const observable = new Observable(subscriber => {
subscriber.next(1);
subscriber.next(2);
subscriber.complete();
});
observable.subscribe(console.log);
The basic usage is similar, but RxJS offers a wide range of operators and utilities for more complex operations:
import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';
of(1, 2, 3, 4, 5)
.pipe(
filter(n => n % 2 === 0),
map(n => n * 2)
)
.subscribe(console.log);
proposal-observable focuses on providing a standardized Observable implementation, while RxJS offers a comprehensive toolkit for reactive programming with numerous operators and utilities.
Simple, scalable state management.
Pros of MobX
- Simpler learning curve and less boilerplate code
- Automatic tracking of observables and reactions
- Better performance for complex state management scenarios
Cons of MobX
- Less control over data flow and side effects
- Smaller ecosystem and community compared to RxJS
- Potential for overuse of mutable state
Code Comparison
MobX:
import { observable, action } from 'mobx';
class Store {
@observable count = 0;
@action increment() {
this.count++;
}
}
RxJS:
import { BehaviorSubject } from 'rxjs';
const count$ = new BehaviorSubject(0);
const increment = () => {
count$.next(count$.getValue() + 1);
};
Summary
MobX and RxJS are both popular libraries for managing state and handling asynchronous operations in JavaScript applications. MobX focuses on simplicity and ease of use, with automatic tracking of observables and reactions. It's well-suited for complex state management scenarios and offers better performance in such cases. However, it provides less control over data flow and has a smaller ecosystem compared to RxJS.
RxJS, on the other hand, offers a more powerful and flexible approach to reactive programming, with a larger ecosystem and community support. It provides fine-grained control over data streams and side effects but comes with a steeper learning curve and more boilerplate code.
The choice between MobX and RxJS depends on the specific requirements of your project, team expertise, and preferred programming paradigms.
RxJava – Reactive Extensions for the JVM – a library for composing asynchronous and event-based programs using observable sequences for the Java VM.
Pros of RxJava
- Better performance and efficiency in Java environments
- More mature and stable, with a longer history in the Java ecosystem
- Extensive support for Android development
Cons of RxJava
- Steeper learning curve for developers new to reactive programming
- Less seamless integration with web technologies compared to RxJS
Code Comparison
RxJava:
Observable.just("Hello", "World")
.map(String::toUpperCase)
.subscribe(System.out::println);
RxJS:
import { of } from 'rxjs';
import { map } from 'rxjs/operators';
of("Hello", "World")
.pipe(map(x => x.toUpperCase()))
.subscribe(console.log);
Both libraries share similar concepts and operators, but RxJava is tailored for Java and Android development, while RxJS is designed for JavaScript environments, particularly web applications. RxJava offers better performance in Java-based systems, while RxJS provides smoother integration with web technologies and frameworks like Angular. The choice between the two depends on the target platform and development ecosystem.
Reactive Programming in Swift
Pros of RxSwift
- Native iOS development support with Swift-specific optimizations
- Seamless integration with Apple's ecosystem and frameworks
- Strong type safety and compile-time checks inherent to Swift
Cons of RxSwift
- Limited to iOS and macOS platforms
- Smaller community and ecosystem compared to RxJS
- Steeper learning curve for developers new to functional reactive programming
Code Comparison
RxSwift:
Observable.from([1, 2, 3, 4, 5])
.filter { $0 % 2 == 0 }
.map { $0 * 2 }
.subscribe(onNext: { print($0) })
RxJS:
from([1, 2, 3, 4, 5])
.pipe(
filter(x => x % 2 === 0),
map(x => x * 2)
)
.subscribe(x => console.log(x));
Both RxSwift and RxJS implement the ReactiveX pattern, providing similar functionality for handling asynchronous data streams. RxSwift is tailored for Swift and iOS development, offering tight integration with Apple's ecosystem and leveraging Swift's type safety. RxJS, on the other hand, is more versatile and can be used across various JavaScript environments, including browsers and Node.js.
While RxSwift excels in native iOS development, RxJS benefits from a larger community, more extensive documentation, and broader platform support. The choice between the two largely depends on the target platform and the developer's familiarity with the respective programming languages.
RxJS middleware for action side effects in Redux using "Epics"
Pros of redux-observable
- Specifically designed for Redux, providing seamless integration with Redux applications
- Offers middleware for handling side effects in Redux, simplifying complex async operations
- Leverages the power of RxJS while providing a more focused API for Redux use cases
Cons of redux-observable
- Steeper learning curve for developers not familiar with RxJS concepts
- More opinionated and less flexible compared to RxJS for general-purpose reactive programming
- Smaller community and ecosystem compared to RxJS
Code Comparison
redux-observable:
const pingEpic = action$ => action$.pipe(
ofType('PING'),
delay(1000),
mapTo({ type: 'PONG' })
);
RxJS:
const ping$ = new Subject();
const pong$ = ping$.pipe(
delay(1000),
map(() => 'PONG')
);
Summary
redux-observable is a specialized library built on top of RxJS, tailored for Redux applications. It provides a more focused API for handling side effects in Redux, making it easier to manage complex asynchronous operations. However, it comes with a steeper learning curve and is less flexible for general-purpose reactive programming compared to RxJS.
RxJS, on the other hand, is a more versatile and widely-used reactive programming library. It offers a broader range of operators and can be used in various contexts beyond Redux applications. RxJS has a larger community and ecosystem, but may require more setup and configuration when used with Redux.
A functional and reactive JavaScript framework for predictable code
Pros of Cycle.js
- Provides a complete framework for building reactive applications
- Emphasizes functional and reactive programming paradigms
- Offers a unique "dialogue" abstraction for handling side effects
Cons of Cycle.js
- Steeper learning curve due to its unique architecture
- Smaller community and ecosystem compared to RxJS
- Less flexibility for integration with other libraries or frameworks
Code Comparison
Cycle.js:
function main(sources) {
const input$ = sources.DOM.select('.field').events('input');
const name$ = input$.map(ev => ev.target.value).startWith('');
const vdom$ = name$.map(name =>
div([
label('Name:'),
input('.field', {attrs: {type: 'text'}}),
h1(`Hello ${name}`)
])
);
return { DOM: vdom$ };
}
RxJS:
const input$ = fromEvent(inputElement, 'input');
const name$ = input$.pipe(
map(event => event.target.value),
startWith('')
);
name$.subscribe(name => {
outputElement.textContent = `Hello ${name}`;
});
Both examples demonstrate reactive programming, but Cycle.js provides a more structured approach with its framework, while RxJS offers more flexibility as a standalone library for reactive programming.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
RxJS: Reactive Extensions For JavaScript
RxJS 8 Monorepo
Look for RxJS and related packages under the /packages directory. Applications like the rxjs.dev documentation site are under the /apps directory.
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.
Versions In This Repository
- master - This is all of the current work, which is against v8 of RxJS right now
- 7.x - This is the branch for version 7.X
- 6.x - This is the branch for version 6.X
Most PRs should be made to master.
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.
Development
Because of this issue we're using yarn
. (Basically the docs app uses @types/jasmine
, and the package uses @types/mocha
and they get hoisted to the top level by npm install
with workspaces, and then TypeScript vomits everywhere when you try to build).
cd
to the repository rootyarn install
to install all dependenciesyarn workspace rxjs test
will run the RxJS test suiteyarn workspace rxjs.dev start
will start the rxjs.dev documentation site local development server
Top Related Projects
Observables for ECMAScript
Simple, scalable state management.
RxJava – Reactive Extensions for the JVM – a library for composing asynchronous and event-based programs using observable sequences for the Java VM.
Reactive Programming in Swift
RxJS middleware for action side effects in Redux using "Epics"
A functional and reactive JavaScript framework for predictable code
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot