funx

Overview

Funx is an experiment in functionally-reactive Flux.

Most web pages present collections of data, and provide the user the ability to select a subset of that data to view in greater detail. For instance, the Bike Index is a collection of bikes. A subset of those bikes are stolen. The user may chose to see a particular bike, which is just another subset.

In Funx, there are two types of stores - stateful and ephemeral. Stateful stores are the sources of truth - they are the data you want to pass to the client in an isomorphic application. Ephemeral stores can be entirely derived by combining stateful stores. With a stateful Bikes store (a Map of bikeIDs to BikeModels), deriving the currentBike is this simple:

  "currentBike":  function (Bikes, routerState) {
                    return routerState.has("bikeID")
                      ? Bikes.getOrFetch(
                          {
                            "bikeID":  routerState.get("bikeID")
                          }
                        )
                      : null
                  },

Every time Bikes changes, Funx will run that function. If its result has changed, currentBike will emit the new value.

Status

Funx is primarily an intellectual exercise to find the optimal way to express data in isomorphic React projects. I'm sure it contains both good and bad ideas, and I haven't had time to tease them apart yet. In the coming weeks, I hope to explain my motivations in greater detail and start a conversation around these concepts. That conversation will inform whether or not it is worth evolving into a supported project.

This is an experiment. Use it to explore these concepts. Don't use it in a production-quality app.

Inspiration

• Reflux by Mikael Brassman: Reflux's actions are simple functions and its stores may listen to one another. There's no convention to direct where a store keeps its state (which makes serializing isomorphic stores difficult), and there's no concept of a store whose value is entirely derived from other stores.

• Nuclearmail by Ian Obermiller: Nuclearmail is an excellent example of a traditional Flux architecture in a very easy-to-read codebase. Its actions hit an API, then send the result to its dispatcher, which forwards it to its stores. In Ian's model, all stores are stateful. He created a DependentStateMixin that accomplishes the same goal as Funx's ephemeral stores, with some limitations.

Funx has been incubated in the eBay Mobile Innovations lab.