Making Vue app reactive with RxJS

Why RxJS?

@N_Tepluhina

Concurrency!

Natalia Tepluhina

Google Dev Expert

Senior Frontend Engineer

Community Partner

Chief Tech Officer

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

  • User input events

  • Caching data

  • API calls

  • ...tweets!

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

What about Vue?

@N_Tepluhina

vue-rx

npm install vue vue-rx rxjs --save
import Vue from 'vue'
import VueRx from 'vue-rx'

Vue.use(VueRx)
@N_Tepluhina

...or simply

vue add rx
@N_Tepluhina
@N_Tepluhina
@N_Tepluhina
@N_Tepluhina

Thank you!

Making Vue app reactive with RxJS

By Natalia Tepluhina

Making Vue app reactive with RxJS

  • 2,195
Loading comments...

More from Natalia Tepluhina