Get Started. It's Free
or sign up with your email address
RxJS basics by Mind Map: RxJS basics

1. based on the excellent talk of André 'Staltz' Medeiros "You will learn RxJS..."

1.1. staff covered in this talk is marked with this yellow background

1.2. staff NOT covered in this talk is marked with this blue background

2. links

2.1. reactivex.io

2.2. egghead.io

2.3. The introduction to Reactive Programming you've been missing by André 'Staltz' Medeiros

3. Rx = reactive extensions

3.1. 'reactive' = programming with (asynchronous) data streams & combine, and filter them & create new ones

3.2. functional programming with pure functions without side effects / mutation

3.2.1. "What makes RxJS powerful is its ability to produce values using pure functions. That means your code is less prone for errors."

4. concepts (keyworrds)

4.1. Observable

4.1.1. represents the idea of an invokable collection of future values or events

4.2. Observer

4.2.1. a collection of callbacks that knows how to listen to values delivered by the Observable

4.3. Subscription

4.3.1. represents the execution of an Observable, primarily useful for cancelling the execution

4.4. Operators

4.4.1. pure (usually anonimous) functions that enable a functional programming style of dealing with collections with operations like map, filter, concat, flatMap...

4.5. Subjects

4.5.1. the equivalent to an EventEmitter, the only way of multicasting a value or event to multiple Observers

4.6. Schedulers

4.6.1. centralized dispatchers to control concurrency, allowing us to coordinate when computation happens on e.g. setTimeout or requestAnimationFrame or others

5. basic idea

5.1. 1. callbacks (incoming side-effects)

5.1.1. async callbacks

5.1.2. but callbacks also can be sync !

5.1.3. promises

5.1.3.1. 1. success

5.1.3.2. 2. error

5.1.4. streams

5.1.4.1. 1. data - next chunk

5.1.4.2. 2. error

5.1.4.3. 3. end - done

5.1.5. arrays

5.2. 2. treated as collections

5.3. 3. processed by operations (map, filter...) (pure functional declarative logic)

5.3.1. 1. get data from input observable

5.3.2. 2. run provided function on data

5.3.2.1. transformationFunction eg. for map()

5.3.2.2. conditionFunction eg. for filter()

5.3.3. 3. return transformed/filtered/... data to a new (output) observable

5.3.4. A. operations create a subscribe chain (UP)

5.3.5. B. finally the values are passing backward (DOWN)

5.4. 4. monitored by observer (listener) (outgoing side-effects)

6. API

6.1. create observablle

6.1.1. example sources

6.1.1.1. arrays

6.1.1.2. events

6.1.1.2.1. eg. mouse events

6.1.1.3. promises

6.1.1.3.1. eg. http fetch

6.1.1.4. streams

6.1.1.4.1. (eg. files, http parsers, db records)

6.2. subscribe to observable

6.2.1. observable.subscribe(observer) - 'give me some data' - 'deliver results to observer's callbacks'

6.2.1.1. observer

6.2.1.1.1. 1. next callback (data)

6.2.1.1.2. 2. error callback

6.2.1.1.3. 3. done callback (finished)

6.2.1.2. observable execution starts at subscription time only

6.2.1.2.1. subsciption can be stopped