UI development with RxJs and Cycle Exploring Cycle.js (part 2)

03 January 2017

This is the second part of 3 blog posts on how to develop User Interfaces using RxJS and Cycle.js.

This is the 2rd part of a blog post series about RxJS and Cycle.js. Understanding RxJS (part 1)

Let's continue to build our UI, that consumes an public API from Brewdog's beer.

Cycle.js in general

I'm definitely not the best one to describe Cycle.js, but I can give you an overview and point you some resources to learn more about the framework. First, I saw some comparisons between RxJS and Cycle. In my understanding, you should compare Cycle.js with React or Angular.

Cycle.js will provide you a base scaffold on how to handle the interactions between your UI components and the logic or effects that they should run.

The main function and the drivers

Before we jump to our beer catalogue app, let's explore a simple implementation of Cycle.app.

The idea is to integrate whatever inputs your application has with expected effects/outputs. In the middle of that, you will have Observers generating streams, as we saw in the the previous post.

Cycle.js will use a simple template language...(in fact it's only javascript, an internal implementation of hyperscript as I could understand so far) to let you write the view of your UI components.

Take a look at a simple example of a Cycle.js application. We will use this structure to improve the Brewdog's catalogue.

Cycle.run comes from the framework and expect a main function and drivers. The best way to learn this part in deep is to watch the Cycle.js course on egghead.io.

Now that we have an idea on how Cycle.js works and also played a little with RxJS, let's merge them together.

Next: Creating the UI with RxJS and Cycle.js (part 3)

comments powered by Disqus