Playing Streams with KefirJS

Kefir is a lighter alernative to RxJS.

Here is a simple counter in functional reactive programming.

You can play with it here kefirCounter

<script 
  src="https://cdnjs.cloudflare.com/ajax/libs/kefir/3.8.0/kefir.min.js" >
</script>

<button id="inc">+</button>
<span id="result">0</span>
<button id="dec">-</button>

<script>
  /****************** Helpers **********************/
  const elt = (id) => document.getElementById(id);
  const fromEvts = Kefir.fromEvents;
  const merge = Kefir.merge;
  const clickEvt = "click";
  const ident = (v) => () => v;
  const one = ident(1);
  const negone = ident(-1);
  const add = (x, y) => x + y;
  /*************************************************/

  const inc$ = 
    fromEvts(elt("inc"), clickEvt)
      .map(one);

  const dec$ = 
    fromEvts(elt("dec"), clickEvt)
      .map(negone);

  const sum$ = 
    merge([inc$, dec$])
      .scan(add, 0)
      .onValue(s => result.innerText = s);

</script>