Introduction to RxJS

1. Marcin Juraszek
Przywitaj się
z Reactive Extensions!

2. Observable data streams
Data stream created from
⟶ values
⟶ events
⟶ iterables
⟶ properties
⟶ almost everything

3. Observe and subscribe
Observable
⟶ data stream is observed (it is
Observable)
⟶ emits three type of events
⟶ values
⟶ errors
⟶ completed
Observer (subscribe)
⟶ we can listen to the data stream
(subscribe it)
⟶ Data stream is lazy

4. Let’s see some code!

5. Observable.fromPromise
fromPromise
Returns an Observable that just emits the
Promise's resolved value, then completes.
(source: RxJS Docs) [3]
(source: ReactiveX Docs) [1]

6. Observable.first
first
Emits only the first value. Or emits only the first
value that passes some test. (source: ReactiveX
Docs) [3]
(source: ReactiveX Docs) [3]

7. Observable.map
map
Like Array.prototype.map(), it passes each
source value through a transformation function to
get corresponding output values. (source:
ReactiveX Docs) [3]
(source: ReactiveX Docs) [3]

8. Observable.fromEvent
fromEvent
Creates an Observable from DOM events, or
Node EventEmitter events or others. (source:
ReactiveX Docs) [3]
(source: ReactiveX Docs) [3]

9. Observable.zip
zip
Combine the emissions of multiple Observables
together via a specified function and emit single
items for each combination based on the results
of this function. (source: ReactiveX Docs) [1]
(source: ReactiveX Docs) [1]

10. Observable.flatMap
flatMap
Transform the items emitted by an Observable
into Observables, then flatten the emissions from
those into a single Observable. (source:
ReactiveX Docs) [1]
(source: ReactiveX Docs) [1]

11. Observable.interval
interval
Create an Observable that emits a sequence of
integers spaced by a given time interval. (source:
ReactiveX Docs) [1]
(source: ReactiveX Docs) [1]

12. Observable.skipWhile
skipWhile
Returns an Observable that skips all items
emitted by the source Observable as long as a
specified condition holds true, but emits all further
source items as soon as the condition becomes
false. (source: ReactiveX Docs) [3]
(source: ReactiveX Docs) [3]

13. Observable.pairwise
pairwise
Puts the current value and previous value
together as an array, and emits that. (source:
ReactiveX Docs) [3]
(source: ReactiveX Docs) [3]

14. Observable.filter
filter
Like Array.prototype.filter(), it only emits a value
from the source if it passes a criterion function.
(source: ReactiveX Docs) [3]
(source: ReactiveX Docs) [3]

15. Observable.bufferTime
bufferTime
Collects values from the past as an array, and
emits those arrays periodically in time. (source:
ReactiveX Docs) [3]
(source: ReactiveX Docs) [3]

16. And now, let’s see it in action!

17. Questions?
Thank you!

18. Przydatne linki oraz źródła
ReactiveX RxJS
Interactive RxJS diagrams
The introduction to Reactive Programming you've been missing
Observable operators (ReactiveX Docs)
[1] http://reactivex.io/documentation/operators
[2] https://github.com/Reactive-Extensions/RxJS/tree/master/doc
[3] http://reactivex.io/rxjs/