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
- 346