RxJS

The Reactive Extensions
for JavaScript


Joan Rieu — Google I/O Extended 2016 Bordeaux

Value sources

Single Multiple
Synchronous Function Iterable
Enumerable
Asynchronous Promise Rx.Observable

Operators

(1/4)

Operators

(2/4)

Operators

(3/4)

Operators

(4/4)


Total: 178 operators

Uses

Data streaming

  • À la Apache Spark
  • One-by-one transformation
  • Bulk operations (window)

Uses

Real-time math

  • Built-in operators
  • Automatic dependencies

Uses

User interface

  • Angular 2
  • React & Flux
  • Vue.js

Compatibility

  • Most UI frameworks
  • DOM events
  • Promises
  • Node.js callbacks
  • Socket.io
  • …

Case study

Autocomplete

Case study

Autocomplete

  • Multiple requests
  • Asynchronous callbacks
  • Out-of-order responses
  • …

☹

Case study

Autocomplete


	Rx.Observable.fromEvent(input, 'keyup')
		.map(e => e.target.value)
		.filter(input => input.length > 3)
		.debounce(250)
		.distinctUntilChanged()
		.flatMapLatest(input => searchAsync(input).retry(3))
		.subscribe(showResults)

TL; DR

RxJS is good for your code

  • Concise
  • Readable & maintainable
  • Efficient
  • Favors standards (ES 7)
  • Compatible with everything
  • Used more and more
  • Supported by Microsoft
  • Has a huge community
  • Lots of Stack Overflow answers