Observables

It's not yet part of the language. So far it's implemented in library. It won't probably be in ES7.

We have to learn library implementations. It's subject to flux.

For now one of the most common library is RxJS by Microsoft. It's ported to several languages not just JS.

The concept

Spreadsheets to demonstrate the concept. Think of a chain of calculated fields in a spreadsheet. it's a flow of data

Reactive programming: the source is a series of data that goes through several calculations (transformations)

Some of the steps might be asynchronous.

Data flow mechanism. Built from ground to respond to events.

An observable is an adaptor, hooked to data source the creates a promise every time a data comes through.

I can separate the data source and somewhere in my code set up declaratively the data flow. We don't have to conflate the two.

Example

The RxJS library adds a simple mechanism to hook into DOM events (fromEvent):

  var obsv = Rx.Observable.fromEvent(btn, 'click');

obs
  .map(...)
  .filter(...)
  .distinctUntilChanged()
  .subscribe(...)

There are of course many ways to declare observable. Pump through data manually, web sockets, etc.Declarative chain of data flow.

You map through the event stream. Like it was a never ending array.

distinctUntilChanged()

Only catch those items that are different than the last one.

subscribe at end of the chain after filtering, etc.

Think of observables as a stream of data (not everyone agrees with this)

rxmarbles.com - great way to visualise these utilities (distinctUntilChanged)

We can drag and move the marbles to see what happens. Best way to learn rxjs.

Abundancia