Why I chose to use Cycle.js
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?
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.
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:
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