« Back to home

Introduction to ReactJS + Flux with Ruby On Rails (Part I)

I've been wanting to play with ReactJS + Flux for a long time and finally got some time to implement a simple application using this framework alongside with Rails. It is being a fun experience that is worth to share to other web developers interest in learning about ReactJS.
In this tutorial I will explain how ReactJS works and will show how to use it with Ruby On Rails with a simple example: a chat application.

A brief history of ReactJS

ReactJS was created by Jordan Walke, a software engineer that works on Facebook. He was heavily influenced by a PHP component system used by facebook and by functional programming concepts.

The project born as a solution for large and complicated web applications where one small change on the data would cascade on other parts of the code, re-rendering views and making the process extremely slow. Also, Jordan and the facebook team built it as a solution for the team productivity that was decreasing as the project was getting bigger.

Some time later, Jordan in an effort to use ReactJS on Instagram, extracted the project from facebook's specific code. This work was the first step to open source the project in May of 2013 at JSConf. Today, ReactJS is maintained mainly by the community having only 4 engineers from Facebook working on it's core.

What is ReactJS

ReactJS is an open source javascript library that is sometimes compared to AngularJS although it is very different. The first notable difference is the fact that ReactJS isn't a MVC framework. It is a library for building modular and reusable web interfaces.

Virtual DOM

The library is built around the concept of the virtual DOM. The virtual DOM was created to overcome the lack of performance when updating nodes on the DOM. Today web applications have a very dynamic UI that requires lots of updates on the DOM in response of actions taken by the user.
The Virtual DOM is a lightweight copy of the DOM where updates can be done in a performatic way. When the real DOM needs to be updated, a comparison is made between the real and the virtual DOMs and only the differences are updated on the real DOM.
When using ReactJS, virtual DOM manipulations become transparent. The developer don't have to worry about updating the DOM because the library takes care of manipulating the DOM.

JSX

JSX is an extension of javascript that allows write construct an HTML in a syntax like XML. This extension is used to describe a tree structure with its attributes, in this case HTML nodes. Basically, JSX will compile a syntax like this:

<div>
  <img src="avatar.png" className="profile" />
  <h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>

to

React.createElement("div", null,
  React.createElement("img", { src: "avatar.png", className: "profile" }),
  React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
);

FLUX

Flux is what makes the ReactJS library so powerful. It is an architecture different from MVC that has as a main principle a unidirectional data flow. The chart below gives an overview of the flux architecture.

The flux architecture is composed by three major parts: Dispatcher, Stores and Views (React Components).

  • Views: The views in Flux architecture are normally associated with the ReactJS components. The views retrieve data from the stores and renders the html.

  • Stores: In the Flux architecture, the stores are responsible for holding the business logic and the data for the application.

  • Dispatcher: The dispatcher is a central element in the flux architecture. It is responsible for dispatching actions for the stores to handle.

  • Actions: The flux architecture defines actions as entities that are dispatched to stores to instruct an operation. Actions also hold data necessary to complete the operation.

A more in-depth explanation about the flux components will be given in the next in this tutorial.

Outro

With the basic concepts in mind, the next part of this tutorial will show how to get started with ReactJS and Flux on Ruby On Rails by example.

If you have any suggestion please leave a comment below (:

Some references and recommended materials

How many people at Facebook work on react: https://www.quora.com/How-many-people-at-Facebook-work-on-React

What is virtual DOM: http://tonyfreed.com/blog/whatisvirtual_dom

JSX: https://facebook.github.io/react/docs/jsx-in-depth.html

Flux Overview: https://facebook.github.io/flux/docs/overview.html

React.js Keynote: https://www.youtube.com/watch?v=KVZ-P-ZI6W4

ReactJavaScript’s History and How it Led To ReactJS http://thenewstack.io/javascripts-history-and-how-it-led-to-reactjs/

OSCON 2014, React Architecture https://www.youtube.com/watch?v=eCf5CquV_Bw