Dive into Cycle.js

Core Abstraction

Cycle.js has a simple core abstraction: an application is a pure main() function, whose input (sources) and output (sinks) are effects of the external world, managed by plugins (drivers).

The primitives used inside the main function is reactive streams. Thus Cycle.js applications are entirely this free and have nothing like setState() or update().

The separation between function and drivers allows for great extensibility (easy to swap drivers) and testability (easy to test pure functions).

This abstraction also allows for awesome composablity: the main function of every Cycle.js application is also a reusable function in main function of another Cycle.js application. Sources and sinks are not only the interface between main function and the drivers, but also the interface between a child component and its parent.

Example

The core API of Cycle.js is run(main, drivers).

 1import {Stream} from "xstream";
 2import {run} from '@cycle/run'
 3import {div, label, input, hr, h1, makeDOMDriver, DOMSource, VNode} from '@cycle/dom'
 4
 5interface Sources {
 6  Dom: DOMSource
 7}
 8
 9interface Sinks {
10  Dom: Stream<VNode>
11}
12
13
14function main(sources: Sources): Sinks {
15  const input$ = sources.Dom.select('.field').events('input')
16
17  const name$ = input$.map(ev => (ev.target as HTMLInputElement).value).startWith('')
18
19  const vdom$ = name$.map(name =>
20    div([
21      label('Name:'),
22      input('.field', {attrs: {type: 'text'}}),
23      hr(),
24      h1(`Hello ${name}`),
25    ])
26  )
27
28  return { Dom: vdom$ }
29}
30
31run(main, { Dom: makeDOMDriver('#app-container') })

The above code is adapted from the JavaScript hello world sample on the frontpage of Cycle.js official website. I use TypeScript instead.