There are many React JS intros out there, but too few articles about bringing React into an existing Rails app.
At Cook Smarts, we brought React JS into the core of our application, used by thousands of people each week. We moved quickly from the conceptual beauty of React to figuring out how to make it work 100% of the time.
Here’s what React JS delivered in just a bit of time:
- A bug-free user experience back to IE 7
- Speed, with no detectable latency on the client side
- Thrilled users, who now have a more modern app experience
- Developer happiness (that’s me!)
First, some background. Cook Smarts is a service that helps people plan their weekly at-home meals. It suggests meals for the week, and the user can choose which ones to make, add meals from other weeks, adjust serving sizes, and adjust for dietary restrictions.
This is a lot of user interaction. A month ago, users selected which meals to make through a vanilla form. We then generated a static grocery list and meal plan. If they wanted to make any changes, they had to submit the form all over again.
It worked, but it needed improvement. Users wanted the app to remember their choices and allow them to check items off the grocery list. They wanted to make their selections as they browsed, not all at once.
We chose React JS because it is un-opinionated and friendly to existing apps. We could drop React into particular parts of the app without changing any other parts.
After implementing React, the meal planning experience is this simple, with no forms:
React is based on components that you arrange in a tree that basically documents itself. Here are the basic components for grocery list page:
… and for the menu page:
React has minimal impact on your Rails app’s overall structure, making it easy to bring into an existing app. Here were the basic steps to implementing it:
- Add react-rails to your gemfile
- Reference your new components in your views
- Create the server-side API’s necessary to feed and interact with your React components (this is not React-specific, just something an app needs to do as it implements more client-side functionality)
I presented to a local meetup about the process of implementing React for Cook Smarts, and hope to put together a how-to soon. In the mean time, check out these great resources for incorporating React and Rails:
- Thinking in React, the official written version and an unofficial (and excellent) video version
- The react-rails GitHub page and its original release announcement. It is pre-1.0, but version 0.12 is stable and in use at Cook Smarts. 1.0.0pre is just about ready, and you could safely start running with it in dev.
- A concise guide to bringing React into a Rails app, more useful if you like CoffeeScript.
Feel free to tweet me with any questions!
Hired.com brings Rails job offers to you. Free for candidates. Salaries from $75,000 to $250,000. Sign up now!