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

bit.ly/rx-piano by Shule Hsiung

@N_Tepluhina
@N_Tepluhina

Demo Time

@N_Tepluhina
@N_Tepluhina

Breakout repo

bit.ly/rx-breakout

@N_Tepluhina

Thank you!

Made with Slides.com