RXJS: Observables 101

An introduction to Observables in JavaScript/Typescript.

Transcript

2. RXJS: Observables 101 By Maina Wycliffe www.mainawycliffe.dev
3. ReactiveX JavaScript (RXJS) • RXJS is a JavaScript Implementation of ReactiveX Library • ReactiveX is a library for composing async events using the observer pattern • ReactiveX is a combination of the best ideas from the Observer pattern, the Iterator pattern, and functional programming • The observer pattern is a software design pattern where a subject maintains a list of listeners (observers) and notifies them of any changes. • ReactiveX is not specific to JavaScript and there are implementation for other languages such as RxJava, RxDart, RxPHP, RxGo, etc.
4. RXJS Concepts • Observable – future values/events • Observer – listener to observable • Subscription – execution of observable • Operators – pure function for transforming streams • Subject – Allow multiple observers • Schedulers – control concurrency, enable coordination
5. Why use Observables • Use of Pure Functions • Control the flow of streams/data/events • Transform Values • Support for Multiple Languages
6. Example Listening to a Button Click Event
7. Operators They are pure functions Allow easy composition in declarative approach Key to RXJS Kinds of Operators • Pipeable Operators • Creation Operators
8. Pipeable Operators A Pipeable Operator is a function that takes an Observable as its input and returns another Observable. It is a pure operation: the previous Observable stays unmodified.
9. Examples of Pipeable Operators • takeLast • takeUntil • takeWhile • map • mapTo • mergeMap • mergeMapTo • tap • catchError • retry • retryWhen • combineLatest • concat • forkJoin • merge • race • zip
10. Creation Operators This is a function that creates a new Observable with some common predefined behaviour or by joining other Observables.
11. Creation Operators Example 2: Interval Operator
12. Examples of Creation Operators • ajax • bindCallback • bindNodeCallback • defer • empty • from • fromEvent • fromEventPattern • generate • interval • of • range • throwError • timer • iif
13. Subjects • A Subject is like an Observable but can multicast to many Observers. • They maintain a registry of many listeners. • Every Subject is an Observable • Observer can not distinguish between an Observable and a Subject • Unlike Observables, subscribe doesn’t invoke execution, it simply registers the observer
14. Subjects • Unlike an Observable, a subject has the following methods • next(v) – feed new value to the subject • error(e) – feed an error value to the subject • complete() – Close the subject
15. Example of a Subject
16. There are 3 variants of Subjects: • BehaviorSubject • ReplaySubject • AsyncSubject Types of Subjects
17. BehaviorSubject • Stores the last value emitted to its consumers as the current value • Emits the current value in store whenever a new observer subscribes • Must be initialized by a value • Example personal age or total vote count.
18. ReplaySubject • Records multiple values from an observable execution • Replays all those values to new subscribers • The number of values recorded is specified during creating • Records all values if none is specified
19. AsyncSubject • Only the last value of the Observable execution is sent to the observables • Only sent when the execution completes
20. bit.ly/2qqalg7 BehaviorSubject vs ReplaySubject
21. • http://reactivex.io/intro.html • https://rxjs-dev.firebaseapp.com/guide/overview • https://bit.ly/2qqalg7 • https://www.learnrxjs.io/ Additional Resources