This lesson is the first in an introduction to Cycle.js. We will see how to build from scratch a toy version of Cycle.js. See how to use RxJS to create simple web apps, and how to separate logic from effects.
You can see everything will happen under this element. So that's on the HTML side, everything is ready and our goal will be to build on the DOM a timer saying seconds elapsed, and 0, 1, 2, and so forth. So how do we do that? First we create an observable of a timer that starts at 0 and tickets every 1 second. If you plot this over time it starts at the number 0, and ever second it gets incremented. It's a timer. We can match each of these i numbers in this observable to a string saying seconds elapsed is i.
Now that we have that, what we just need to put that on the DOM. How do we do that? By subscribing to this event stream, and then we need to somehow get this text string and put that on the DOM. We need to fetch the container element that we created on the DOM, the id app element by val, and then we just need to put the text string on the text content. There we go. So now we have this app that shows seconds elapsed and ticking every second. This is not Cycle.js yet, but it's getting there.
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.