Making Vue app reactive with RxJS

Natalia Tepluhina

@N_Tepluhina

Frontend developer

CTO

Why RxJS?

@N_Tepluhina
  • User input

  • Event handling

  • Sending requests

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

  • 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
  Spatial   Value   Iterable <Value>
  Temporal   Promise <Value>   

Observable <Value>

@N_Tepluhina

Promise

Observable

@N_Tepluhina

Creating Observables

return new Observable(observer => {
  observer.next('Hello World!');
  observer.complete();
});
@N_Tepluhina

Creating Observables


 Observable.of('Hello World!');

 Observable.from([ 'A', 'B', 'C' ]);
@N_Tepluhina

RxJS Operators

  • transform

  • filter

  • combine

  • alter

@N_Tepluhina
@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
@N_Tepluhina
@N_Tepluhina
@N_Tepluhina
@N_Tepluhina
@N_Tepluhina
@N_Tepluhina

Useful links

Making your Vue app reactive with RxJS

By Super Diana

Making your Vue app reactive with RxJS

By Natalia!

  • 81
Loading comments...

More from Super Diana