React on Rails, 2000+ 🌟 Stars

React on Rails is the number one open source integration of React + Webpack + Ruby on Rails. If we take out Webpack from the equation, React on Rails is the number 2 integration solution, second only to reactjs/react-rails, which started 2 years earlier. How did we get here?

History

In 2014, I had to build a “dashboard” with dynamic tables and graphs, updating with various knobs and dials. At the time, I was a total Ruby on Rails fanboy, building browser interactivity with CoffeeScript, jQuery, and gem-packaged or copied JavaScript libraries. The dashboard assignment led me down an evaluation of the various JavaScript library alternatives, of which EmberJS, AngularJS, and React were the top alternatives.

Without a doubt, Pete Hunt’s 2 seminal talks, React: Rethinking best practices (slides here) and Mountain West JavaScript 2014 — Be Predictable, Not Correct, sealed the deal for me in terms of picking React over its competitors. With my Rails background, the most appealing aspect was how the unidirectional data flow of React reminded me of the simplicity of the request-response cycle of browser apps. Incidentally, there’s now a huge additional reason to use react, which is that react-native allows you to use the same great patterns to build native mobile apps.

Once I decided on React, I explored the react-rails gem, which is based on the familiar Rails asset pipeline. I documented my experience with a detailed tutorial. Next, I wanted to use some related open source, namely react-bootstrap. At the time, there was no gem packaging of this library. And I also wanted to use new ES6 features. Hmm…I was almost helpless at the time!

With a recommendation from Pete Hunt, I quickly settled on using Webpack and npm to setup the JavaScript for my Rails project. I extensively documented my findings in my article Fast Rich Client Rails Development With Webpack and the ES6 Transpiler. As part of the documentation, I created the shakacode/react-webpack-rails-tutorial example. If you google “react webpack rails”, I’m quite sure this repo will come up first 😀. Incidentally, Giles Bowkett just wrote an extensive article on why Webpack should replace the Rails asset pipeline.

I googled around to see what alternatives there were to my technique and I came across Blaine Hatab’s article 3 ways to integrate Ruby on Rails + React + Flux. Blaine agreed that Webpack was better, but it was just too much work compared to the react-rails gem. The lack of server rendering with my solution was a deal breaker. The challenge was set for me to figure out how to make Webpack work with server rendering.

Since my original use case of a dashboard didn’t require SEO, I never worried about “Server Rendering”. React has a magical capability to not only create the HTML on the client side but to start off with HTML created on the server side. Why would you want to do this? The most important reasons are:

1. SEO supposedly works better with server rendering.
2. The page will be drawn even while JavaScript is being loaded. This can provide a much better browser experience, especially on slow hardware or network connections.
3. Server-rendered HTML can be cached by Rails.

That led to me to look into the react-rails mechanism for server rendering. I considered creating a PR to that repo, as documented by issue #301 for react-rails. Intuition soon led me to create a separate repo so that we wouldn’t be hobbled by the asset-pipeline legacy code. In retrospect, this was a great decision as it would give me complete artistic license over what React on Rails would become.

Today

What does React on Rails do? You can run the generator and get the basics added to an existing Rails app in minutes. The tutorial videos listed below demonstrate that basic functionality. However, that’s only the beginning.

The best way to get a glimpse of a simple React on Rails project is to visit reactrails.com. You’ll see a live, open-source example that demonstrates the various techniques of React on Rails.

Our project strategy is outlined in the article The React on Rails Doctrine. We facilitate the integration of modern JS into your Rails project, reducing your “JavaScript fatigue”. We’ve included support for our favorite parts of the React ecosystem, including Redux and React-Router. You can even mix and match a React header with either a React or a Rails content area, as shown by the extensive example live at reactrails.com. We support server rendering. We have special helpers for ensuring that JS assets are prepared for your tests. We prepare your JS assets during precompile automatically. Turbolinks is well supported so long as you don’t use react-router.

Here’s a visual summary of the generated source code:

When picking an open source project, it’s best to pick a solution that’s widely used, as it will have better documentation and fewer bugs.

As of October 22, 2016:

• 2028 🌟 stars!
• 113,050 total downloads of the react_on_rails gem on rubygems.
• 53,249 downloads of the JavaScript part of React on Rails in the last month on npm.
• Numerous live websites use React on Rails, as shown on our Projects page.
• A Gitbook of extensive docs.

Future

What’s next for React on Rails?

• Enhancements to server rendering, such as using Node.js servers, rather than running embedded JavaScript within the Rails server.
• Better support for code splitting large hybrid Rails and React apps. The goal is to support progressive enhancement, as outlined by Addy Osmani in his recent articles on Progressive Web Apps with React.js. This will replace Turbolinks. Another important article on the subject is The PRPL Pattern. PRPL stands for Push, Render, Pre-cache, Lazy-load.
• Better support for Rails fragment caching of server rendering. You can write your own helper for the cache key for now.

The React On Rails Tutorial Series

These videos will help you get acquainted with React on Rails. You can watch them below or click here to see the series.