UI development with Cycle | Refactoring the code (part 4)

03 January 2017

Cycle.js: Refactor (part 4)

This is the 4th part of a blog post series about RxJS and Cycle.js. Understanding RxJS (part 1), Meet Cycle.js (part 2) and Cycle UI with RxJS and Cycle.js (part 3)

About this refactor

After I wrote this code using Cycle.JS and the blog posts, I received some cool feedback from Hadrien de Cuzey on how to improve it.

I will share here and comment what I learned after that.

If you wanna see it live, go to this JSBin. Now, let's see the implementation.

The new code

Looke below to the new code we have. In the top of the file we can see the first big difference: CycleHTTPDriver. This was for me the most important learning here. We can consider the HTTP requests as Observables and use the default code on Cycle.js to make the requests.

The other interesting point here is the use of hyperscript on view function. I've been exploring to see what's the best solution/good practice, but I fount that using the html helper elements (div, h1, p, etc) or the h function is basically a personal choice.

The Diff

In order to better understand the differece on the suggestions I created an online diff file. You can check it clicking on the image below.

Thanks again to Hadrien de Cuzey for the feedback and help here!
comments powered by Disqus