Skip to content
ixfx

Rx

Module Rx is the ixfx signal pattern. The basic principle is similar to event listeners, where we subscribe to values being emitted from a source. This is also known as a push or stream idiom, since we can’t pull values on-demand (although see pinging). Read more about push/pull semantics.

Here’s how the classic event listener looks. We subscribe to ‘pointermove’ event on ‘document’ source, with an anonymous function handling the data:

document.addEventListener(`pointermove`, event => {
  // Do something with data
});

In classic events we choose to subscribe to a particular event. That is, the one event source (eg. a HTML element) can have several streams of events which can be selectively subscribed to. In contrast, reactive types really consist of a single stream of events.

someRx.onValue(value => {
  // Do something with value
});

Like generators, a reactive can work with finite sets of data (eg a list of things), or continuous streams of data which potentially have no end, such as a stream of pointermove events.

Besides subscribing to a source, there is a notion of operators. Operators are reusable functions that process values one-by-one emitted by a stream. ixfx has in-built operators for common needs.

Why?

The reactive pattern can be useful for a few reasons.

  1. It allows you to compose data processing flows succinctly and legibly. You avoid the need to create and name variables to keep track of things, and less ‘plumbing’ to handle event-based sources
  2. It’s a good match for the event-driven nature of interaction on the web.

Here’s an example of a reactive in action:

// Print out number of clicks in a 200ms time window
Rx.wrap(Rx.From.event(document, `pointerup`, { x:0, y:0 }))
 .chunk({ elapsed: 200 })
 .transform(v => v.length)
 .onValue(v => { console.log(v) });

Importing

// Whole module
import * as Data from "ixfx/data.js"


// Single function
import { resolve } from "ixfx/data.js"


// One of several modules
import { Data, Modulation, Flow } from "ixfx/bundle.js"


// And within your HTML's <HEAD> </HEAD> block:
// <script type="importmap">{ "imports": { "ixfx/": "/ixfx/" } } </script>