How can Cycle code be broken up for creating large applications?

Question

I have gone through the official and other documents about Cycle.js The only point I see is that it separates the main logic and their effects on DOM.

The examples given are very short like building a BMI calculator. I don't understand how developing a big app will be like on Cycle.js, and I don't understand how can I put all the code of a big app in the main() and channelize its DOM effects separately.

How can Cycle code be written to produce large applications?

Answer 1

I don't understand how can I put all the code of a big app in the main () and channelize its DOM effects separately.

As with any library or framework, you need to build a large app in smaller pieces, typically known as components. With cycle, components are actually just small cycle applications. You can make hundreds of components, which would all have a main function, and compose those inside of other components and so on. It's very simple, just like composing any function from other functions:

function theWholeApp() {
  subComponent()
  subComponent2()
}

function subComponent() {
  anotherNestedComponent()
}
// etc

As you can see in the Component walkthrough, the BMI Calculator is a component built from a main function, and it utilizes a Labeled Slider component that has its own main function. Using the same technique, the BMI Calculator can be output inside another component, and so on. Components generally need to be isolated to behave as components.

Because all of the code you will write with Cycle is functional, you can divide up your code into as many or a few functions as you prefer. However, the recommended paradigm is model-view-intent, where each component is divided up into a function for each:

function main({DOM}) {
  return {DOM: view(model(intent(DOM)))};
}

For a large app, you will also need routing. cycle-router by TylorS seems to be the way to go right now. Cycle is new and hasn't benefited from as much community input as projects like Angular and React. It is difficult to get started with at the moment due to lack of tutorials, examples, and documentation of various things like cycle-router. All of this will improve in time and make Cycle more viable. From a technical standpoint, Cycle is a fantastic approach for writing applications, though it may not be practical for everyone until more resources are available.

This sample project by Cmdv may help you get started.