JSFiddle - React, Tailwind, and code Playground

by Jaume Vinyes

HTML

<span>Cycle.js embraces functional reactive programming (fRP). Because programming is about transformation of data, and architecture is about flow of data, Cycle.js is really nothing more than functions (transformation) and observables (data flow).</span>
<span>The observable streams as input to functions are called sources, and the observable streams as output from functions are called sinks</span>
<img src="https://cdn-images-1.medium.com/max/600/0*EYLXZL6KK79U7nHp.png"/>
<span>Cycle.js circularly connects main with the drivers, creating a feedback loop of data.</span>
<span>The driver source observables are streaming events (or pushing data) into main, and main’s sink observables are streaming events (or pushing data) out to the drivers, which then can produce side effects based on the data from the program.</span>

JavaScript

// https://medium.com/@fkrautwald/plug-and-play-all-your-observable-streams-with-cycle-js-e543fc287872#.dgwj7wgjy

// Import Rx to build streams
import Rx from 'rx'
// Import "run" from the core.
import { run } from "@cycle/core"
// Import the DOM driver factory function
import { makeDOMDriver } from "@cycle/dom"

// A Cycle.js program’s entry point is called main(). In this function, the program is enclosed. Everything the program does happens from within that function.
// The input to the program is in Cycle.js known as sources.
function main(sources) {
  // We can listen for DOM events by using the DOM drivers API.
  // The $-sign just indicates that the variable is a stream.
  const inputRangeValue$ = sources.DOM
    // "select()" takes CSS selectors as argument and returns an object of methods of which "events()" is one.
    .select(".InputRange")
    // "events()" takes a string representing the event type to listen for and returns an observable stream of events of the specified type.
    .events("input")
    // We map the emitted events and return the value of the event target. 
    .map(ev => ev.target.value)
    
    // The program pushes information to the driver in the same form of event streams that the driver pushes to the program. Cycle.js uses the term "sinks" for the streams that are pushed out of the program to the outside world (the drivers). We simply return the sinks from the main().
    const sinks = {
    // Using the same key for the DOM driver as in "sources" to enable correct mapping. 
    // The DOM driver expects an Observable. Our Observable is of just one value;
    // a VTree of an INPUT element with class name "InputRange" and of type "range".
    DOM: Rx.Observable.just(h("input.InputRange", {type: "range"})),
  	}
    
    return sinks
}

// The sources in Cycle.js are provided as drivers. A driver is the connection point to the outside world. 
// Drivers provide streams of events from the outside world: when our program requires...