UI development with RxJs and Cycle Exploring RxJS (part 1)

03 January 2017

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

Sometime ago I've been exploring RxJava on Android applications. Basically I was using it to make HTTP requests and update the UI with values from some API.

And in one of the web projects I'm currently working on I saw myself surrounded by many HTTP calls and the famous callback hell. I decided to take some time to learn RxJS and see how it could help me, initially with these requests.

Then, I really liked not only how RxJS handle these kind of tasks, but how we can use it in general in web applications. Then I decided to use it with Angular but I come across another framework, really lightweight and decided to put all together.

I built this small UI, that consumes an public API from Brewdog's beer.



Click on the image and see the final result of this series with the final code on the Gist. I wrote these posts to help me organize my understanding on RxJS and Cycle. Hope it helps someone else.

Defining WHAT to OBSERVE

Observe what? First things first. In the beginning one of the complicated parts for me was understanding what the word Observable really means. Of course we can guess something...but I could not feel comfortable with the traditional examples with arrays. They were easy to run but too far from anything practical.

In a user interface, many components can be considered Observables. Imagine that everything you can interactive with can provide you some kind of response is possible to be one Observable. To be really pratical, in this UI, the links that refresh the bottles (all bottles or single one of them) are Observables. Look at this code:

The first thing to work with RxJS is to identify what is going to provide actions/values. They will probably be your Observables. Now...these components will provide you values...at any time...probably when the user click on the links on our case.

Everything is a STREAM

Now comes the best part of the game. If something is being observed, it generates a stream. That means that, along the time, it can provide some action or give you some value. Talking about User Interfaces, and in our simple example, this means that a click can happen and then something needs to be updated.

The code below is not simple in the first look, it uses some functional programming and some RxJS operators. But basically we're executing 3 steps: 1) point to the API, 2) generating a stream to handle the API response and 3) describing how the interface interacts with this data.



SUBSCRIBING to RENDER the content

What we have so far? We have Observables, which means elements we can interact with in our case, and we have Streams, which means how the data flow to provide value for our interface.

The last part of this introduction is to link both of these, so for example, when a click is performed, the UI is updated with new values from the request stream.

Here comes the subscribe word. In a stream, you link the expected behavior for that data. Let's see the code:



Take a look again in the UI for the Brewdog's catalogue and try to see where the three concepts above appear.



We could stop here and our UI for the Brewdog's catalogue would already work. We could build everything only with RxJS. But this would not be ideal for a large application. Large applications need a better Separation of Concerns, better definitions on layers and architecture.

Let's take a look at Cycle.js to help us with that: Next: Exploring Cycle.js (part 2)

PS: This code is adapted from the excellent explanation of RxJS from Andre Staltz. You definitely should read this to understand these concepts in detail.



comments powered by Disqus