Observables -

hot or not?

@ktrz__ | /ktrz

23.08.2018, Functional Tricity

Chris Trześniewski

/ktrz

@ktrz__

Frontend Developer @Scalac

http://slides.com/ktrz/observables-intro

What's an Observable

Stream
Promise on steroids
Function that tie observer to a producer

How does it look like?

Function
Accepts an observer: An object with `next`, `error` and `complete` methods on it.
Returns cancellation function

How does it look like?

function myObservable(observer) {
    const datasource = new DataSource();
    datasource.ondata = (e) => observer.next(e);
    datasource.onerror = (err) => observer.error(err);
    datasource.oncomplete = () => observer.complete();
    return () => {
        datasource.destroy();
    };
}

Enough with the theory

How can we use it?

How do we make coffee?

Get water
Heat water
Add beans
Add milk (optionally)

We can code that!

callbacks
promises
observables

Using callbacks

function heatWater(cb) {
    setTimeout(() => cb('hot water'), 1000)
}
function addBeans(cb) {
    setTimeout(() => cb('black coffee'), 1000)
}
function addMilk(cb) {
    setTimeout(() => cb('white coffee'), 1000)
}
function ready(item) {
    console.log(item, 'ready')
}


let coffee
const makeCoffee = () => heatWater(hotWater => {
    ready(hotWater)
    addBeans(blackCoffee => {
        ready(blackCoffee)
        addMilk(whiteCoffee => {
            ready(whiteCoffee)
            coffee = whiteCoffee
        })
    })
})

makeCoffee()

Using promises

function heatWater() {
    return new Promise(resolve => setTimeout(() =>
        resolve('hot water'), 1000))
}
function addBeans() {
    return new Promise(resolve => setTimeout(() =>
        resolve('black coffee'), 1000))
}
function addMilk() {
    return new Promise(resolve => setTimeout(() =>
        resolve('white coffee'), 1000))
}
function ready(item) {
    console.log(item, 'ready')
}

const makeCoffee = () => heatWater()
    .then(hotWater => {
        ready(hotWater)
        return addBeans()
    })
    .then(blackCoffee => {
        ready(blackCoffee)
        return addMilk()
    })
    .then(whiteCoffee => {
        ready(whiteCoffee)
        return whiteCoffee
    })

makeCoffee()
    .then(ready)

Using observables

const createDelayedObservable = v => of(v).pipe(delay(1000))
const heatWater = () => createDelayedObservable('hot water')
const addBeans = () => createDelayedObservable('black coffee')
const addMilk = () => createDelayedObservable('white coffee')

function ready(item) {
    console.log(item, 'ready')
}

const makeCoffee = () => heatWater()
    .pipe(
        tap(ready),
        switchMap(() => addBeans()),
        tap(ready),
        switchMap(() => addMilk()),
        tap(ready)
    )

makeCoffee()
    .subscribe(ready)

Ok,

so we can use Observables like Promises

But why?

Can we benefit more?

Yes, we can!

Where do Observables shine?

Working with multiple data delivered over time
Lazy evaluation
Operators
- filter, map ...
- switchMap, mergeMap ...
- merge, combineLatest ...
- delay ...

Let come back to...

Order board

link

Live coding

Thank you!

Any question?

https://medium.com/@benlesh/learning-observable-by-building-observable-d5da57405d87

https://medium.com/@benlesh/hot-vs-cold-observables-f8094ed53339