-
Reactive programming is programming with asynchronous data streams, also deal with synchronous.
- A stream is a sequence of ongoing events ordered in time, that can emit:
- Value,
- Error,
- Completed signal
- A stream is a sequence of ongoing events ordered in time, that can emit:
-
Everything could be considered as a stream: Single value, Array, Event, etc
-
ReactiveX combines
- the Observer pattern with
- the Iterator pattern and
- functional programming with collections to managing sequences of events.
-
RxJS
- Observable
- Observer
- Subject
- Subscription
- Operators
- Scheduler
Access array
- forEach
- map
- filter
- reduce
- concat
- flatten
| Producer | Consumer | |
|---|---|---|
| Pull (function) | Passive: produces data when requested. | Active: decides when data is requested. |
| Push (DOM, events) | Active: produces data at its own pace. | Passive: reacts to received data. |
- is function, lazy computation
- tie an Observer to a function/producer
- deal ok with both async + sync
- is unicast, each Observable is independent
Creating
- create <- Observer
- from <- Array, Object like Array, Set
- of <- values
- interval <- number
Invoke / Dispose
- subscribe() <-- { nextFn, errorFn, completeFn } aka Observer
- unsubscribe() => Release resource or cancel Observable executions
Execute
- next: zero to infinite
- error, complete: once and not together
- Cold Observable: if its producers is created AND activated during subscription (inside)
- Hot Observable : if its producers is EITHER created OR activated OUTSIDE of subscription (outside)
- You want a HOT observable when you don’t want to create your producer over and over again.
- Warm Observable: ?
- is consumer which consume data sent by Observable
- is object: { nextFn, errorFn, completeFn }
- Result of
Observable.subscribe(), hasunsubscribe - Could has Subscription childs via
add - if father
unsubscribe, all childs follow.
- is Observable, shaped like.
- is Observer, duck-types as.
- is multicast, with
subscribe()that add Observers to internal observers list. - not reusable, after unsubscribed, completed or errored.
- is Subject
- Represents a value that changes over time
- Require initial value
- Emit last (or initial) value to latest subscribed Observer
- Observers subscribe after it's completed, only receive complete signal <-- no emitted value
- is BehaviorSubject
- Emit more values to last subscribed Observer than BehaviorSubject by setting:
- number of values
- time to last time value emitted
- Observers subscribe after it's completed, receive all emitted values in buffer then complete signal
- Last variant of Subject
- Only emit last value to last subscribed Observers when it's completed
- If not complete, emit nothing
- Observers subscribe after it's completed, still receive last emitted value
- are pure functions
- create new Observable base on current Observable
- 2 type
- Static : pure functions, attached to the Observable class, used to create Observables from scratch.
- Instance: functions, attached with specific instance of Observable class - through
this
- map
- filter
- scan
- mergeMap
- switchMap
- combineLatest
- concat
- do
- from, of
- throw, empty, never
- create, interval, timer
- fromEventPattern, fromEvent, fromPromise
- repeat, repeatWhen
- map, mapTo, mergeMap, mergeMapTo, concatMap, switchMap
- scan,
- buffer, bufferTime
- filter
- take, takeUntil, takeWhile,
- skip, skipUntil, skipWhile,
- first, last,
- throttleTime, debounceTime,
- distinctUntilChanged
- merge, mergeAll, concat
- startWith
- combineLatest, withLatestFrom
- forkJoin
- zip
- catch
- retry, retryWhen
- do: do something without causing side-effect to original value
- delay
- toPromise
- share
- multicast
- publish
- defaultIfEmpty
- every
- isEmpty
- count
- max/min
- reduce
HOO is Observable that returns Observable, e.g multid array. Often use:
- mergeMap (flatMap): multi stream concurrently
- concatMap: 1 stream per time, streaming sequentially
- switchMap: 1 stream per time, drop current stream if other is coming
- exhaustMap: 1 stream per time, ignore next streams if one is streaming (opposite to
switchMap)
- A scheduler controls when a subscription starts and when notifications are delivered.
- data structure
- execution context: immediately or callback
- virtual clock
- Methods:
- queue: During same job but on a queue - "breadth first"
- asap: Next job - "microtask"
- async: Next timeout
- animationFrame: Next requestAnimationFrame
- PS: Hard to understand, not very familiar with me
- A Promise is simply an Observable with one single emitted value
- HTTP request complete observable the nao? <-- Like
of, return an object - unicast vs multicast
- AsyncSubject
- pure function ?
- Combination Operators
- use case for higher-order observables' operators
- Sample Observable
- Sample Observer
- Sample Subject, BehaviorSubject, ReplySubject, AsyncSubject
- Sample popular operators
- Implementing a "Who to follow" suggestions box
In Twitter there is this UI element that suggests other accounts you could follow:
We are going to focus on imitating its core features, which are:
On startup, load accounts data from the API and display 3 suggestions
On clicking "Refresh", load 3 other account suggestions into the 3 rows
On click 'x' button on an account row, clear only that current account and display another
Each row displays the account's avatar and links to their page
We can leave out the other features and buttons because they are minor. And, instead of Twitter, which recently closed its API to the unauthorized public, let's build that UI for following people on Github. There's a [Github API](https://developer.github.com/v3/users/#get-all-users) for getting users.
The complete code for this is ready at http://jsfiddle.net/staltz/8jFJH/48/ in case you want to take a peak already.