Cycle.js Fundamentals
Overview of Cycle.js
This lesson shows what can be learned next as a continuation of this course, and gives a recap on the core concepts: main for pure logic, drivers for side effects, run() to connect main and drivers, sources for read effects, sinks for write effects, and nesting Cycle.js apps to work as components.
[00:00] So far, we've seen a lot about Cycle.js. To build proper and advanced web apps, we still need to learn some other things, such as we don't usually use JS Bin for real apps, and we don't directly import the packages as scripts.
[00:15] Usually, you want to do something like ES6 imports instead, where you say import these helper functions from CycleDOM, and in combination with a bundler, preferably, such as Browserify or Webpack.
[00:32] We haven't seen how to build dynamic lists of component and state management, but those perfectly doable. We have libraries for those things as well.
[00:41] We haven't mentioned testing, which is actually really good in Cycle, because the main function is a pure function. You can just pass some sources, you get out sinks, and you do some assertions on those sinks.
[00:56] Server-side rendering, also known as universal JavaScript, is also quite easy in Cycle. Don't stop your learning process here. Keep digging for material. We have a lot of material and documentation to build real apps.
[01:08] Let's have a recap. What did we learn? That first of all, main is for pure logic, and drivers are for side effects, or effects with the external world. These two are plugged together with Cycle run. Sinks are for write effects, and sources are for read effects.
[01:30] Essentially, we get a clear interface for IO where sources are inputs and sinks are outputs. We also saw that Cycle.js can be nested in the sense that this labeled slider is also a Cycle.js component function. It's a perfectly valid Cycle.js program in itself, which could be passed here to Cycle run.
[01:56] Yet we are embedding it inside our main function here, and it works as a component. In this situation, the sources and sinks are not just an interface for input and output effects, but they're also for incoming messages and outgoing message.
[02:13] For props, we're passing messaging from the parent to the child. With this value sink, we're passing a message from the child to the parent. As we saw, everything is a stream. Every time you see a dollar sign variable here, that's a stream. We can just combine all those streams together using operators.
[02:36] Markup for the DOM is written in plain JavaScript, so it doesn't look like magic. You can get autocomplete and syntax highlighting from your editor, whatever that editor is. It's just JavaScript with reactive programming. That's the idea in Cycle.js.