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.
[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.
Very nice course! I really liked the approach of building a toy version to illustrate how it actually works.
+1 for an 'advanced', real-life app course.
Excellent course. Thank you! +1 for the advanced course!
Great course! Advanced one would be great!
Thanks a lot! +1 for advanced cycle.js course
Excellent! Very well explained concepts. +1 for advanced cycle.js course
Good job! I loved it. Very well explained.
+1 for advanced course
Great course. +1 for the advanced one.
Loved the course very consise and clear, and Cycle.js is a great way to build apps would love to see more courses on Cycle.js. Some topics that interest me are testing and architecture
Awesome course, thank you! Would also love an advanced course.
Great Tutorial. I really like cyclejs and how it utilizes functional programming in most of its parts. I would be interested in a more advanced tutorial. Thank you, Andre!
Great course ! It's mindtwisting, but I definitely have to try on a real world case. An advanced course would be very welcome :)
Brilliant course. +1 for the advanced course!
Lovely! Please, more advanced courses.
+1 for the advanced course
Great course! +1 for advance cycle.js
Not yet convinced.