3 ways to integrate Ruby on Rails + React + Flux. Why I’m using React with Rails I've been using Rails for years and recently I’ve been integrating javascript frameworks into my stack in various ways to help with front end development.
There are a lot of great javascript frameworks out there like Angular, Ember, Meteor, etc, but my current favorite is React and Flux. Little Blimp Dev Blog — Role-based authorization with React.js. Today we’re going to talk about the front end joy that is React.js, and a little number I put together to handle conditional display of elements based on who’s who.
Role-based authorization is one of those things that everyone ends up needing, but no one talks about. Just like associations. Try finding either of those topics in TodoMVC. But that’s a rant for another day. If you have no idea what React is, go here. I’ve been using React.js alongside Rails via react-rails and its been great. I’ll start off with my Pundit setup, as its been the inspiration for how I structure my JavaScript. /policies/post_policy.rb class PostPolicy attr_reader :user, :record def initialize(user, record) @user = user @record = record end def update?
Here we see that users are permitted to update and destroy their own posts, and admins can destroy anyone’s posts but not update them. /controllers/posts_controller.rb Now onto the view side, where most of our attention will be focused for this tutorial. React JS and Flux in Rails, a complete example. I recently wrote about real-world results with React JS.
Here is a concrete example of adding React to a Rails app, start to finish. React JS is a library from Facebook that powers user interfaces. It is simpler, faster, and less opinionated than many JavaScript MVC frameworks, making it easier to bring into an existing app. Start by reviewing our recommended React resources, then check out an example below. The example At Cook Smarts, we want recipes to be consistent, so we provide administrators with suggested ingredient names.
Suggestions are populated from previous recipes automatically, but they need to be pruned by an administrator to make sure they’re accurate. The app needs to provide an Excel-like way to quickly prune suggestions. React JS, in under 150 lines of readable code, gets us exactly what we need, an Excel-like data editor.
Tooling The example below relies upon Ruby on Rails, the react-rails gem (latest stable version), and Fluxxor (added to the app’s JavaScript manifest). React + Flux backed by Rails API - Part 2. This is the second part of “React + Flux backed by Rails API”, make sure to checkout Part 1.
In part 1 we created our fancy Rails API, setup the authentication and defined a resource for our tiny clone of Medium. Time to reach the core of this post: the frontend built in React with the flux architecture. The whole idea behind splitting the backend from the fronted is to treat the web UI as a first class citizen, sitting in its own folder, in its own repo, with no bindings to the backend. The backend can be easily interchanged, as long as the API specs remain consistent. So we’ll create a new app from scratch. Tools. Tutorial, Walkthrough, Guide. In May, I gave a talk on “An Introduction to React, Flux, React-Rails” at NYCDA.
The slides can be found here or you can contact me to arrange to hear the talk again. In this post, I’ll go into more details about the messaging example introduced in the talk and trace how data is passed uni-directionally from the backend down to the view, as is the signature of a React-Flux App. (The example source code is here.) To review, React is a Javascript view library, functioning as the “V” in MVC. It is lightweight and friendly so you could drop it in any framework you’re working with – Rails, Django, or even Angular.
The most crucial concepts in React land are “uni-directional data flow” and “Virtual DOM.” The actors here are: 1. the data (model) change event 2. the state & props 3. the components React works best if it only handles UI logic and does not worry about the states the components are in. Rails and Flux with Marty.js - Code, Love & Boards. After using Facebook's React JS for the last months and for different projects I have to say I'm as excited as the first day of using it.
I feel that as a full-stack developer I have finally found a front-end framework which fits perfectly to my needs. This doesn't mean I think it's better or worse than any other framework, it's just different and exactly what I need for the current projects I'm involved in. But the more I've been using it the more I've been starting to feel like creating only just React components and a homemade solution for managing the communication and data flow between them was not the right direction to follow.
Then I met Flux. Facebook's Flux. React + Flux backed by Rails API - Part 3. This is the last part of “React + Flux backed by Rails API”, make sure to check out Part 1 and Part 2 if you have missed them.
In part 1 we built a Rails API for a tiny clone of Medium, called appropriately Small. In part 2 we went through the setup of a React app with a Flux architecture, and built our authentication workflow. We close this series by providing the list of the stories and a creation page, protected by authentication. A note of warning: this is a quick and sometimes naive implementation, its main purpose is to show you how to get started with React and Flux, that’s why we didn’t put too much effort in handling possible errors or, for that matter, even showing progress indicators.
Tutorial, Walkthrough, Guide.