fab

What is this?

This is somewhat of an experimental framework with inspiration from cycle.js, redux, react, yo-yo and others.

It is heavily based on streams, the main idea is that the app is a duplex stream, with state object written to it, and action objects read from it. The store is also a duplex stream with action objects written to it and state objects read. This results in a circular data flow AKA unidirectional.

We achieve this with a strange lookign piece of code, that'll eventually be wrapped up in the lib:

app.pipe(store).pipe(app)
// OR
store.pipe(app).pipe(store)

As they are just node streams that can have intermediate streams between the store and the app, maybe for logging, or for getting across the network, the pipeline can be modified as you see fit. The counter example shows us piping the app to a websocket stream, and reading from teh same stream, on the server that socket is piped to and from the store.

API

app = fab(component)

Returns a duplex stream that writes action events and reads state.

Component is just a function that recieves two arguments, state and dispatch. state is the current state and dispatch is a helper for writing the action objects to be read from it (by the store for example)

A simple component can look like:

function component (state, dispatch) {
  var h1 = document.createElement('h1')  
  h1.textContent = 'Hello, ' + state.name

  h1.addEventListener('click', function () {
    dispatch({ type: 'A CLICK', payload: { some: 'data' }})
  })

  return h1
}

Under the hood morphdom is used to diff the DOM and only update the changes, this results in faster render times

app.appendTo(document.body)

This is a helper method to append the app element to another, as we're dealing with streams which may or may not have a value upon load, we cannot guarantee that there will be an element to append, so this ensures that the element is appended once it exists

store = createStore(reducer, initialState)

Returns a duplex stream that writes state objects and reads action events

reducer is a function that takes the current state and the action, and returns the new modified state, if it does not recognise the action is should just return the current state, very much like redux.

initialState is the starting state of the app.

app.pipe(store).pipe(app)

This sets up the two way, circular binding of the streams, and kicks off the app running