Overview of Cycle.js

André Staltz
InstructorAndré Staltz

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 3 years ago

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.

Henrik
Henrik
~ 6 years ago

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.

Martin
Martin
~ 6 years ago

Excellent course. Thank you! +1 for the advanced course!

Jacek Kolasa
Jacek Kolasa
~ 6 years ago

Great course! Advanced one would be great!

Dmytro
Dmytro
~ 6 years ago

Thanks a lot! +1 for advanced cycle.js course

honore
honore
~ 6 years ago

Excellent! Very well explained concepts. +1 for advanced cycle.js course

Michel
Michel
~ 6 years ago

Good job! I loved it. Very well explained.

+1 for advanced course

Ivan
Ivan
~ 6 years ago

Great course. +1 for the advanced one.

Thanks, Andre!

tim
tim
~ 6 years ago

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

Amit
Amit
~ 6 years ago

Awesome course, thank you! Would also love an advanced course.

Joe
Joe
~ 6 years ago

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!

Joel Poulin
Joel Poulin
~ 6 years ago

Great course ! It's mindtwisting, but I definitely have to try on a real world case. An advanced course would be very welcome :)

Zhe Yang
Zhe Yang
~ 5 years ago

Brilliant course. +1 for the advanced course!

Maurizio
Maurizio
~ 5 years ago

Lovely! Please, more advanced courses.

Tadeusz Rychter
Tadeusz Rychter
~ 5 years ago

+1 for the advanced course

Lauriane Kayungu-N
Lauriane Kayungu-N
~ 5 years ago

Great course! +1 for advance cycle.js

Rasmus
Rasmus
~ 5 years ago

Not yet convinced.