RxJS 101

Zhihao CHEN

What is Reactive Extensions

  • Developed by Microsoft, in collaboration with open source community
  • A set of libraries to compose asynchronous and event-based programs
  • Have lots of languages implements
Star Fork
RxAndroid 6,305 1,015
RxJava 12,927 2,071
RxJS 9,084 963
RxSwift 4,148 468
...

Reactive Extensions

In short words, it's dealing with

Reactive programing

What is Reactive Programming?

Asynchronous (event stream)

(Ongoing events) ordered in time

DOM events, Promise, values and etc...

Observable

Observer

Operator

Core concepts of RxJS

A representation of any set of values over any amount of time. This the most basic building block of RxJS.

Observable

check code "observable"

Observers are just objects with three callbacks, one for each type of notification that an Observable may deliver.

const observer = {
  next: x => console.log('Observer got a next value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
};

observable.subscribe(observer);

Observer

Operator

  1. An Operator is a function take creates a new Observable based on the current Observable.
  2. This is a pure operation: the previous Observable stays unmodified(immutable).

Code Demos

RxJS 101

By hanswe