I’ve been trying to find a way to architect my projects in a functional way. When you’re still a newbie programmer, it’s hard to do. Most books and tutorials focus on the essentials and don’t teach systematic program design on top. They adopt an incremental approach to highlight the new concepts in a beginner-friendly way.

I stumbled over Cycle.js when I browsed Egghead.io’s free resources. You can watch a free video course by the creator of the framework.

The approach to differentiating between sources (event streams, actions) and sinks (outputs/views) appeals to me. It clearly distinguishes pure and impure parts of your code. And subscribing to event streams feels more to me intuitive than handling events with callback functions.

cycle.cj dataflow

Cycle’s core abstraction is your application as a pure function main() where inputs are read effects (sources) from the external world and outputs (sinks) are write effects to affect the external world. These I/O effects in the external world are managed by drivers: plugins that handle DOM effects, HTTP effects, etc.

The internals of main() are built using Reactive Programming primitives, which maximizes separation of concerns and provides a fully declarative way of organizing your code. The dataflow is plainly visible in the code, making it readable and traceable.

For now, I’ll stay focused on functional design and React for front-end projects, but I’ll keep cycle.js in mind.

Further Reading