Introduction to RxJS

The Observer pattern done right

• RxJava
• RxJS
• Rx.NET
• UniRx
• RxScala
• RxClojure
• RxCpp
• Rx.rb
• RxPY
• RxGroovy
• RxJRuby
• RxKotlin
• RxSwift
• RxPHP

• RxJS 4: https://github.com/Reactive-Extensions/RxJS
• RxJS 5 (beta): https://github.com/ReactiveX/rxjs

Асинхронность

• Колбеки
• Промисы
• async / await
• Генераторы

Промисы нельзя отменить

https://github.com/github/fetch/network/members

FP? RP? FRP?

getPlugins() {
  const plugins = [];

  if (navigator.plugins) {
    for (let i = 0; i < navigator.plugins.length; i++) {
      let pluginName = navigator.plugins[i].name;
      pluginName += '=1.0';

      plugins.push(pluginName);
    }
  }
  return plugins;
}

getPlugins() {
  return map(plugin => `${plugin.name}=1.0`, navigator.plugins);
}

const square = x => x * x;
const isEven = x => x % 2 === 0;
const sum = (a, b) => a + b;

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  .map(square)
  .filter(isEven)
  .reduce(sum)

Observable

Могут быть:

• Преобразованы в другие
• Объединены
• Приостановлены
• И не только

RxMarbles

Live Coding Time

Два важных нюанса

• subscribe инициирует выполнение
• hot vs cold

Операторы

Миллион их

Примеры

Автодополнение

Drag'n'Drop

Примеры использования

• Композиция нескольких событий
• debounce, delay
• Управление асинхронными задачами
• При необходимости отмены

Angular 2

• В зависимостях тянет RxJS 4
• Более гибкий EventEmitter
• Работа с http

Альтернативы

• Most.js — https://github.com/cujojs/most
• Kefir — https://github.com/rpominov/kefir
• Bacon.js — https://github.com/baconjs/bacon.js

ES Proposal

function listen(element, eventName) {
    return new Observable(observer => {
        // Create an event handler which sends data to the sink
        let handler = event => observer.next(event);

        // Attach the event handler
        element.addEventListener(eventName, handler, true);

        // Return a function which will cancel the event stream
        return () => {
            // Detach the event handler from the element
            element.removeEventListener(eventName, handler, true);
        };
    });
}

https://github.com/tc39/proposal-observable

Как узнать больше

The introduction to Reactive Programming you've been missing

https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

Asynchronous Programming in JavaScript

https://frontendmasters.com/workshops/async-javascript/​

http://reactivex.io/learnrx/​

RxJS Koans

https://github.com/Reactive-Extensions/RxJSKoans​

https://github.com/mattpodwysocki/RxJSKoans​

Cycle.js

http://cycle.js.org/

Egghead