Cycle.js example in CoffeeScript

cycle-bmi.coffee

{run} = require '@cycle/core'
{Observable} = require 'rx'
{div, input, h2, makeDOMDriver} = require '@cycle/dom'

intent = (domSource) =>
  changeWeight$ = domSource
    .select('#weight').events('input')
    .map((ev) => ev.target.value)
  changeHeight$ = domSource
    .select('#height').events('input')
    .map((ev) => ev.target.value)
  {changeWeight$, changeHeight$}

model = ({changeWeight$, changeHeight$}) =>
  Observable.combineLatest(
    changeWeight$.startWith(70)
    changeHeight$.startWith(170)
    (weight, height) =>
      heightMeters = height * 0.01
      bmi = Math.round(weight / (heightMeters * heightMeters))
      {weight, height, bmi}
  )

view = (state$) =>
  state$.map(({weight, height, bmi}) =>
    div [
      div [
        "Weight #{weight} kg"
        input '#weight', {type: 'range', min: 40, max: 140, value: weight}
      ]
      div [
        "Height #{height} cm"
        input '#height', {type: 'range', min: 140, max: 210, value: height}
      ]
      h2 "BMI is #{bmi}"
    ]
  )

main = (sources) =>
  { DOM: view model intent sources.DOM }

run(main, {
  DOM: makeDOMDriver('#main-container')
})