RxJS

Observable

Promise vs Observable

EventEmitter vs Observable

What is a hardest thing in programming?

Async

var a = 1 + 1;
var b = a - 1;
var c = b * a;

var countries = getCountries();
renderCountries(countries);

var hotels = getHotels(countries);
renderHotels(hotels);

var rooms = getRooms(hotels);
renderRooms(rooms);

var countries = await getCountries();
renderCountries(countries);

var hotels = await getHotels(countries);
renderHotels(hotels);

var rooms = await getRooms(hotels);
renderRooms(rooms);

var exampleSocket = new WebSocket("wss://www.example.com/socketserver", "protocolOne");
exampleSocket.onmessage = function (event) {
  console.log(event.data);
}


var elt = document.getElementById("#play_button");
elt.addEventListener("click", () => {  ...  }, false);

const clicksGenerator = function (elt) {
    return {
        [Symbol.asyncIterator] () {
            return this;
        },
        next () {
            return new Promise((r) => {
                elt.addEventListener("click", function clickHandler (e) {
                    r({
                        value: e,
                        done: false
                    });

                    elt.removeEventListener("click", clickHandler, false);
                }, false);
            });
        }
    };
};

(async function () {
    for await (const click of clicksGenerator(document.body)) {
        console.log(click);
    }
})();

How did we get used to work with sequences?

forEach, map, reduce, filter

arrOfUsers
    .filter(u => u.age > 18)
    .map(u => { ...u, fullName: `${u.firstName} ${u.lastName}` })
    .reduce((akk, u) => akk.find(u) ? akk : [ ...akk, u ], []);

Is it async or sync?

function getUserById (id) {
    return arrOfUsers.filter(u => u.id > id)[0];
}

function getUserById (id) {
    return arrOfUsers.filter(u => u.id > id);
}

getUserById("some").map(u => { ... });
getUserById("some").forEach(u => { ... });

anic

Rx

Promise -> Single

EventEmitter -> Observable

How to join Observable?

Hot, Warm and Cold Observables

let obs = Rx.Observable.create(observer => observer.next(1));

obs.subscribe(v => console.log("1st subscriber: " + v));
obs.subscribe(v => console.log("2nd subscriber: " + v));

1st subscriber: 1
2nd subscriber: 1

let obs = Rx.Observable.create(observer => observer.next(Date.now()));

obs.subscribe(v => console.log("1st subscriber: " + v));
obs.subscribe(v => console.log("2nd subscriber: " + v));

1st subscriber: 1465990942935
2nd subscriber: 1465990942936

let obs = Rx.Observable
            .create(observer => observer.next(Date.now()))
            .publish();

obs.subscribe(v => console.log("1st subscriber: " + v));
obs.subscribe(v => console.log("2nd subscriber: " + v));

obs.connect();

1st subscriber: 1465994477014
2nd subscriber: 1465994477014

Subject

let obs = Rx.Observable
            .create(observer => observer.next(Date.now()))
            .publish();
obs.connect();

obs.subscribe(v => console.log("1st subscriber: " + v));
obs.subscribe(v => console.log("2nd subscriber: " + v));

 let obs = Rx.Observable
            .interval(1000)
            .publish()
            .refCount();

obs.subscribe(v => console.log("1st subscriber:" + v));
setTimeout(()
  => obs.subscribe(v => console.log("2nd subscriber:" + v)), 1100);

1st subscriber:0
1st subscriber:1
2nd subscriber:1
1st subscriber:2
2nd subscriber:2

let obs = Rx.Observable
            .interval(1000)
            .publish()
            .refCount();

setTimeout(() => {
  obs.subscribe(v => console.log("1st subscriber:" + v));
  setTimeout(
    () => obs.subscribe(
          v => console.log("2nd subscriber:" + v)), 1100);

},2000);

1st subscriber:0
1st subscriber:1
2nd subscriber:1
1st subscriber:2
2nd subscriber:2

let obs = Rx.Observable
            .interval(1000)
            .publish();
obs.connect();

setTimeout(() => {
  obs.subscribe(v => console.log("1st subscriber:" + v));
  setTimeout(
    () => obs.subscribe(v => console.log("2nd subscriber:" + v)), 1000);

},2000);

1st subscriber:2
1st subscriber:3
2nd subscriber:3