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.