React + Rails: How These Companies Use Ruby on Rails and React.js
Reading time: ~ 11 minutes
React.js was introduced by Facebook in 2013 as a modern Javascript framework with perks like one-direction data flow, reusable code components, and virtual DOM (document object model). Since its open-source announcement, market share for React amongst other JavaScript frameworks like Angular and Ember has steadily increased to make it a prominent choice in the web development community.
It’s also a popular front-end framework for pairing with Ruby on Rails applications, which is why we added it to our toolset and have made an effort to dig deeper into React over the last few years.
What types of companies are using Ruby on Rails and React in their web applications? Recently, we had an opportunity to speak with a handful of companies who use this pairing, ranging from industries like consumer goods, health and wellness, and commercial shipping. This tech stack works for a wide range of apps in a variety of industries.
These companies were kind enough to answer our questions about their experience using React+Rails and provided permission for us to publish their thoughts. If you’re considering using this tech stack, read on for some firsthand information on what it’s like. (And if you’re a full stack Rails developer with a knack for React.js, these are companies to keep on your list for future job searching!)
1. TaskRabbit
Headquarters: San Francisco
Q&A with Brian Leonard, Chief Technology Officer
Q: What does your company specialize in?
TaskRabbit offers a fast and convenient way to get things done around the house.
Q: What prompted your decision to use React?
React is a step-level improvement in the mindset of Javascript development. Dealing with the world in simple input/output paradigm reduces errors and increases speed. Even better, React Native allows effective cross-platform development that still feels native.
Q: What other solutions did you consider for your project?
On the web: Custom JS, Ember, Angular, etc. Mobile: Swift/Java
Q: What are you (or your team) most excited about using React?
Development speed and quality
Q: Are there any shortcomings you've uncovered in working with React?
The community has not evolved enough for clear best practices. Tooling can also be a challenge.
Q: Are you using React with Rails? If so, any feedback on this pair?
There is not a clear path (maybe with newest Rails?) for how to have them work together. We decided to integrate with Asset Pipeline and it's working out fine.
2. Airspace Technologies
Headquarters: Carlsbad CA
Q&A with Ryan Rusnak, Chief Technology Officer
Q: What does your company specialize in?
We specialize in time-critical shipping. We make things like organ deliveries faster, safer and more transparent than it has ever been using best in class technology.
Q: What prompted your decision to use React?
We build a lot of the front end in Angular 1 before Angular 2 was out of beta. We love Angular, but the roadmap is just a bit too scary to keep using it. Switching to Angular 2 would have been a complete rewrite anyway so we took it as a chance to switch to react.
Q: What other solutions did you consider for your project?
Angular, Elm, Polymer
Q: What are you (or your team) most excited about using React?
I personally think the best thing about React is the sheer volume of people that are developing with it. The community is fantastic which leads to much more community support and content allowing other developers to learn quickly and tackle a large variety of problems using one library.
Never before has a web developer been able to write native applications using the same familiar libraries that he uses to manage his web projects. Ionic and Cordova just never made it to React's critical mass or functionality. Additionally, my team has all commented that you can learn and use React without looking at pages of documentation. It just makes sense.
Q: Are there any shortcomings you've uncovered in working with React?
Initially, it was the BSD+ license which is a bit scary. I wish Facebook had not tried to leverage their framework against any potential competition, but they heard the community and changed it. I think React is going to have a long and healthy run.
The only other problem I have found is going from Angular to React is like going from Bentley to an F1. Angular has tons of niceties built into the framework like ng-show, ng-if and ng-options, and automatic data binding while in React, you tend to have to do much more yourself. It leads to an easier understanding, but arguably more time engineering.
3. Casper
Headquarters: New York City
Q&A with Kyle Rush, VP of Engineering
Q: What does your company specialize in?
We are a sleep company that makes products to help our customers achieve rest and relaxation. Currently, the product lineup spans mattresses/bedding, to furniture, and all the way to dog beds.
Q: What prompted your decision to use React?
Our codebase was "jQuery spaghetti," had poor web performance, and was written by a few engineers when the company was still a small startup. As the business grew in complexity we wanted to rewrite the frontend to make it more efficient for frontend engineers to work in, better web performance, and modernize our technology.
We chose React because of its popularity in the community and because of familiarity with it in our team. We also liked the idea of bits and pieces of frontend technologies (React + Redux) rather than an all-in-one (Angular). Another big decision to use React was the potential to draw in new talent that was excited about the technology.
Q: What other solutions did you consider for your project?
We spent weeks doing a few proof of concepts that included Vue.js, Angular, and React + Redux.
Q: Are you using React with Rails? If so, any feedback on this pair?
We are using React with Rails. The marketing frontend of our website is completely static and consumes Rails API endpoints. The checkout side of our website is still integrated with the Rails. Soon we will split the frontend and backend of all our applications. We do this to provide a lane for frontend and backend engineers to be efficient and knowledgeable about the codebase they are working in.
4. Wetravel Inc.
Headquarters: San Francisco
Q&A with Javidan Guliyev, Lead Engineer
Q: What does your company specialize in?
We are the payment platform for travel organizers.
Q: What prompted your decision to use React?
We were looking a solution to handle growing UX requirements. In the beginning, we started with jquery as everyone does. But organizing jquery code was getting more and more difficult over time. We started experimenting with other technologies in the market.
I had experience with Backbone at the time. I experimented with Knockout, Angular, Ember and React to decide what to choose. Organizing Backbone code at large codebase was also not so easy. I don't like the philosophy of writing javascript inside HTML and using all those weird directives – that was the reason not choosing Knockout or Angular(v1). Ember had a difficult learning curve, and there was a lot of documentation to read before starting (maybe it was only our case).
At that moment, React was the best fit for our needs. We had exchanged experiences with other people who had already started using React, their advice was to start with small portions and migrate legacy code step by step. Developing a draft version of SPA trip builder (8 steps with a lot of different configuration) took a week by one developer. It was fast if you compare the same work with jquery, or even with backbone.
Q: What other solutions did you consider for your project?
We started with jquery, then tried Backbone, Ember, Angular(v1), and Knockout
Q: What are you (or your team!) most excited about using React?
It has an easier learning curve for newcomers, and the code is cleaner.
Q: Are there any shortcomings you've uncovered in working with React?
We started with React-Flux paradigm after moved to Redux but ended using React-Mobx couple.
Q: Are you using React with Rails? If so, any feedback on this pair?
We using React with Rails 4, We also using server-side rendering everywhere where it is possible. Actually 80% of all our views rendered by React. We use internally developed a small framework for rendering react from rails backend. We refused using rails asset-pipeline, we using Webpack instead.
5. Klue
Headquarters: Vancouver, BC
Q&A with Sarathy Naicker, CTO
Q: What does your company specialize in?
Klue is a collection, curation & consumption platform for competitive intelligence.
Q: What prompted your decision to use React?
We were early adopters of React (circa early 2014). At the time, we were looking for a framework that was more performant than the others that were available. We liked the composability of components and were confident Facebook would evolve it in the right direction since our use cases resembled that of Facebook.
Q: Any resources or articles you found useful when making this decision?
We watched early Youtube videos of React in action.
Q: What other solutions did you consider for your project?
Angular (briefly).
Q: What are you (or your team!) most excited about using React?
React is very readable and maintainable, and the team appreciates that a lot.
Q: Are there any shortcomings you've uncovered in working with React?
Mainly the fact that there is no out of the box support for a data store. Flow didn't have any implementations that were publically available so we cobbled something together ourselves. We are in the process of moving to a Redux based implementation.
Q: Are you using React with Rails? If so, any feedback on this pair?
We've had our issues with using React under Rails 4, with the sprockets based asset pipeline. It was extremely slow and unreliable, causing much frustration. We moved to Rails 5 and webpacker, and life's gotten better since.
6. CaptainU
Headquarters: Denver, CO
Q&A with Jim Ray, Director of Development
Q: What does your company specialize in?
Youth sports recruiting for colleges
Q: What prompted your decision to use React?
We were tired of the constant struggle of maintaining JQuery inside views for our flagship application and we had already experimented with Ember.js and decided we didn't like that route.
Q: Any resources or articles you found useful when making this decision?
Not really. I went through the Udemy course and we just decided to move one page over to it to see how it went.
Q: What other solutions did you consider for your project?
Ember.js, Angular.js
Q: What are you (or your team!) most excited about using React?
The number of resources available if you get into trouble, and how big the community is.
Q: Are you using React with Rails? If so, any feedback on this pair?
Yes, before 5.x it was not the easiest thing. We actually have 2 build systems right now and it's detached from Rails.
7. Kait Hurley LLC
Headquarters: Portland, OR
Q&A with Peter Marks, Co-Founder
Q: What does your company specialize in?
Online exercise and meditation platform
Q: What prompted your decision to use React?
The structure it gives to the view layer, the momentum behind the community, and the promise shared tooling for mobile apps via React n=Native.
Q: Any resources or articles you found useful when making this decision?
Nothing in particular, there's so much helpful stuff out there. Facebook's own docs are a great place to get started.
Q: What other solutions did you consider for your project?
Angular
Q: What are you (or your team!) most excited about using React?
How easy the code is to read after not having read it in months, makes it much easier to maintain.
Q: Are there any shortcomings you've uncovered in working with React?
The API churn of React Native in the past has been concerning. On the web it's been nothing too rosy.
Q: Are you using React with Rails? If so, any feedback on this pair?
It's been great in production at my current company and last company, but there are tradeoffs. At my last company, we did a pretty basic integration with the react-rails gem that was very easy to set up and provided basic functionality out of the box. At my current company, we're currently using the react_on_rails, which was harder to set up since it includes a whole Webpack build environment that compiles into the asset pipeline. However, it enabled us to take advantage of more React tooling.
8. Snapsheet
Headquarters: Chicago, IL
Q&A with Santiago Herrera, Staff Software Engineer
Q: What does your company specialize in?
Simplifying auto claims processing cycle time through proprietary virtual claims processing technology
Q: What prompted your decision to use React?
We tried a few before going with React: Backbone, EmberJS, jQuery, and Angular.
React made the most sense to us. We liked the syntax better. There’s better documentation and a strong community. The declarative API and being able to break everything into atomic components makes it really easy to structure and reason about the flow.
Q: What other solutions did you consider for your project?
Backbone, EmberJS, jQuery, and Angular
Q: What are you (or your team!) most excited about using React?
Redux
Q: Are there any shortcomings you've uncovered in working with React?
Build configuration
Q: Are you using React with Rails? If so, any feedback on this pair?
It's really easy to separate the frontend from the backend, so working with rails makes no difference with this architecture than working with any other backends.
9. Operation Code
Headquarters: Portland, OR
Q&A with Kyle Holmberg, Lead Front-End Engineer
What does your company specialize in?
We're a non-profit, distributed organization focused on getting veterans into tech. We supply mentorship, scholarships, camaraderie, and the industry insight necessary to succeed. We're always looking for more contributors if you're looking to add to your resume or learn how to use React or Rails.
What prompted your decision to use React?
We decided to reimplement our Ruby on Rails MVC web app more as a learning exercise than of any real necessity. React seemed like a very largely demanded skill, and we opted for "hireability" when selecting the tools of choice in re-developing our website.
Any resources or articles you found useful when making this decision?
Stack Overflow's 2017 developer survey came out right before we began planning, and it seemed that the world loved React.
What other solutions did you consider for your project?
Vue.js and Angular.js
What are you (or your team!) most excited about using React?
Since we started out with React, we've found the framework to be incredibly flexible, especially for new and learning developers. Our application isn't very advanced nor does it universally apply best standards, but it works well and it works fast! As a quasi-product manager of the actual open source repository of Operation Code, I've also come to greatly appreciate the community surrounding React - there are so many developers ready and willing to contribute to our codebase.
Are there any shortcomings you've uncovered in working with React?
One thing I don't enjoy about managing a largely static website with many routes is that our route index is very large. It's incredibly painful to know that anybody adding a new page needs to dive into a nearly 1000-line file to throw another
<Route/>andimport Component from 'shared/components/Component';.
Are you using React with Rails? If so, any feedback on this pair?
With the release of Rails as a dedicated API, these two can work very well with one another, in their own dedicated repositories. At that point, success comes down to team communication around API endpoints and contracts.
Including React within the Rails repository itself is also a viable option. This path does include extra overhead around managing node modules, and perhaps depending on a third party gem for passing data between the two. This can be cumbersome if not well maintained.
Closing Thoughts
First, a big thank you to all of the people and companies who shared their experience using ReactJS with Ruby on Rails with us and the dev community.
From talking with these companies from a diverse background, we learned more about the depth that ReactJS has reached in the development community. New Javascript frameworks are released regularly, but few gain significant traction for such a wide range of applications. As the community continues to grow, React will become a more useful framework. More contributors and experts mean better solutions for the issues developers have experienced with React in the past.
Is your company using React + Ruby on Rails in an application? Do you want to share your experience with the community? Send an email to erica@planetargon.com and we can connect for an interview.
Looking for external help on a ReactJS + Rails application?
If you want to talk shop about pairing React with Rails, or are looking for external development help to accomplish your company's goals, click below to get in touch. You can schedule a call with our team right away.
