Getting Started Tutorial

flimflam is a pattern/architecture for creating front-end UI by using three core modules: snabbdom, flyd, and ramda. You can also use any number of additional packages from npm to fit your needs.

The advantages of this pattern are that it is: declarative, fast, functional, modular, testable, minimal, (relatively) simple, and has an array of curated modules. The disadvantages are that is not widely used, and it has a higher learning curve.

flimflam is good for highly dynamic and complex UI and data visualization. It is not good for pages where you need to collaborate with marketers or designers who don't know javascript.

• snabbdom will render your page (your markdown) using javascript
• flyd will allow you to manage your asynchronous events and data using declarative higher order functions
• ramda is a general purpose functional standard library. It lets you set data using immutable functions, and gives you a wider array of functional tools.

Before starting with this pattern, you might read the basics of the above three modules first. In particular it helps to have an understanding of flyd's streams and functional reactive programming.

hello world

We will first need to have flyd, flyd-construct, snabbdom, and ramda in our package.json. In this tutorial, we will use ES6, compiled with babelify + browserify (you can also use a build tool like budo).

In a main file (called 'index.es6' or similar), we can get some basics going:

import h from 'snabbdom/h'
import snabbdom from 'snabbdom'
import R from 'ramda'
import flyd from 'flyd'
import flyd_construct from 'flyd-construct'

const init = ()=> {
  return {
    defaultState: {name: 'Bob Ross'}
  , events: {}
  , updates: {}
  }
}

function view(init, state) {
  return h('p', `hallo welt! your name is ${state.name}`)
}


// To render our content to the page:
// First we create a state stream by passing in the result of init
let state$ = flyd_construct(init())
// Then we can create a stream of vtrees by mapping view() over the state stream
let vtree$ = flyd.map(view, state$)
// Finally, we can render to the page by using our snabbdom patch function 
// See the snabbdom docs for info on its init function
let container = document.querySelector('.container')
const patch = require('snabbdom').init([
  require('snabbdom/modules/class')
, require('snabbdom/modules/props')
, require('snabbdom/modules/style')
, require('snabbdom/modules/eventlisteners')
])
// We can use flyd.scan to continuously patch the DOM
flyd.scan(patch, container, vtree$)

// voila!

Ending variables that are streams with '$' is a handy convention.