Cycle-simple-example.js

import Cycle from '@cycle/core'; // the core Cycle
import {h, makeDOMDriver} from '@cycle/dom'; // this is a side effect driver
import Rx from 'rx'; // RxJS

function main({DOM}) { // our Cycle app, it's simple a function
  const DEFAULT_VALUE = 50; // a default config
  
  // we select and watch our slider input from the DOM which is comes in via our function definition
  // these avents are turned into Rx streams
  let changeValue$ = DOM.select('#slider').events('input')
    .map(ev => ev.target.value); // we return the value of the input
  
  // now using continuing to use Rx we kick off our state using startWith and our 
  // default putting our slider at 50 when we start the app
  let state$ = changeValue$.startWith(DEFAULT_VALUE);
  
  // to create the view we just map over all the events that come in from state$
  let view$ = state$.map(value => // value is what we return in line 13 & (15 when we start the app)
      h('div', [ // the h is hyperScript which is built into cycle/dom
        'Label: ' + value + ' units', // the value everytime a new event happens because we are mapping over those events
        h('input#slider', {type: 'range', min: 0, max: 100, value})
      ])
    )
  // we return an object with DOM referenced to view$ 
  return {
    DOM: view$
  };
}

// cycle now deals with passing our app to our side effect makeDOMDriver,
// makeDomDriver communicates with the browser DOM and returns it's 
// results into main(), hence it's a Cycle
Cycle.run(main, {
  DOM: makeDOMDriver('#app')
});