flimflam

🌀 flimflam: flyd + snabbdom 🌀

This module gives you a function to help you combine the use of flyd with snabbdom.

In this system, you can construct your UI with:

• States, which are objects containing flyd streams
• Views, which are functions that take states and return snabbdom vnodes

That's it!

Example

const flyd = require('flyd')
const render = require('flimflam')
 
function init () {
  // Create some initially empty event handler streams
  const incr = flyd.stream()
  const decr = flyd.stream()
  // Calculate a running sum from the events
  const count = sum(incr, decr)
  return {incr, decr, count}
}
 
function sum (incr, decr) {
  return flyd.scanMerge([
    [incr, (n) => n + 1],
    [decr, (n) => n - 1]
  ], 0)
}
 
// Render the state into markup
function view (state) {
  return h('body', [
    h('p', ['Current count is ', state.count()]),
    h('button', {on: {click: state.incr}}, 'Increment'),
    h('button', {on: {click: state.decr}}, 'Decrement')
  ])
}
 
// Render everything to the page
const state = init()
const container = document.body
render(view, state, document.body)

Scaling up

We've used this setup for very large applications. It can scale up well by following these guidelines:

• Create small modules for view functions without logic.
• Create modules for stream logic that take input streams and return output streams.
• Write your state logic separately from your views. The hierarchy of your state objects should not mirror the layout of your markup. In the counter example above, the functions init and sum can live in their own module and have their own tests independent of any views. They could potentially be represented by a dozen different views.
• You can use something like commons.css or BassCSS with PostCSS for styling.

Helpers

Many extra flyd modules can help you handle a lot of different async logic using streams:

• Flyd modules listing
• flyd-ajax
• flyd-stream-querystring
• flyd-windowresize
• flyd-url
• flyd-crud
• flyd-undo
• flyd-zip
• Make your own!