RxJS

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

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

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

a = b + c

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

потоки

UI events
Requests
Device events
Hooks

Array
Set
Map
String
Everyting

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


EventEmitter
callbacks
promises
generators
web workers
web sockets
async generators
async/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

что-то еще

Полезные ресурсы

Документация
Reactive extensions
RxJS 5
Migration from 4 to 5
RxJS book
Интерактивные marble-диаграммы

Эта презентация
RxJS explore