Introduction

A few weeks ago I had the opportunity to attend to JSConfUY and represent the Tryolabs team. The conference was great! There were a couple of interesting talks that caught all my attention, both showed a new (at least to me) architecture to be used in web applications. What I found interesting was the unidirectional data flow between the components of the architecture. Facebook uses this new architecture in its web application and it's naming it Flux.

Flux

Flux it's only the architecture name or paradigm, but we can find various frameworks implementing it and evolving a lot. The main idea is that there are 4 principal components, and data flows only in one direction. I'm not going to explain the details of the architecture, since there are lots of posts and tutorials doing it, starting with the official docs.

Why Flux is interesting?

It's interesting because it's simple! We, the web developers, know and master (or at least we think we master) the MVC pattern, but there are so many variants and so many implementations! In many of them data flow is confusing, following different directions and streams. The idea of a simple data flow it's a big help to avoid confusion and complications.

How to get started

A quick way to start, is to choose a framework and make something, I chose NuclearJs. NuclearJs is built around FRP and immutable states, and uses some extra concepts like getters. After taking a look at the documentation for a while, I found it easy to start developing a new web app. To test the framework I made a simple contact management web app.

Code Examples

Here are some code examples to show how you can create a web app using all those concepts.

The app it's simple, you can see a list of contacts, add, delete and fav contacts. The app has two main stores, the contacts store and a store that has the selected contact id. The store code:

On the initialize method you can see how the store reacts to some actions. Those actions are sent by the actions creators.

The actions creators are called by the React components.

To show the contacts in the components, you use the contactsGetter in the getDataBindings method.

If you want to see all the code, you can find it in our react-examples repository.