ReactiveX

What is Observable, Observer & Observers ?

ReactiveX

Observer Design Pattern Example

class Observable {
    constructor() {
      this.observers = [];
    }
    subscribe(observer) {
        this.observers.push(observer);
    }
    unsubscribe(observer) {
        this.observers = this.observers.filter((o) => o !== observer);
    }
    notify(data) {
        this.observers.forEach((o) => o.call(this, data));
    }
}

const observable = new Observable();

function log(value) {
  console.log(value);
}

observable.subscribe(log);
observable.notify('notify some msg');
observable.notify({msg: 'notify some obj'});

observable.unsubscribe(log);
observable.notify('some msg should display');

ReactiveX

ReactiveX

RxJS Observable (handmade)

class Observable {
    constructor(observer) {
      this.observer = observer;
    }
    map(cb) {
        this.observer = this.observer.map(cb);
        return this;
    }
    filter(predicate) {
        this.observer = this.observer.filter(predicate);
        return this;
    }
    subscribe(next) {
        return next(this.observer);
    }
}

new Observable('Observable'.split(''))
  .map((letter) => letter.toUpperCase())
  .filter((letter) => letter === 'S')
  .subscribe(console.log);
  

ReactiveX

Rx.Observable.from('Observable')
  .map((letter) => letter.toUpperCase())
  .filter((letter) => letter === 'S')
  .subscribe(console.log);

RxJS Observable (using RxJS)

new Observable('Observable'.split(''))
  .map((letter) => letter.toUpperCase())
  .filter((letter) => letter === 'S')
  .subscribe(console.log);

(handmade)

(RxJS)

ReactiveX

RxJS install

// Just the core RxJS
<script src="rx.js"></script>

// Or all of RxJS minus testing
<script src="rx.all.js"></script>

// Or keeping it lite
<script src="rx.lite.js"></script>

// installing with NPM
npm install rx

1. go to RxJS site

2. choose you platform

ReactiveX

Cheers!
you know RxJS what is next step ?

ReactiveX

Observable Operators

ReactiveX

marble diagrams, what is stream & why is conveniently ?

ReactiveX

const $incrementBtn = document.querySelector('#plus');
const $decrementBtn = document.querySelector('#minus');
const $result = document.querySelector('#result');

const incrementStream = Rx.Observable.fromEvent($incrementBtn, 'click');
const decrementStream = Rx.Observable.fromEvent($decrementBtn, 'click');

const plus = incrementStream.map(1);
const minus = decrementStream.map(-1);
const initialValue = 0;

const source = plus.merge(minus);

source
    .scan((acc, v) => acc + v, initialValue)
    .subscribe((v) => {
        $result.innerHTML = v;
    });

fromEvent

example

ReactiveX

const promiseResolve =  Promise.resolve({ data: 'some data' });
const promiseReject =  Promise.reject(new Error('error reason'));

const streamSuccess = Rx.Observable.fromPromise(promiseResolve);
const streamError = Rx.Observable.fromPromise(promiseReject);

streamSuccess.subscribe(
    (d) => { console.log('Resolve ', d); },
    (err) => {console.log('Reject ', err);},
    () => {console.log('Completed');}
);

streamError.subscribe(
    (d) => { console.log('Resolve ', d); },
    (err) => {console.log('Reject ', err);},
    () => {console.log('Completed');}
);

fromPromise

example

ReactiveX

Subject

const subject = new Rx.Subject();

const subscription = subject.subscribe(
  (x)=> { console.log('onNext: ' + x); },
  (e)=> { console.log('onError: ' + e.message); },
  () => { console.log('onCompleted'); }
);

subject.onNext(1);
// => onNext: 1

subject.onNext(2);
// => onNext: 2

subject.onCompleted();
// => onCompleted

subscription.dispose();

ReactiveX

BehaviorSubject

const subject = new Rx.BehaviorSubject(0);

const subscription = subject.subscribe(
  (x)=> { console.log('onNext: ' + x); },
  (e)=> { console.log('onError: ' + e.message); },
  () => { console.log('onCompleted'); }
);

// => onNext: 0

subject.onNext(1);
// => onNext: 1

subject.onNext(2);
// => onNext: 2

subject.onCompleted();
// => onCompleted

subscription.dispose();

ReactiveX

Where I can use it ?

Component login

Component user info

Auth Service

1

2

3

1

3

ReactiveX

Implementation

const authService = new Rx.BehaviorSubject({ userInfo: {}, isAuth: false });

const loginComponent = authService.subscribe(({ isAuth })=> { 
    console.log('Login Component, isAuth: ', isAuth); 
});

const userInfoComponent = authService.subscribe(({ isAuth })=> { 
    console.log('User Info Component, isAuth: ', isAuth); 
});


authService.onNext({ userInfo: { username: 'sarhan' }, isAuth: true });

// Will be display after change route
const OtherComponent = authService.subscribe(({ isAuth })=> { 
    console.log('Other Component, isAuth: ', isAuth); 
});