RxJS

@jdjuan

4 MONTHS AGO

PARKSIDE.AT

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

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

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

RxJS

Asynchronous Code?

Processes happening over time

@jdjuan

Events

@jdjuan

@jdjuan

@jdjuan

@jdjuan

callbacks

promises

observables

What is RxJS?

RxJS

Library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.

RxJS

Library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.

RxJS

+

@jdjuan

@jdjuan

1. Channel

@jdjuan

1. Channel 2. Observer 3. Subscription 4. Content

@jdjuan

1. Observable 2. Observer 3. Subscription 4. Content

Observable

Observable

Observable

Observable

Make a HTTP request every 5 seconds

setInterval(...)

filtering repeated values

On a failed HTTP request, try again 3 times

let counter = 0;

with a window of 5 seconds

Make a HTTP request

but cache it for 5 minutes

@jdjuan

1. Channel
2. Observer
3. Subscription
4. Content

1. Observable
2. Observer
3. Subscription
4. Content