Observables -

hot or not?

@ktrz__  |      /ktrz

23.08.2018, Functional Tricity

Chris Trześniewski

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

Live coding

Thank you!

 

Any question?

 

Observables - hot or not - Functional Tricity

By Chris Trześniewski

Observables - hot or not - Functional Tricity

  • 38
Loading comments...

More from Chris Trześniewski