UI development with RxJs and Cycle UI with RxJS and Cycle.js (part 3)

03 January 2017

UI development with RxJs and Cycle.js (part 3)

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

The overall idea

In the first post of this series, we saw how to interact with RxJS to observe events, consume data from the API and subscribe the results.

In the second post, we explored Cycle.js to have an idea of what the framework is.

Now we will merge these ideas to create our UI and try to put that in an organized way. We will use a pattern called MVI, that stands for Model-View-Intent. Let's dive on each part now.

Using Cycle.js, the first thing we're going to do is to set up our basic main function and the DOM driver. For the intent we'll receive all the streams generated by Observables in our UI, those ones who are created by click in our case.

Then, we'll define all the expected logic/behavior that streams will handle. We are going to define all of it on the Model as you can see below.

The third part will be defining the view. We will use the code provided from Cycle.js to build our DOM.

Now, let's see the implementation for each one of the MVI parts.

The Intent

As we explored before, the intent will handle the creation of the Observables, returning the streams. Here we define which UI elements are expected to have interaction and also the type of interactions.

The Model

Here we'll interact will the streams, defining how they play together. In our case, it's basically interactions with the API after click events. These operations are expected to update UI values.

The View

Following the Cycle.js suggestion to create views, we use the internal hyperscript functions and build the DOM tree. Looks weird to use this approach in the beginning, but it's pretty simple once you get used to.

The aftermath

The full JS code and the UI can be visited clicking on the image below. Hope you liked this exploration, and get inspired to learn more about RxJS and Cycle.js.

PS: All the content of these 3 blog post series is an adaptation of all the material created by Andre Staltz. I strongly recommend you to watch Cycle.js course on egghead.io and read his introduction to Reactive Programming you've been missing for a deeper understanding.

Bonus: Refactoring Cycle.js (part 4)

comments powered by Disqus