ggrumbley/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="app"></div>
<script id="jsbin-javascript">
// Logic (functional)
'use strict';

function main(sources) {
  var click$ = sources.DOM;
  var sinks = {
    DOM: click$.startWith(null).flatMapLatest(function () {
      return Rx.Observable.timer(0, 1000).map(function (i) {
        return 'Seconds elapsed ' + i;
      });
    }),
    Log: Rx.Observable.timer(0, 2000).map(function (i) {
      return 2 * i;
    })
  };
  return sinks;
};

// source: input (read) effects
// sink: output (write) effects

// Effects (imperative)
function DOMDriver(text$) {
  text$.subscribe(function (text) {
    var container = document.querySelector('#app');
    container.textContent = text;
  });
  var DOMSource = Rx.Observable.fromEvent(document, 'click');
  return DOMSource;
}

function consoleLogDriver(msg$) {
  msg$.subscribe(function (msg) {
    return console.log(msg);
  });
}

function run(mainFn, drivers) {
  var proxySources = {};
  Object.keys(drivers).forEach(function (key) {
    proxySources[key] = new Rx.Subject();
  });
  var sinks = mainFn(proxySources);
  Object.keys(drivers).forEach(function (key) {
    var source = drivers[key](sinks[key]);
    source.subscribe(function (x) {
      return proxySources[key].onNext(x);
    });
  });
}

var drivers = {
  DOM: DOMDriver,
  Log: consoleLogDriver
};

run(main, drivers);
</script>


<script id="jsbin-source-javascript" type="text/javascript">// Logic (functional)
function main(sources) {
  const click$ = sources.DOM;
  const sinks = {
    DOM: click$
      .startWith(null)
      .flatMapLatest(() =>
        Rx.Observable.timer(0, 1000)
          .map(i => `Seconds elapsed ${i}`)
      ),
    Log: Rx.Observable.timer(0, 2000)
      .map(i => 2*i),
  };
  return sinks;
};

// source: input (read) effects
// sink: output (write) effects

// Effects (imperative)
function DOMDriver(text$) {
  text$.subscribe(text => {
    const container = document.querySelector('#app');
    container.textContent = text;
  });
  const DOMSource = Rx.Observable.fromEvent(document, 'click');
  return DOMSource;
}

function consoleLogDriver(msg$) {
  msg$.subscribe(msg => console.log(msg));
}


function run(mainFn, drivers) {
  const proxySources = {};
  Object.keys(drivers).forEach(key => {
    proxySources[key] = new Rx.Subject();
  });
  const sinks = mainFn(proxySources);
  Object.keys(drivers).forEach(key => {
    const source = drivers[key](sinks[key]);
    source.subscribe(x => proxySources[key].onNext(x));
  });
}

const drivers = {
  DOM: DOMDriver,
  Log: consoleLogDriver,
}

run(main, drivers);</script></body>
</html>

## jsbin.yuweput.js
// Logic (functional)
'use strict';

function main(sources) {
  var click$ = sources.DOM;
  var sinks = {
    DOM: click$.startWith(null).flatMapLatest(function () {
      return Rx.Observable.timer(0, 1000).map(function (i) {
        return 'Seconds elapsed ' + i;
      });
    }),
    Log: Rx.Observable.timer(0, 2000).map(function (i) {
      return 2 * i;
    })
  };
  return sinks;
};

// source: input (read) effects
// sink: output (write) effects

// Effects (imperative)
function DOMDriver(text$) {
  text$.subscribe(function (text) {
    var container = document.querySelector('#app');
    container.textContent = text;
  });
  var DOMSource = Rx.Observable.fromEvent(document, 'click');
  return DOMSource;
}

function consoleLogDriver(msg$) {
  msg$.subscribe(function (msg) {
    return console.log(msg);
  });
}

function run(mainFn, drivers) {
  var proxySources = {};
  Object.keys(drivers).forEach(function (key) {
    proxySources[key] = new Rx.Subject();
  });
  var sinks = mainFn(proxySources);
  Object.keys(drivers).forEach(function (key) {
    var source = drivers[key](sinks[key]);
    source.subscribe(function (x) {
      return proxySources[key].onNext(x);
    });
  });
}

var drivers = {
  DOM: DOMDriver,
  Log: consoleLogDriver
};

run(main, drivers);
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.js"></script>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>
	<div id="app"></div>
	<script id="jsbin-javascript">
	// Logic (functional)
	'use strict';

	function main(sources) {
	var click$ = sources.DOM;
	var sinks = {
	DOM: click$.startWith(null).flatMapLatest(function () {
	return Rx.Observable.timer(0, 1000).map(function (i) {
	return 'Seconds elapsed ' + i;
	});
	}),
	Log: Rx.Observable.timer(0, 2000).map(function (i) {
	return 2 * i;
	})
	};
	return sinks;
	};

	// source: input (read) effects
	// sink: output (write) effects

	// Effects (imperative)
	function DOMDriver(text$) {
	text$.subscribe(function (text) {
	var container = document.querySelector('#app');
	container.textContent = text;
	});
	var DOMSource = Rx.Observable.fromEvent(document, 'click');
	return DOMSource;
	}

	function consoleLogDriver(msg$) {
	msg$.subscribe(function (msg) {
	return console.log(msg);
	});
	}

	function run(mainFn, drivers) {
	var proxySources = {};
	Object.keys(drivers).forEach(function (key) {
	proxySources[key] = new Rx.Subject();
	});
	var sinks = mainFn(proxySources);
	Object.keys(drivers).forEach(function (key) {
	var source = drivers[key](sinks[key]);
	source.subscribe(function (x) {
	return proxySources[key].onNext(x);
	});
	});
	}

	var drivers = {
	DOM: DOMDriver,
	Log: consoleLogDriver
	};

	run(main, drivers);
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">// Logic (functional)
	function main(sources) {
	const click$ = sources.DOM;
	const sinks = {
	DOM: click$
	.startWith(null)
	.flatMapLatest(() =>
	Rx.Observable.timer(0, 1000)
	.map(i => `Seconds elapsed ${i}`)
	),
	Log: Rx.Observable.timer(0, 2000)
	.map(i => 2*i),
	};
	return sinks;
	};

	// source: input (read) effects
	// sink: output (write) effects

	// Effects (imperative)
	function DOMDriver(text$) {
	text$.subscribe(text => {
	const container = document.querySelector('#app');
	container.textContent = text;
	});
	const DOMSource = Rx.Observable.fromEvent(document, 'click');
	return DOMSource;
	}

	function consoleLogDriver(msg$) {
	msg$.subscribe(msg => console.log(msg));
	}


	function run(mainFn, drivers) {
	const proxySources = {};
	Object.keys(drivers).forEach(key => {
	proxySources[key] = new Rx.Subject();
	});
	const sinks = mainFn(proxySources);
	Object.keys(drivers).forEach(key => {
	const source = drivers[key](sinks[key]);
	source.subscribe(x => proxySources[key].onNext(x));
	});
	}

	const drivers = {
	DOM: DOMDriver,
	Log: consoleLogDriver,
	}

	run(main, drivers);</script></body>
	</html>