This document provides an overview of ReactiveX (Rx), which is an API for asynchronous programming using observable streams. It discusses key Rx concepts like Observables, which represent sets of values over time that can be subscribed to; Operators, which allow transforming, combining, and manipulating observable streams; and Subjects, which act as both Observable and Observer and are useful for multicasting streams. The document provides examples of using Rx in autocomplete applications and discusses Schedulers, which define the execution context for asynchronous operations in Rx. Overall, the document serves as a high-level introduction to the reactive programming paradigm and Rx library.

1. ReactiveX
An API for asynchronous programming
with observable streams

2. What is it all about?

3. What is ReactiveX (Rx)?
[2, 15, 13, 46, 7]
filter(x => x < 10)
[2, 7]

4. What is ReactiveX (Rx)?
● Python
● Javascript
● PHP
● etc...
● Underscore.js
● Lodash.js
● LINQ (C#)
● Guava (Java)
● etc..

5. What is ReactiveX (Rx)?
x: 121
Y: 250
x: 659
Y: 37
x: 55
Y: 498
x: 984
Y: 35
x: 121
Y: 43
x: 165
Y: 268
x: 435
Y: 316
time
filter(condition)
x: 659
Y: 37
x: 984
Y: 35
x: 121
Y: 43 time

6. Think of it as an
asynchronous
immutable array.
Streams!

7. Observables

8. Observables vs Promises
Multiple valuesSingle value
Temporal /
Asynchronous /
Push
Spatial /
Synchronous /
Pull
Observable<T> getData()
Iterable<T> getData()T getData()
Promise<T> getData()

9. Where it can be useful?
● Everywhere
● Frontend
○ UI events, API responses, etc
● Backend
○ Concurrency, services communication, etc
● Available for:
○ Java, JavaScript, C#, C#(Unity), Scala, Clojure, C++, Lua, Ruby, Python, Go, Groovy, JRuby,
Kotlin, Swift, PHP, Elixir, Dart, Netty, Android, Cocoa

10. How to start?

11. Building blocks
● Observer pattern
● Iterator pattern
● Functional programming

12. Observer Pattern

13. Iterator Pattern

14. Functional Programming
● Immutability
● Pure functions
● High-order functions
● Currying
● Composition

15. Main Concepts
● Observable
● Subject
● Operators
● Scheduler*

16. Observables

17. A representation of any
set of values over
any amount of time.

18. Observable
const source = fromEvent(document, 'click');
const myObservable = fromEvent(button, 'click');
const isOnline = fromEvent(window, 'online');
const onFocus = fromEvent(input, 'focus');
const keyPressed = fromEvent(input, 'keypress');

19. Observable
const arraySource = from([1, 2, 3, 4, 5]);
const promise = new Promise(resolve => resolve('Hello!'));
const promiseSource = from(promise);
const source = from('Hello World');

20. Observable
const source = of(1, 2, 3, 4, 5);
const source = of({ name: 'Brian' }, [1, 2, 3], function
hello() { return 'Hello'; });

21. Observable
const foo = new Observable(observer => {
observer.next(42);
observer.next(100);
observer.next(200);
setTimeout(() => {
observer.next(300); // happens asynchronously
}, 1000);
});

22. Observable
● An Observable emits items or sends notifications to its observers by calling
the observers’ methods.
● An observer subscribes to an Observable.
next()
attach()

23. Observable
const foo = new Observable(observer => {
observer.next(42);
observer.next(100);
observer.next(200);
setTimeout(() => {
observer.next(300); // happens asynchronously
}, 1000);
});

24. Observable
const observer = {
// on each new emitted value by the observable
next: value => {},
// if some error occurs inside the observable
error: error => {},
// the observable has ran out of items
complete: () => {},
};

25. const observer1 = {
next: value => console.log(`[Observer 1]: Received ${value}!`),
error: error => console.log(`[Observer 1]: ${error}!`),
complete: () => console.log(`[Observer 1]: No more items! `),
};
foo.subscribe(observer1);
foo.subscribe(
value => console.log(`[Observer 2]: Received ${value}!`),
error => console.log(`[Observer 2]: ${error}!`),
);
foo.subscribe(value => console.log(`[Observer 3]: Received ${value}!`));

26. Cold
● The data is produced by the
Observable itself.
● It begins to emit items only after
the observer subscribes to it.
● Each observer (subscriber) gets
its own unique set of items.
Hot
● The data is produced outside
the Observable itself.
● It may begin emitting items as
soon as it is created.
● The emitted items are shared
between the subscribers
(multicasting).
vs
https://stackblitz.com/edit/hot-vs-cold

27. Subject

28. Observable ObserverSubject

29. ● Multicast observable (plain observables are unicast)
○ It manages an internal list of observers
● It implements the observer interface
○ next(), error() and complete()
● Useful for
○ Multicast items to observers
○ “Convert” plain unicast observable to multicast
Subject
https://stackblitz.com/edit/learn-subjects

30. Operators

31. ● Composition + Declarative = The power of ReactiveX!
● It allows you to transform, combine, manipulate, and work with the
sequences of emitted items.
● .pipe() method.
● You can create your own custom operators!
Operators

33. Operators
const source$ = range(0, 10);
source$.pipe(
filter(x => x % 2 === 0),
map(x => x + x),
scan((acc, x) => acc + x, 0)
)
.subscribe(x => console.log(x)); // [0, 4, 12, 24, 40]

34. Operators
● Creation
○ create, ajax, empty, from, fromEvent, interval, of, range, timer, etc.
● Combination
○ combineLatest, concat, merge, pairwise, startWith, zip, etc.
● Conditional
○ iif, defaultIfEmpty, every, sequenceequal.
● Error Handling
○ catchError, retry, retryWhen.

35. Operators
● Filtering
○ debounceTime, distinctUntilChanged, filter, find, first, last, skip, take, takeUntil, etc.
● Multicasting
○ multicast, publish, share, shareReplay
● Transformation
○ buffer, bufferCount, bufferWhen, groupBy, map, flatMap, partition, pluck, scan, switchMap,
windowTime, etc
● Utility
○ tap, delay, finally, repeat, timeInterval, timeout, toPromise, etc

37. It’s not easy. It will
take some time.

38. Control Flow vs Data Flow
series
branchesbatch
on demand!
concurrence
async

39. Examples

40. Autocomplete
https://stackblitz.com/edit/ex-autocomplete

41. Bonus: Scheduler!

42. Scheduler
● Multithreading!
○ By default, observables, its operators chain and observers run in the same thread.
● Defines the execution context
○ Where and when the task is executed.
● May vary on the implementation

43. References
● 2 minute introduction to Rx
● ReactiveX site
● Learn RxJS
● Hot vs Cold Observables
● RxJS docs

44. Thanks!
Contact:
Gabriel Araujo
Invillia
151 Padre Duarte
Araraquara, SP 14800-360
contato@gabrielaraujo.dev
gabrielaraujo.dev
@gabrielfeear