Introduction to Reactive Extensions (RxJS)

@tkssharma

UnitedHealth Group

Delhi,India

Reactive Extensions for JavaScript (RxJS) is a reactive streams library that allows you to work with asynchronous data streams. RxJS can be used both in the browser or in the server-side using Node.js.

What exactly are asynchronous data streams?

• Asynchronous, in JavaScript means we can call a function and register acallback to be notified when results are available, so we can continue with execution and avoid the Web Page from being unresponsive. 
• Data, raw information in the form of JavaScript data types as: Number, String, Objects (Arrays, Sets, Maps).
• Streams, sequences of data made available over time. As an example, opposed to Arrays you don’t need all the information to be present in order to start using them.

Observable sequences

In RxJS, you represent asynchronous data streams using observable sequences or also just called observables. Observables are very flexible and can be used using push or pull patterns.

$scope.counter = 0;
rx.Observable
 .interval(1000) 
 .take(3)
 .safeApply($scope, function(x) { 
   $scope.counter = x; 
 })
 .subscribe(); // shows 0, 1, 2

 Observable (rx.Observable) followed by a chain of operators ending with a call to subscribe.

----0----1----2----3----> rx.interval(1000)
----0----1----2----|      rx.interval(1000).take(3)
0, 1, 2, 3 are emitted values
X is an error
| is the 'completed' signal
---> is the timeline

Data Stream

Observables and Operators

RxJS combines Observables and Operators so we can subscribe to streams and react to changes using composable operations

Observables and Operators

var observer = rx.Observer.create(
  function onNext(result){ 
    console.log(result); 
  },
  function onError(err){ 
    console.log(err); 
  },
  function onCompleted(){ 
    console.log('Completed'); 
  }
);
observable.subscribe(observer);

 Operators

A list of the most common: merge @, concat @, defer, do, map @,flatMapLatest, fromPromise, fromEvent, takeUntil @, throttle, delay @,empty, catch, if, timer, filter, zip @.