Juan Herrera
Google Developer Expert in Angular & Web Technologies
RxJS
@jdjuan
4 MONTHS AGO
PARKSIDE.AT
Google Developer Expert
Google Developer Expert
Ask me how to become a:
⭐️ Google Developer Expert ⭐️
@jdjuan
@jdjuan
Pietro Ferrari
My dad
THE PROBLEM
Writing asynchronous code sometimes feels like this:
Asynchronous Code?
Processes happening over time
@jdjuan
Events
@jdjuan
@jdjuan
Backend developers right now...
@jdjuan
JavaScript
@jdjuan
callbacks
promises
observables
Callbacks
Promises
RxJS
HTTP Request
What is RxJS?
@jdjuan
RxJS
@jdjuan
Library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.
RxJS
@jdjuan
Library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.
RxJS
@jdjuan
+
Operators
Observables
"Our developers couldn't understand observables' charts so instead they decided to build a game: Candy Crush"
Candy Crush CEO
Fake news
ANALOGY
@jdjuan
@jdjuan
1. Channel
2. Observer
3. Subscription
4. Content
@jdjuan
1. Channel
2. Observer
3. Subscription
4. Content
@jdjuan
1. Observable
2. Observer
3. Subscription
4. Content
observable = http.get(url);
observable.subscribe(console.log);observable = http.get(url);
observable.subscribe((data)=>{
console.log(data);
});const users$ = http.get(url);
users$.subscribe((data)=>{
console.log(data);
});const users$ = http.get(url);
...
users$.subscribe();// app.component.ts
this.users$ = http.get(url);
// app.component.html
<div *ngIf="(users$ | async) as users">@jdjuan
OBSERVABLES
🙋♀️
🙋♀️
🙋♀️
🙋♀️
Observable
@jdjuan
Lazy
Observable
@jdjuan
Lazy
Cancellable
Observable
@jdjuan
Lazy
Cancellable
Multiple
@jdjuan
Observable
@jdjuan
Lazy
Cancellable
Multiple
Operators
@jdjuan
"RxJS operators are like Lodash functions, but for events"
@jdjuan
"RxJS operators are like jquery, except that they won't die"
Hopefully 😰
Make a HTTP request every 5 seconds
@jdjuan
setInterval(...)
filtering repeated values
On a failed HTTP request, try again 3 times
@jdjuan
let counter = 0;
with a window of 5 seconds
Make a HTTP request
@jdjuan
but cache it for 5 minutes
@jdjuan
@jdjuan
@jdjuan
THANK YOU!
RxJS: Mastering the Asynchronous Nature of JavaScript
By Juan Herrera
