A functional and reactive JavaScript framework for cleaner code.

Welcome to the Cycle.js Wiki! This is the place for the community to gather information for everyone to learn and benefit from.

Functional means “clean”, and Reactive means “predictable”. Cycle.js apps are made of pure functions, which means you know they simply take inputs and generate outputs, without performing any side effects. The building blocks are Observables from RxJS, a Reactive programming library which simplifies code related to events, asynchrony, and errors. Structuring the application with RxJS also separates concerns, because all dynamic updates to a piece of data are co-located and impossible to change from outside. As a result, apps in Cycle are entirely this-less and have nothing comparable to imperative calls such as setState() or foo.update() - this makes them truly "reactive" which means much more predictable and reliable.

Cycle.js is a framework with very few concepts to learn. The core API has just one function: run(app, drivers). Besides that, there are Observables, functions, drivers (plugins for different types of side effects), and a helper function to isolate scoped components. This is a framework with very little amount of “magic”. Most of the building blocks are just JavaScript functions. Usually the lack of “magic” leads to very verbose code, but since RxJS Observables are able to build complex dataflows with a few operations, you will come to see how apps in Cycle.js are small and readable.

Drivers are plugin-like simple functions that take messages from sinks and call imperative functions. All side effects are contained in drivers. This means your application is just a pure function, and it becomes easy to swap drivers around. The community has built drivers for React Native, HTML5 Notification, Socket.io, etc. Sources and sinks can be easily used as Adapters and Ports. This also means testing is mostly a matter of feeding inputs and inspecting the output. No deep mocking needed. Your application is just a pure transformation of data.

In every Cycle.js app, each of the Observable declarations is a node in a dataflow graph, and the dependencies between declarations are arrows. This means there is a one-to-one correspondence between your code and minimap-like graph of the dataflow between external inputs and external outputs.

In many frameworks the flow of data is implicit: you need to build a mental model of how data moves around in your app. In Cycle.js, the flow of data is clear by reading your code.

Cycle.js has components, but unlike other frameworks, every single Cycle.js app, no matter how complex, is a function that can be reused in a larger Cycle.js app.