RxJS - The Reactive Extensions for JavaScriptViliam Elischer @vireliam

What is RxJS?

Reactive Extensions (Rx) is a library for composingasynchronous and event-based programs using observable

sequences and LINQ-style query operators.

Reactive eXtensions offer a language neutral approach andpolyglot implementation as well.

JavaScript Java Scala Clojure Groovy C++C# Ruby Python JRuby Kotlin Swift

Crafted by

The Cloud Programmability Group at Microsoft

Why?

A Temporal dimension

Asynchronous programming tend to end up in callback hell

which is frustrating

Promises FTWbut there are uses-cases when you need to:

cancel or do bulk operations or getmultiple values or do complex composition

RxJS is ideal for

processing sequences that can contain anyamount of values in any amount of time.

Core concepts

Design patternsIterator ­ hasNext(), next()

Observer ­ Subject, notify(), update()

Event | Stream | Sequence | Source

Observable | Observer | Subscription | Disposable

An Event stream is a sequence of events.

A Sequence is an observable Source.

A Source can be observed and act as entry point.

An Observer registers its interest on an Observable througha Subscription.

The Observable pushes data to the Observer.

The Subscription returns a Disposable so the Observer canstop receive notifications before the sequence ends.

General theory of reactivity

Singlevalue

Multiple values

Pull / Sync /Interactive

Object Iterables (Array / Set /Map)

Push / Async /Reactive

Promise Observable

github.com/kriskowal/gtor

Applied dualityArray | Iterator - consumer synchronously pulls valuesfrom producerObservable | Observer - producer asynchronously pushesvalues to the consumer

Enumerable collection interfaces IEnumerable<T> andIEnumerator<T> are dual to interfaces of observablecollections IObservable<T> and IOberserver<T>

Subject/Observer is Dual to Iterator by Erik Meijer

Stream endpointsEntry points / Sources:

user input (click, mouseMove, keyUp), network (XHR, WS),setters, event listening

Exit points / Subscribers:

appState mutation, persistence, render, event emitting

Operators ~131

RP != FRP

Functional reactive programming

How to build reactive systems usingmathematical functions for describing the

universe and it's components, keepingfunctional as the higher matter?

The semantic model of FRP in side-effectfree languages is typically in terms of

continuous functions, and typically overtime

FRP has well known and defined interfaces

Values that vary over continuous (clock like) time(behaviors, signals)

Events which have occurrences at discrete points in time.

Originates from FRAN (Haskell's functional-reactiveanimation framework)

Reactive Programmingaims onto handling of async sequences from multiplesources over timetime isn't continuous but discrete, the universe ismutable (setters) and execution environment can besingle-threaded (browser, node)Functional in RP is a quality of the implementation detail(HOF, map, filter, reduce)RX separates notion of time from reactivity and focusesmore on concurrency

Reactive Programming

compositional event processing

Examples

Observable creationfrom variables, arrays, promises, generators, events

Cancel async

Chaining

Map and FlatMap

TakeUntil

Scan vs Reduce

- without Transducing intermediary arrays

+ + Subject State observable Global subject

Benefits of using RxJS?

Abstraction layerComposable ObservablesClean Asynchronous CodeError handlingEvent processingPerformanceClient/Server

Less mutation of global stateSet operations (Sync / Async)Improved WebSocket Support

Interoperability

Advanced topics

Schedulers as Concurrency providersHot and Cold ObservablesBackpressure

async function* - Reactive Webworkers

Transducersasync generators (ES7)

Alternatives

Bacon.js

Kefir.js

Resources

github.com/Reactive-Extensions

xgrommx.github.io/rx-book

github.com/jhusain/learnrx

Gitter - Reactive-Extensions/RxJS

github.com/staltz/rxmarbles

PeopleMatthew Podwysocki - @mattpodwysocki

Jafar Husain - @jhusain

Ben Lesh - @BenLesh

André Staltz - @andrestaltz

Q & A

Tank you!