Reactive programming
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
reactive programming
First order observable
higher order observable
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
first order observable
plain observable
REACTIVE PROGRAMMING
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
higher order observable
observable returned from within an observable
REACTIVE PROGRAMMING
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
reactive programming
flatening observables
REACTIVE PROGRAMMING
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
switch
unsubscribes from previous and keep current
REACTIVE PROGRAMMING
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
mergeall
- mergeAll([n]) -> does not unsubscribe previous, it keeps all and merge results up to n subscriptions, later will not be created
- it remembers observables and throws them when space available in the subscriptions array
REACTIVE PROGRAMMING
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
concatall
- buffers all observables and sends each one in order after the previous is finished
- concatAll = mergeAll(1)
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
reactive programming
no higher observables
REACTIVE PROGRAMMING
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
switchmap
- switchMap = map().switch()
- returns another first order observable
- useful for calls to API on click/route change...
- internally knows how to convert promises to observables
REACTIVE PROGRAMMING
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
mergemap
- also flatMap
- returns another first order observable
- does not cancel previous subscription
- mergeMap(fn, (outer, inner) => ,concurrentSubscriptions)
- outer: event from first order obs, inner, current observable
- further subscriptions will take place when older unsubscribe
REACTIVE PROGRAMMING
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
concatmap
- mergeMap(1)
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
reactive programming
decomposing
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
window
- separates observable1 into new streams based on observable2
- like .split('.')
- mapping results can give you number of seconds between 2 clicks, for instance
REACTIVE PROGRAMMING
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
window
- windowCount(n)
- windowTime(timeSpan, timeCreationInterval)
- windowToggle(openWindowObs, closeWindowObs)
REACTIVE PROGRAMMING
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
groupBy
- separates a stream into n streams depending on the value returned by the condition (true/false; 1, 2, 3; R,G,B ...)
- like in keyEvent, mouseEvent, midiEvent
REACTIVE PROGRAMMING
deck
By Salvador Subarroca
deck
- 627