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?
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!
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:
SEO supposedly works better with server rendering.
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.
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.
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.
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.
These videos will help you get acquainted with React on Rails. You can watch them below or click here to see the series.
If you’d like to learn more, please considering hiring ShakaCode for our basic coaching package: http://www.shakacode.com/work. If you’re interested in ShakaCode’s React, React-Native, or Ruby on Rails development services, please contact me at email@example.com.
Share this article
Are you looking for a software development partner who can
develop modern, high-performance web apps and sites?