RxJS

View Github Repository Open presentation in a new window

7235200

See all presentation from 7235200

RxJS

0 0

rxjs-techtalk

rxjs-techtalk - http://7235200.github.io/rxjs-techtalk

On Github 7235200 / rxjs-techtalk

RxJS

Введение в реактивное программирование

подготовил Лазарев Дмитрий / dlazarev@ptsecurity.com

Реактивное программирование

a = b + c

обработка параллельных потоков данных

потоки

UI eventsRequestsDevice eventsHooksArraySetMapStringEveryting

Чем обрабатывать потоки?

EventEmittercallbackspromisesgeneratorsweb workersweb sockets
async generatorsasync/await

RxJS

Reactive Extensions for Javascript

observable sequence | observable

(Observer + Iterator)

observer

pull

observable

push

3 этапа жизни Observable

Создание 
let source = Rx.Observable.create(observer => {
	observer.onNext(42);
	observer.onCompleted();

	return () => console.log('disposed');
});
Подписка 
let subscription = source.subscribe(
	x => console.log('onNext: %s', x),
	e => console.log('onError: %s', e),
	() => console.log('onCompleted')
);
// => onNext: 42
// => onCompleted
Отписка 
subscription.dispose();
// => disposed

Function ?

func.call()

// Верни мне значение прямо сейчас (синхронно)
obsv.subscribe()

// Верни мне значение.
// Возможно несколько значений.
// Возможно прямо сейчас.
// Возможно потом как-нибудь

Observable

функция, которая при вызове возвращает от 0 до бесконечности значений за промежуток времени от сейчас до бесконечности

операторы

Методы Observable, которые позволяют создавать и преобразовывать observables

converting

from fromArray fromCallback fromNodeCallback fromEvent fromEventPattern fromPromise

filtering

filter map flatMap find first pluck where

grouping

merge mergeAll groupBy concat amb zip withLatestFrom

buffering strategy

buffer throttle debounce sample

Как работает оператор?

let result = source.myOperator();

// result - Observable, который преобразует значения source и возвращает их
result.subscribe();

// Подписываясь на result - подписываемся и на source
result.unsubscribe();

// Отписываясь от result - отписываемся и от source
lodash для событий
Оператор передает каждое обработанное значение следующему оператору до перехода к следующему значению в потоке
более насыщенный пример

hot / cold observable

Cold Observable (видео)
Hot Observable (живые выступления)
Hot replayed Observable (живые выступления на видео)

Когда стоит использовать ?

  • большие массивы данных
  • > 1 асинхронного вычисления
  • > 1 события
  • связывание компонет приложения (flux)

RxJS 5.0 beta

Что-то еще?

Subject
Transducers
Schedulers
Тестирование
Отладка
Обработка ошибок
Работа с сокетами
RxJS 5 подробнее
RxJS as/vs flux
что-то еще
RxJS Введение в реактивное программирование подготовил Лазарев Дмитрий / dlazarev@ptsecurity.com