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. We have the option to use automated tools like Yeoman, but I wasn’t able to find the solution that fit all my needs. Tools I’ll be using node’s NPM to fetch the main tools, Gulp for the build and watch tasks, and Bower for the resources. Flux Architecture If you already took a stab at Flux you might know this diagram: And that’s it.
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 1. 2. 3. 4. 5. 1. 3. 4. 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 Flux is an application architecture created by Facebook for building client-side applications. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code. The Dispatcher The central hub of the application. Stores Actions Views and Controller-Views. React + Flux backed by Rails API - Part 3 | Fancy Pixel. 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. Looking back at our routes, I defined a default route, mounted under /stories, handled by a component called StoriesPage. This component will abide the flux architecture, therefore its only goal in life will be displaying data fetched by a store, and re-render when something has changed. React-Flux On Rails | Tutorial, Walkthrough, Guide | NYCDA.