[Cycle.js] The Cycle.js principle: separating logic from effects

Posted 2020-06-09

The guiding principle in Cycle.js is we want to separate logic from effects. This first part here was logical, and this second part here was effects. Effects are everything that change the external world somehow, the real world such as the DOM is connected to the browser, which is the connected to the user, so when we do something like set the text content, we are changing the screen that will shown to the user. So things like console.log and HTTP network requests, all of these things are effects, and these things live in subscribes.

Logic on the other hand, this is not changing the external world anyhow, it‘s just an event stream of numbers every second, and we‘re mapping that event stream to another event stream with strings. This part here is functional, it‘s all about mapping some primitives to others, and this side is imperatives. Our guiding principle for Cycle.js is we want to push subscribes as far away as we can from our app.

So this part of subscribe we want this to live in the framework, and this part is the only thing that the developer will write as the app. That is the guiding principle to separate logic from effects.

console.clear();
// Logic
Rx.Observable.timer(0,1000)
.map( i => `Second elapsed ${i}`)

// Effect
.subscribe( text => console.log(text))