Meetup Paris WebComponents #8

WebApp Exercice in Cycle.js

Nicolas Carlo

Introduction to Cycle.js

What is Cycle.js?

A functional and reactive JavaScript framework for cleaner code

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

The MVI model

Composable

Dive into ze Code

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?

YES if your team wants to learn FRP with JavaScript and is ready to get involved and contribute to the Cycle.js community.

Otherwise… nope, go for something else (Elm, Angular 2…)

Few tips & links

Thanks!