Cycle.js: Discover reactive programming with this JavaScript framework

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

• Cycle.js recommends André Staltz’s video lessons. (Staltz should be your first stop for information, since he is the author of Cycle.js. Why not learn from the person who knows it best? Staltz is also a great source to explore for learning more about the concept of reactive programming.)
• Casey A. Childers introduces the main concepts
• Ivan Jovanovic discusses switching from React to Cycle.js and how to work with HTTP streams
• Of course, browsing the getting started guide is a no-brainer and is very in depth
• The official Cycle.js Twitter occasionally links to other relevant materials

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

The post Cycle.js: Discover reactive programming with this JavaScript framework appeared first on JAXenter.