Cycle.js takes off the training wheels

Cycle.js: Discover reactive programming with this JavaScript framework

Sarah Schlothauer
© Shutterstock / santypan

Want to learn more about reactive programming in a hands-on environment? Cycle.js may not be the most popular JavaScript framework, but its fully reactive ideas are one of a kind. Find out how to get on the track and start riding.

Recently, the State of JavaScript 2018 showed off the popularity of different JavaScript frameworks. What about the lesser known underdogs? Today we look at Cycle.js, a fully reactive framework for JavaScript with some novel ideas.

Could it be your new unconventional love?

Reactive programming

Cycle.js is “a functional and reactive JavaScript framework for predictable code“. It builds upon functional and reactive streams.

From the site:

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.

Of course, mentioning the concept of “reactive programming” immediately means it must be compared against React, right? The two are conceptually similar. Previously, Cycle.js’ creator has been openly critical of React. However in July 2018 he posted a blog titled “Use React in Cycle.js and vice-versa“. The two are not direct competitors. You can use React components and libraries in Cycle.js apps and benefit from the best of both. Cycle.js, for instance, is more for architecture.

SEE ALSO: Uber joins the framework race with Fusion.js

Cycle.js promises to create small, readable code, since it only has a few key concepts. Functional reactive streams allow for building more with less.

Go on and test out the live preview.

Any issues?

Time to shift away from its positives for just a bit. As with learning any new framework, you might encounter some bumps in the road when using Cycle.js.

Quite frankly, it’s not that easy to grasp. Especially compared to building an app in React, using Cycle.js can take longer. (Of course, this is a subjective opinion and individual results may differ. We would love to hear from your own experiences.)

For those interested in learning more about reactive programming, Cycle.js is worth at least playing around in. It may shed some light on concepts and help formally introduce you to event streams and observables.

Some issues that users experienced have been addressed in Cycle State. This utility “wraps your Cycle.js main function with reducer-driven state management and a single state atom”.

Cycle.js resources

Several tutorials can help you prepare to take off the training wheels:

SEE ALSO: Vue.js and the doubts of considering a new framework

So, what’s your verdict? Is Cycle.js an underdog that deserves more love, or do you recommend it with caution?

Sarah Schlothauer

Sarah Schlothauer

All Posts by Sarah Schlothauer

Sarah Schlothauer is the editor for She received her Bachelor's degree from Monmouth University, West Long Branch, New Jersey. She currently lives in Frankfurt, Germany with her husband and cat where she enjoys reading, writing, and medieval reenactment. She is also the editor for Conditio Humana, an online magazine about ethics, AI, and technology.

Inline Feedbacks
View all comments