The magic of
RxJS
Natalia Tepluhina
@N_Tepluhina
Senior Frontend Engineer
Core Team Member
Google Dev Expert
Why RxJS?
@N_Tepluhina
Concurrency!
What is RxJS?
It's a Reactive extensions library
for JavaScript
ReactiveX is an API for asynchronous programming with observable streams
@N_Tepluhina
@N_Tepluhina
@N_Tepluhina
Think in streams!
Streams are collection of events
And you can think of RxJS as Lodash for events
@N_Tepluhina
@N_Tepluhina
Observables
| Singular | Plural | |
|---|---|---|
| Sync | Value | Iterable <Value> |
| Async | Promise <Value> |
Observable <Value>
@N_Tepluhina
Promise
Observable
@N_Tepluhina
Observable is just a function
@N_Tepluhina
Observer
const myObserver = {
next: (value) => { console.log(value); },
error: (err) => { console.error(err); },
complete: () => { console.log('Complete!'); }
};@N_Tepluhina
const myObservable = new Observable(observer => {
const datasource = new DataSource();
datasource.ondata = (e) => observer.next(e);
datasource.onerror = (err) => observer.error(err);
datasource.oncomplete = () => observer.complete();
return () => {
datasource.destroy();
};
});Creating Observable
@N_Tepluhina
Observables are lazy!
@N_Tepluhina
Subscription
const subscription =
myObservable.subscribe(myObserver); subscription.unsubscribe();@N_Tepluhina
RxJS Operators
-
transform
-
filter
-
combine
-
alter
@N_Tepluhina
@N_Tepluhina
Complex user input?
@N_Tepluhina
GAMES
@N_Tepluhina
@N_Tepluhina
@N_Tepluhina
Demo Time
@N_Tepluhina
@N_Tepluhina
Breakout repo
@N_Tepluhina
Thank you!
The Magic of RxJS
By Natalia Tepluhina
