Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1047 of the free egghead.io lessons, plus get RxJS content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Overview of Cycle.js

2:28 RxJS lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Julio

Thank you so much! This will help a lot for starting with Cycle.js.

In reply to egghead.io
Avatar
Massimiliano

Absolutely, more courses will be very welcome. Muito obrigado!

In reply to egghead.io
Avatar
Henrik

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.

Avatar
javascriptjedi

This intro course has me intrigued. I hope the advanced course happens (and soon).

In reply to egghead.io
Avatar
Peco

This was great, please do more!

In reply to egghead.io
Avatar
Martin

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

Avatar
Martin

Count me in as eager to see more on Cycle.js! I'm a new-ish developer and this seems much more intuitive to me than other frameworks/libraries.

In reply to egghead.io
Avatar
Georgiy Slobodenyuk

I've been developing for a while and it took me some time to wrap my head around not using callback hell for async and observables but this library and ReactiveX blew me away. To the future!

In reply to Martin
Avatar
Josh

Great starter series! I'd love to see an advanced course where we build a more real-world app... routing, tests, nested components, animations, etc.

In reply to egghead.io
Avatar
Charif Mews

+1 for more advanced cycle.js course

In reply to egghead.io
Avatar
Jacek Kolasa

Great course! Advanced one would be great!

Avatar
Dmytro

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

Avatar
honore

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

Avatar
Michel

Good job! I loved it. Very well explained.

+1 for advanced course

Avatar
Ivan

Great course. +1 for the advanced one.

Thanks, Andre!

Avatar
tim

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

Avatar
Amit

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

Avatar
Joe

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!

Avatar
Joel Poulin

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

Avatar
Zhe

Brilliant course. +1 for the advanced course!

In reply to Joel Poulin
Avatar
Maurizio

Lovely! Please, more advanced courses.

Avatar
Tadeusz

+1 for the advanced course

Avatar
Lauriane Kayungu-N

Great course! +1 for advance cycle.js

So far, we've seen a lot about Cycle.js, but there's still plenty missing in order to build proper and advanced Web apps. We don't usually use JS Bin for real apps and we also don't directly import libraries as scripts in the HTML. We usually use npm packages and a bundler like Browser 5.0 or Webpack.

We haven't yet seen how to build dynamic lists. That's actually an advanced topic in Cycle.js, which is unusual for our framework, but it's still perfectly doable. It's just a matter of learning a pattern. We haven't even mentioned about testing, which is fantastic in Cycle.js because we can benefit a lot from the fact that main and everything inside it is pure.

Server-side rendering, also known as Universal JavaScript, is surprisingly easy in Cycle.js. Don't stop your learning process here. Keep on digging for material and help in order to build real apps. Let us know if you want to see an advanced course here in egghead.

Let's have a recap. What did we learn? We learned that main is for pure logic and drivers are for side effects. These two are plugged together and looped with Cycle.run. Syncs from the main are write effects and sources coming into the main are read effects. Essentially, we get a clear interphase for IO. Sources are inputs. Syncs are outputs.

Cycle.js can also be nested in the sense that this labeled slider function could have been passed to Cycle.run. The labeled slider's literally a perfectly valid Cycle.js program in itself. Yet, it can be easily embedded inside the main function and work as a component.

In that case, when it's embedded, sources and syncs are not just an interphase for IO effects, but also for any kind of incoming messages and outgoing messages in this hierarchy of nested components.

We also saw how everything is a stream. As you can see, we have dollar signs indicating that these variables are strings. Markup is written in plain JavaScript, which means you don't need to transpile. It doesn't look like magic. You still get all the out-complete and syntax-highlighting features from your editor, whatever that editor is.

It's just JavaScript and also Reactive Programming. If you like this course, remember to share it with your friends as well.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?