Reactive programming

@subarroca

@subarroca

reactive programming

First order observable

higher order observable

@subarroca

first order observable

plain observable

REACTIVE PROGRAMMING

@subarroca

higher order observable

observable returned from within an observable

REACTIVE PROGRAMMING

@subarroca

reactive programming

flatening observables

REACTIVE PROGRAMMING

@subarroca

switch

unsubscribes from previous and keep current

REACTIVE PROGRAMMING

@subarroca

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

concatall

  • buffers all observables and sends each one in order after the previous is finished
  • concatAll = mergeAll(1)

@subarroca

reactive programming

no higher observables

REACTIVE PROGRAMMING

@subarroca

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

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

concatmap

  • mergeMap(1)

@subarroca

reactive programming

decomposing

@subarroca

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

window

  • windowCount(n)
  • windowTime(timeSpan, timeCreationInterval)
  • windowToggle(openWindowObs, closeWindowObs)

REACTIVE PROGRAMMING

@subarroca

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