Introduction to Cycle.js

What is Cycle.js?

A functional and reactive JavaScript framework for cleaner code

> What if the user was a function?

A cyclic architecture

• App logic lies in main()
   
• Side effects are isolated in re-usable drivers
   
• main() is a pure, reactive dataflow

Everything is a stream

Libraries to manipulate Observables with operators

> Rx.js, xstream…

Explicit dataflow

function main(sources) {
  const decrement$ = sources.DOM
    .select('.decrement').events('click').mapTo(-1);

  const increment$ = sources.DOM
    .select('.increment').events('click').mapTo(+1);

  const action$ = xs.merge(decrement$, increment$);
  const count$ = action$.fold((x, y) => x + y, 0);

  const vtree$ = count$.map(count =>
    div([
      button('.decrement', 'Decrement'),
      button('.increment', 'Increment'),
      p('Counter: ' + count)
    ])
  );
  return { DOM: vtree$ };
}

The MVI model

> Unidirectional User Interface Architectures

The MVI model

Composable

My feedbacks on usage

Cycle.js, the cool parts

• Re-usable components = encapsulated apps
  • Easy refactoring of subparts (eg: MVI pattern)
     
• App = pure dataflow
  • Easy to unit test
  • Fake it until you make it (eg: using fake streams)
  • Feel relax when adding changes as there can't be side effects = ease debugging
  • Combo with TypeScript = safe from regressions
     
• Generic, re-usable drivers for side effects

Cycle.js, the bof parts

• Paradigm shift
  • Learning curve that may not suit your needs
     
• To debug a stream, you need to subscribe to it
  • This can be confusing for beginners
     
• Community is quite small
  • Few concrete use cases, you have to figure it out
    (eg: form validation, the Cycle-way?)
  • All the community hasn't switch to TypeScript yet. Not a big deal but requires you to understand TS, deal with interfaces & compatibility issues.

To cycle or not to cycle?