image by agsandrew

Why I chose to use Cycle.js

Continuing on from my previous article Want to learn JavaScript in 2015 / 2016. I’m going to walk you through what else I’ve been up to in the world of Javascript.

Initially I’d planned to talk about Functional Programming and give another set of easy steps into learning it within JavaScript. As my interest in Cycle has grown and the two subjects are very much related. I felt I should first let newcomers know a little more about what is happening in the thriving Cycle community, there has just been a new version released too!

First things first, why Cycle?

Don’t worry about the terms you don’t yet understand in the image above, to me Cycle is a way to handle data and user interaction in a clean and easy to reason about way. I will further explain the diagram, but first, let’s just build some more foundations as to why I came to using Cycle.

Cycle is one of the least intrusive Frameworks out there! How can that be? Get ready for it click here and view the entirety of it’s codebase!! Only 143 lines of code and so what does that tell me?

I’ve always been fairly reluctant to learning a full blown framework. Not because they aren’t good, or useful, but purely on the fact that I like to control as much as I can. I just prefer knowing I’m writing my own JavaScript, not the JavaScript the framework want’s me to use! I know that might be a little over dramatic but it boils down to wanting to grow skills in javascript, not those skills into a framework. Especially when said framework is bound to be replaced in a matter of years if not months, knowing the Javascript world!

For those reasons I fell towards React, because with it you can mix and match different technologies and use them to build your app the way you want to. In those circumstances React doesn’t have a preference on what you use for the logic or backend etc, which is great. Also React offers really great concepts, here are a few key ones: it’s one-way data flow, modularisation and splitting of the codebase into components.

So why don’t I just stay with react? React is great at dealing with the view but the dataflow concepts are not at it’s core. If you look at the diagram below, that is a visual example of flux. The React team offered this data-flow solution to the community!

I know, I’m being a little unfair and Flux is no longer the best data-flow implementation that React community has to offer. But Flux was what everyone was learning as they started (probably still is to newcomers). I’m personally feeling the pain of trying to control how the data is going around my app codebase and returning the results of that journey to the user.

The one-way dataflow is superb, but the complexity of reasoning about that dataflow can be somewhat confusing. Unfortunately React has it’s intent and view combined, things are pre determined. You end up having to use built in helpers like componentWillMount, this.state, this.props, componentDidMount. There is nothing bad about that but I was after more flexibility.
I still think React is great and use it but I want to be able to explore new concepts and deal with more complexity in an easier manner.


Lets recap, I want a non intrusive framework, one that has a simple dataflow concept, still learning JavaScript skills that will outlive the framework, and a great community to be able to share and grow ideas!

Well for me all those requirements pointed me to Cycle, so is it a framework? that’s still open to debate, if you think about the size of the core file. I see Cycle as a really good/powerful concept and that gives you to freedom to use that concept as you wish! All the key features that I liked about React but more importantly easy to reason about dataflow! As a side effect I’m also learning Functional Programming concepts, Reactive Programming, Observables/RxJS, push, not pull, base architecture and much more.

Why functional programming? The more complex a user expects their apps to be, the ability to handle those expectations requires an intelligent and useful way to reason about the way data flows through our codebase and back to the user. Functional Programming handles those requirements beautifully. If you want to know why then there is a superb free online book called Mostly adequate guide to Functional Programming which is a great intro into the basics of FP.

Lets not pull the wool over your eyes here. Looking at the concepts I’ve mentioned which you’ll be learning might be off putting enough for some not want to use Cycle. But if you bare that learning curve, you’ll ultimately be doing your future self a favour! You’re no longer learning a framework but very useful tools and concepts which you can take away with you!

Now you understand what led me towards Cycle lets go through some basics so you get a feel for it.

Lets revisit this diagram, looking at the top black box. This will be a single function of your app and the little squares inside are individual pure functions that are used to pass around and manipulate your data from the input funnel to the output funnel. Digging a little deeper into the little squares they are observables, and the arrows between them are operators.

A pure function is a function that, given the same input, will always return the same output and does not have any observable side effect. Brian Lonsdorf

Because these functions are pure they never change state outside of them selves. This key factor means you will never have state changed from under your feet by some other function in another part of your app. Your data will also be immutable meaning that you can only make copies of your data. This binds well with your pure functions, now for a couple of links to explaining that concept more in depth here and here


Now for the second lower grey box in the image. This is the interaction with aspects happening in the world outside your code, like DOM manipulation, HTTP calls, Socket.IO, Ajax calls, database queries etc… All of these are your side effects and keeping them separated is a good way not to dirty your app with complexity & unknown actions or reactions in the code base. I think of them as plugins. They are there to talk to the outside world and give me back the information I want the way I want it. I can also give them data that I have manipulated in my app back to the outside world.

Ok enough of the explaining lets look at some code, here is a simple example with plenty of comments:

A working JsBin example is located here , if you work your way through the code and comments you should get a clearer understanding of what is happening. This is a compressed version of an app and because this is just Javascript you can easily refactor the 3 let’s inside the main() function. These could be pulled out into their own files. That’s the beauty of Cycle you really are just dealing with functions.

You might wonder, why am I mapping over the state$ ? what is a stream or RxJS even?

This is the part where the learning curve will be challenging, you can get up and running real quick but RxJS is at the route of how our dataflow is passed around our app and to be able to do more complex apps you will need to learn RxJS and Observables. There is also talk of Observables being brought into JS.

Now for some material, take a look at André Staltz’s (the creator of Cycle) video series on Egghead.io to get more in depth look at reactive programming and RxJS. Another great starting point is Jafar Husain’s course on FrontendMasters.com.

I have my own boilerplate with a router which passes around state, it also has tests so you can get up and running, it is located here

So what does the future hold for Cycle?

As mentioned at the very beginning of this article, there has just recently been a new release allowing isolation of components. Plenty more information on that in the great docs featured on Cycle.js.org .

As the community grows we are seeing more and more interesting projects here is a useful list of what has been coming out of the community as well as a more in depth explanation into the workings of Cycle by Frederik Krautwald here in medium

There is also interesting development going on with MotorCycle which is an offshoot of the Cycle concept but instead using Most.js instead of RxJS and Snabbdom instead of VirtualDom for the DOM driver. Both of these replacement are for performance improvements and what I’ve seen so far is very promising.

So to finalise, if Cycle is the type of concept you feel you can relate to, then give it a try. This isn’t a fix all problems out of the box solution and I really don’t class it as another hipster framework because it’s genuinely taking off and coming up with real life solutions whilst still in it’s infancy. If you want to learn a little more why not just ask the community directly on the Gitter Channel


Thank you for taking the time to read this and thanks to Tylor Steinberger & Burkhard Reffeling for the proof reading :) + the top image was made by Agsandrew