We need to give structure to our application with logic and effects. This lessons shows how we can organize our code into two parts: main() function for logic, and effects functions for effects.
We still have our timer app, here, working, and it was written with two parts -- logic and effects -- but we need to give structure to this. It's not at all generic. For instance, it only supports, now, one type of effect.
Let's give some structure by first putting logic in the function called main. Main will just return the observable of strings.
Then we will also put the effects in a function called DOM effect, which will take the observable of text strings, and it will subscribe to them and put them in the DOM.
Nothing is happening, because we need to call these functions that we created, so first we call main, which will return us an observable, and then we can call DOM effect, given the observable that main returns, and then it works.
We're starting to give some structure to this. Let's say we want to have a different type of effect. Let's say we want to have a console log effect.
We can also put that in a function which takes the observable messages, subscribes to it, takes each message and puts it in the console log. How do we give that observable to the console log effect as well?
We can use the observable that was returned from main, and we're going to call this sink. You can think of it as an actual kitchen sink, where water is coming from the pipe, and it's being drained to some effect.
Then we can also give that sink to the console log effect, so now we have both type of effects being written using this common observable. In general, you want to put all the effects inside some function, and these will be separated from your app.