CycleJS FrontEnd Camp

FrontEndCamp NYC presentation about Cycle.js framework.

This is a blog post with slides and references shown during my presentation "Cycle.js: get in the loop" delivered at FrontEnd Camp at United Nations, NYC, 2016. The slides are at and embedded below for convenience.


Cycle.js is conceptionally maybe the best framework currently. "Best" in the sense of bug free, testability and logical structure. But for me it is really hard to write and understand. Too hard actually. I hope this changes in the future, too.

Functional programming

Reactive programming

  • Reactive data using spreadsheets:
    • How to implement a reactive spreadsheet using Angular in 20 minutes tutorial and the original example itself. You can refer to other cells using simple "A1" or "B2" notation. For instance, enter value 10 in cell "A1", then enter in cell "B2" an expression "A1 + 5". Now change value in cell "A1" and notice that "B2" has updated.
    • I have updated the code to allow simple expression with multiple cells. For example, cell C1 could be A1 + B1 and update itself if cells 'A1' or 'B1' change.
  • Same spreadsheet used to update live DOM nodes using same cell evaluation - a mini "web app"

Working with Observables

Useful libraries

reactive streams

Performance benchmarks by most.js team

virtual dom

Cycle.js concepts

How to learn