Get Advice Icon

Need advice about which tool to choose?Ask the StackShare community!

Rails
Rails

8.5K
5.2K
+ 1
5.3K
React
React

27.3K
19.1K
+ 1
3.4K
Add tool

Rails vs React: What are the differences?

Rails: Web development that doesn't hurt. Rails is a web-application framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) pattern; React: A JavaScript library for building user interfaces. Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

Rails belongs to "Frameworks (Full Stack)" category of the tech stack, while React can be primarily classified under "Javascript UI Libraries".

"Rapid development", "Great gems" and "Great community" are the key factors why developers consider Rails; whereas "Components", "Virtual dom" and "Performance" are the primary reasons why React is favored.

Rails and React are both open source tools. React with 132K GitHub stars and 24.5K forks on GitHub appears to be more popular than Rails with 43.6K GitHub stars and 17.5K GitHub forks.

Airbnb, Uber Technologies, and Facebook are some of the popular companies that use React, whereas Rails is used by Airbnb, Twitter, and Instacart. React has a broader approval, being mentioned in 3224 company stacks & 3094 developers stacks; compared to Rails, which is listed in 2322 company stacks and 799 developer stacks.

What is Rails?

Rails is a web-application framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) pattern.

What is React?

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
Get Advice Icon

Need advice about which tool to choose?Ask the StackShare community!

Why do developers choose Rails?
Why do developers choose React?

Sign up to add, upvote and see more prosMake informed product decisions

Sign up to add, upvote and see more consMake informed product decisions

Jobs that mention Rails and React as a desired skillset
What companies use Rails?
What companies use React?

Sign up to get full access to all the companiesMake informed product decisions

What tools integrate with Rails?
What tools integrate with React?

Sign up to get full access to all the tool integrationsMake informed product decisions

What are some alternatives to Rails and React?
Django
Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design.
Ruby
Ruby is a language of careful balance. Its creator, Yukihiro “Matz” Matsumoto, blended parts of his favorite languages (Perl, Smalltalk, Eiffel, Ada, and Lisp) to form a new language that balanced functional programming with imperative programming.
Sinatra
Sinatra is a DSL for quickly creating web applications in Ruby with minimal effort.
Laravel
It is a web application framework with expressive, elegant syntax. It attempts to take the pain out of development by easing common tasks used in the majority of web projects, such as authentication, routing, sessions, and caching.
Node.js
Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.
See all alternatives
Decisions about Rails and React
StackShare Editors
StackShare Editors
Angular
Angular
jQuery
jQuery
Ruby
Ruby
React
React
Redux
Redux
Rails
Rails

Late in 2014, around the time of the Series D, the WeWork engineering team had grown to 14, and while the backend was modernized with Rails and Active Admin CMS, the main website was lacking. The new headcount provided enough capacity to address the aging WordPress website.

As the team experimented with front-end technologies, they implemented a new signup flow with Angular, and other flows, including the Market Page, in React and Redux. The team says of that time: “If you’re following closely, yes, this means that in one rails app we had pages that included one or many of the following: jQuery, Angular, and React.”

See more
StackShare Editors
StackShare Editors
Angular
Angular
jQuery
jQuery
Objective-C
Objective-C
Swift
Swift
Go
Go
Ruby
Ruby
Java
Java
React
React
Python
Python
Node.js
Node.js
Rails
Rails

By mid-2015, around the time of the Series E, the Digital department at WeWork had grown to more than 40 people to support the company’s growing product needs.

By then, they’d migrated the main website off of WordPress to Ruby on Rails, and a combination React, Angular, and jQuery, though there were efforts to move entirely to React for the front-end.

The backend was structured around a microservices architecture built partially in Node.js, along with a combination of Ruby, Python, Bash, and Go. Swift/Objective-C and Java powered the mobile apps.

These technologies power the listings on the website, as well as various internal tools, like community manager dashboards as well as RFID hardware for access management.

See more
Russel Werner
Russel Werner
Lead Engineer at StackShare · | 8 upvotes · 92K views
atStackShareStackShare
GraphQL
GraphQL
Apollo
Apollo
Rails
Rails
React
React
React Storybook
React Storybook

Our front-end team decided to use React Storybook for our primary React development environment. It allows us to write components in isolation without the need to fire up our Rails stack. When writing components in isolation; you can focus on styling, behaviour and prop design. It forces you to think about how your component is going to be used by others. React Storybook uses webpack and hot module reloading under the hood. This allows us to write components very quickly since it hot reloads in the browser as you code!

The knobs add-on is great for testing different edge cases for the component props. There is even an add-on that will auto-render and snapshot your components with every prop permutation allows by your defined knobs. These snapshots can then be part of your CI testing.

We have a step in our build process that publishes a static React Storybook site on our production server. This allows our entire team to interactively test components before they are integrated into larger features. Once we are happy with our components in isolation, we integrate them into connected feature components which are wired up to Apollo and GraphQL to provide the data and state.

There are heaps of React Storybook add-ons to checkout. If you aren't using it, you should be.

See more
Spenser Coke
Spenser Coke
Product Engineer at Loanlink.de · | 8 upvotes · 116.6K views
atLoanlink GmbhLoanlink Gmbh
HTML5
HTML5
Vue.js
Vue.js
Google Drive
Google Drive
Mailchimp
Mailchimp
Zapier
Zapier
Trello
Trello
GitHub
GitHub
React
React
Node.js
Node.js
.NET
.NET
AngularJS
AngularJS
Rails
Rails

When starting a new company and building a new product w/ limited engineering we chose to optimize for expertise and rapid development, landing on Rails API, w/ AngularJS on the front.

The reality is that we're building a CRUD app, so we considered going w/ vanilla Rails MVC to optimize velocity early on (it may not be sexy, but it gets the job done). Instead, we opted to split the codebase to allow for a richer front-end experience, focus on skill specificity when hiring, and give us the flexibility to be consumed by multiple clients in the future.

We also considered .NET core or Node.js for the API layer, and React on the front-end, but our experiences dealing with mature Node APIs and the rapid-fire changes that comes with state management in React-land put us off, given our level of experience with those tools.

We're using GitHub and Trello to track issues and projects, and a plethora of other tools to help the operational team, like Zapier, MailChimp, Google Drive with some basic Vue.js & HTML5 apps for smaller internal-facing web projects.

See more
Yarn
Yarn
Redux
Redux
React
React
jQuery
jQuery
vuex
vuex
Vue.js
Vue.js
MongoDB
MongoDB
Redis
Redis
PostgreSQL
PostgreSQL
Sidekiq
Sidekiq
Rails
Rails
#Font-awesome
#Bulma.io

I'm building a new process management tool. I decided to build with Rails as my backend, using Sidekiq for background jobs. I chose to work with these tools because I've worked with them before and know that they're able to get the job done. They may not be the sexiest tools, but they work and are reliable, which is what I was optimizing for. For data stores, I opted for PostgreSQL and Redis. Because I'm planning on offering dashboards, I wanted a SQL database instead of something like MongoDB that might work early on, but be difficult to use as soon as I want to facilitate aggregate queries.

On the front-end I'm using Vue.js and vuex in combination with #Turbolinks. In effect, I want to render most pages on the server side without key interactions being managed by Vue.js . This is the first project I'm working on where I've explicitly decided not to include jQuery . I have found React and Redux.js more confusing to setup. I appreciate the opinionated approach from the Vue.js community and that things just work together the way that I'd expect. To manage my javascript dependencies, I'm using Yarn .

For CSS frameworks, I'm using #Bulma.io. I really appreciate it's minimal nature and that there are no hard javascript dependencies. And to add a little spice, I'm using #font-awesome.

See more
Danilo Nogueira
Danilo Nogueira
System Analyst at Vagas Tecnologia · | 4 upvotes · 2.5K views
atVagasVagas
Ruby
Ruby
React
React
Rails
Rails
#Backend
#Frontend
#Api
#BackendsForFrontends

#BackendsForFrontends #api #Frontend #backend

When we began to modernize our company's main software, we need to choose an architecture that could be as stable as it was for the last 20 years and at the same time, allow us to use one of the best alternatives to build an highly interactive and complex front-end.

So, to embrace the innovation while keeping an solid foundation, we decided to work with our main web framework Rails, with the React front-end, an amazing feature of one of Rails more recent versions.

The Ruby (and Rails) are our main programming language + framework for about 6 years to modernize our almost 20 years old legacy system. We already have a lot of interesting tools working together, like MongoDB, Redis, RabbitMQ, PostgreSQL etc. All of them with fantastic libraries/support for Ruby.

Besides that, our front-end team is growing fast, and wants to apply what they've been learning (in theory and practice) everyday with React .

But we don't want it to become a new monster after some months, when we passed the mainly features of our app to this new project, so we think: How we could use this new features? Which are the architecture that most adapt to our needs?

See more
Russel Werner
Russel Werner
Lead Engineer at StackShare · | 15 upvotes · 167.6K views
atStackShareStackShare
Redis
Redis
CircleCI
CircleCI
Webpack
Webpack
Amazon CloudFront
Amazon CloudFront
Amazon S3
Amazon S3
GitHub
GitHub
Heroku
Heroku
Rails
Rails
Node.js
Node.js
Apollo
Apollo
Glamorous
Glamorous
React
React
#FrontEndRepoSplit
#Microservices
#SSR
#StackDecisionsLaunch

StackShare Feed is built entirely with React, Glamorous, and Apollo. One of our objectives with the public launch of the Feed was to enable a Server-side rendered (SSR) experience for our organic search traffic. When you visit the StackShare Feed, and you aren't logged in, you are delivered the Trending feed experience. We use an in-house Node.js rendering microservice to generate this HTML. This microservice needs to run and serve requests independent of our Rails web app. Up until recently, we had a mono-repo with our Rails and React code living happily together and all served from the same web process. In order to deploy our SSR app into a Heroku environment, we needed to split out our front-end application into a separate repo in GitHub. The driving factor in this decision was mostly due to limitations imposed by Heroku specifically with how processes can't communicate with each other. A new SSR app was created in Heroku and linked directly to the frontend repo so it stays in-sync with changes.

Related to this, we need a way to "deploy" our frontend changes to various server environments without building & releasing the entire Ruby application. We built a hybrid Amazon S3 Amazon CloudFront solution to host our Webpack bundles. A new CircleCI script builds the bundles and uploads them to S3. The final step in our rollout is to update some keys in Redis so our Rails app knows which bundles to serve. The result of these efforts were significant. Our frontend team now moves independently of our backend team, our build & release process takes only a few minutes, we are now using an edge CDN to serve JS assets, and we have pre-rendered React pages!

#StackDecisionsLaunch #SSR #Microservices #FrontEndRepoSplit

See more
Zach Holman
Zach Holman
JavaScript
JavaScript
Rails
Rails
Apollo
Apollo
React
React

Oof. I have truly hated JavaScript for a long time. Like, for over twenty years now. Like, since the Clinton administration. It's always been a nightmare to deal with all of the aspects of that silly language.

But wowza, things have changed. Tooling is just way, way better. I'm primarily web-oriented, and using React and Apollo together the past few years really opened my eyes to building rich apps. And I deeply apologize for using the phrase rich apps; I don't think I've ever said such Enterprisey words before.

But yeah, things are different now. I still love Rails, and still use it for a lot of apps I build. But it's that silly rich apps phrase that's the problem. Users have way more comprehensive expectations than they did even five years ago, and the JS community does a good job at building tools and tech that tackle the problems of making heavy, complicated UI and frontend work.

Obviously there's a lot of things happening here, so just saying "JavaScript isn't terrible" might encompass a huge amount of libraries and frameworks. But if you're like me, yeah, give things another shot- I'm somehow not hating on JavaScript anymore and... gulp... I kinda love it.

See more
John Barton
John Barton
Founder at Hecate · | 7 upvotes · 25.4K views
atHecateHecate
Material-UI
Material-UI
Go
Go
PostgreSQL
PostgreSQL
Rails
Rails
MobX
MobX
Redux
Redux
React
React

Frontend choice was basically pre-ordained to be React. Seems like a strong choice on merits alone, plus I needed to learn it to stay current. I never liked Redux.js from the first time I tried to work with it, but a mate had recommended MobX and after watching a few videos I felt like I could fit the mental model of hit in my head. Using Material-UI which is a great timesaver and make sure I throw a few bucks their way every month via the open source collective.

Defaulted to Rails with PostgreSQL just because that's where my past strength as a dev had been. First prototype was in Go but was struggling a bit with the quality of libraries I needed so I went back to old faithful.

As soon as TypeScript was supported by default in Create React App I ported everything over. That combined with swagger code gen has given me really good type safety from the API boundary and above. I semi-regret the Go/Rails decision because I miss the type safety despite pain points with libraries.

I will probably look to flip back to Go gradually (probably via lambda) at a point where it makes sense for the business.

See more
Cyril Duchon-Doris
Cyril Duchon-Doris
CTO at My Job Glasses · | 4 upvotes · 168.9K views
atMy Job GlassesMy Job Glasses
Sidekiq
Sidekiq
Rollbar
Rollbar
redux-saga
redux-saga
Redux
Redux
React
React
Rails
Rails

After splitting our monolith into a Rails API + a React Redux.js frontend app, it became a necessity to monitor frontend errors. Our frontend application is not your typical website, and features a lot of interesting SPA mechanics that need to be followed closely (many async flows, redux-saga , etc.) in addition to regular browser incompatibility issues. Rollbar kicks in so that we can monitor every bug that happens on our frontend, and aggregate this with almost 0 work. The number of occurrences and affected browsers on each occurence helps us understand the priority and severity of bugs even when our users don't tell us about them, so we can decide whether we need to fix this bug that was encountered by 1k users in less than a few days days VERSUS telling this SINGLE user to switch browsers because he's using a very outdated version that no one else uses. Now we also use Rollbar with Rails, Sidekiq and even AWS Lambda errors since the interface is quite convenient.

See more
React
React

I use React because I think it is the one that embraces the most the functional component design.

New versions of React are on the right track.

Having to work with Vue or Angular is a lot of pain for me, especially because I'm used to the simplicity of React (which comes with the great price of a high learning curve). Also, the use of the Flux Pattern is so much easier with React, being designed as a one way data flow, than with its two foremost competitors.

Cheers to the React Team, and thank you very much !

See more
React
React

I use React because it provides a high level of flexibility to architecture the front end app having the posibility or not to incorporate other libraries such as State Management, Routing or Form Validation, among others. Unidirectional flow and component reutilization is another important advantage.

See more
Thomas LEVEIL
Thomas LEVEIL
at Mediaveille · | 5 upvotes · 1 views
React
React
Vue.js
Vue.js

I chose to use Vue.js a few years ago mainly for the easy learning curve. I have no experience with React, so I won't make any comparison here. Regarding available components, I never felt locked in because of Vue when looking for components. It happens that a component I wish to use is not available as a Vue component (and nobody published any Vue wrapper for it), but in such cases I was able to quickly hack a Vue wrapper component. In the end I don't think a decision to choose one framework over another should be made solely because of the number of components available. (And not all components in either framework is maintained, bug free, documented or easy to use)

See more
Oguzhan Cetin
Oguzhan Cetin
Senior Developer at Melantis · | 4 upvotes · 2 views
JavaScript
JavaScript
Vue.js
Vue.js
React
React

React is great, Vue.js is also great. But I'm personally using React, because React is changing the way I look at how JavaScript should be. This is a really big plus for me. Vue is good, but it's just another alternative. Also, too many big companies are using React, that means you can trust it for big projects.

See more
Adebayo Akinlaja
Adebayo Akinlaja
Engineering Manager at Andela · | 6 upvotes · 2.7K views
Bit
Bit
Create React App
Create React App
Material Kit
Material Kit
TypeScript
TypeScript
Evergreen
Evergreen
Material-UI
Material-UI
React
React

I picked up an idea to develop and it was no brainer I had to go with React for the frontend. I was faced with challenges when it came to what component framework to use. I had worked extensively with Material-UI but I needed something different that would offer me wider range of well customized components (I became pretty slow at styling). I brought in Evergreen after several sampling and reads online but again, after several prototype development against Evergreen—since I was using TypeScript and I had to import custom Type, it felt exhaustive. After I validated Evergreen with the designs of the idea I was developing, I also noticed I might have to do a lot of styling. I later stumbled on Material Kit, the one specifically made for React . It was promising with beautifully crafted components, most of which fits into the designs pages I had on ground.

A major problem of Material Kit for me is it isn't written in TypeScript and there isn't any plans to support its TypeScript version. I rolled up my sleeve and started converting their components to TypeScript and if you'll ask me, I am still on it.

In summary, I used the Create React App with TypeScript support and I am spending some time converting Material Kit to TypeScript before I start developing against it. All of these components are going to be hosted on Bit.

If you feel I am crazy or I have gotten something wrong, I'll be willing to listen to your opinion. Also, if you want to have a share of whatever TypeScript version of Material Kit I end up coming up with, let me know.

See more
Interest over time
Reviews of Rails and React
Review ofReactReact

Perfect workflow

How developers use Rails and React
Avatar of StackShare
StackShare uses RailsRails

The first live version of Leanstack was actually a WordPress site. There wasn’t a whole lot going on at first. We had static pages with static content that needed to be updated manually. Then came the concept of user-generated content and we made the switch to a full on Rails app in November of last year. Nick had a lot of experience with Rails so that made the decision pretty easy. But I had also played around with Rails previously and was comfortable working with it. I also knew I’d need to hire engineers with a lot more experience building web apps than I do, so I wanted to go with a language and framework other people would have experience with. Also, the sheer number of gems and tools available for Rails is pretty amazing (shout to RubyToolbox ).

I don’t see us ever having to move away from Rails really, but I could be wrong. Leanstack was built in Rails 3. For StackShare we decided to upgrade to Rails 4. Biggest issue with that has been caching. DHH decided to remove the standard page and action caching in favor of key-based caching (source)[http://edgeguides.rubyonrails.org/caching_with_rails.html#page-caching]. Probably a good thing from a framework-perspective. But pretty shitty to have to learn about that after testing out your new app and realizing nothing is cached anymore :( We’ll need to spend some more time implementing "Russian Doll Caching", but for now we’ve got a random mixture of fragment and action caching (usually one or the other) based on which pages are most popular.

Avatar of Instacart
Instacart uses ReactReact

Before two weeks ago or so, it used to be Backbone views and models, and everything was on our main store app, and our mobile web app, but actually, we just switched our mobile web app to using ReactJS for the interface. So it’s using Backbone models but ReactJS front-end components. Really, it was borne out of the frustration with how the Backbone model-view bindings worked, and it wasn’t especially performant for large views, and we had to do lots of tricks to make it performant. But swapping that out with React views meant that it could be both simpler and faster without having to spend a lot of time on that.

One other interesting thing about that is, since React actually works okay with the Backbone models and the Backbone router and stuff like that, we didn’t have to rewrite the mobile web application and update it to ReactJS. Rewrites are almost always a bad idea. We were able to upgrade pieces of it at a time, move on to React, and now the entire thing is using React and just has the Backbone router and models and stuff like that that we already had, so it's a lot faster.

Avatar of Karma
Karma uses RailsRails

We use Rails for webpages and projects, not for backend services. Actually if you click through our website, you won't notice it but you're clicking though, I think, seven or eight different Rails projects. We tie those all together with a front-end library that we wrote, which basically makes sure that you have a consistent experience over all these different Rails apps.

It's a gem, we call it Karmeleon. It's not a gem that we released. It's an internal gem. Basically what it does is it makes sure that we have a consistent layout across multiple Rails apps. Then we can share stuff like a menu bar or footer or that kind of stuff.

So if we start a new front end project it's always a Rails application. We pull in the Karmeleon gem with all our styling stuff and then basically the application is almost ready to be deployed. That would be an empty page, but you would still have top bar, footer, you have some custom components that you can immediately use. So it kind of bootstraps our entire project to be a front end project.

Avatar of Netflix
Netflix uses ReactReact

At the beginning of last year, Netflix UI engineers embarked on several ambitious projects to dramatically transform the user experience on our desktop and mobile platforms. Given a UI redesign of a scale similar to that undergone by TVs and game consoles, it was essential for us to re-evaluate our existing UI technology stack and to determine whether to explore new solutions. Do we have the right building blocks to create best-in-class single-page web applications? And what specific problems are we looking to solve? Much of our existing front-end infrastructure consists of hand-rolled components optimized for the current website and iOS application. Our decision to adopt React was influenced by a number of factors, most notably: 1) startup speed, 2) runtime performance, and 3) modularity.

React has exceeded our requirements and enabled us to build a tremendous foundation on which to innovate the Netflix experience.

Avatar of Cloudcraft
Cloudcraft uses ReactReact

Web-frontend programming prior to React: like banging rocks together. With React: Like wearing fusion powered underwear. Gives you a nice warm feeling. Using React for Cloudcraft.co allowed us to create a beautiful UI in record time (1 month start to launch), with virtually no bugs popping up during development. The functional approach to just rendering your component given a state just makes so much sense, with React figuring out the delta between your current and desired representation. It's the future kids!

Avatar of Kurzor, s.r.o.
Kurzor, s.r.o. uses ReactReact

React is choice number 1 when it comes to JS development at Kurzor. We choose React because it solves many issues with web applications in a elegant way. Writing an app in components is useful for coordination and isolation of concerns. React forces you to abandon state and use vertical passing through props instead. And having as many Pure Components as possible helps to write cleaner code.

With React we usually use: Redux, React Router, React Toolbox, Styled Components.

Avatar of Instacart
Instacart uses RailsRails

Web has always been in Rails from the beginning, so we used Redis for caching our items, which we had, from the beginning. Rails is kind of what we were comfortable with, and we knew we wanted the front end to be really, really snappy, so we de-normalized all the item attributes into Redis, and that's how it got served out.

Avatar of Kent Steiner
Kent Steiner uses ReactReact

This is the best component framework and API available today for building modern web sites and apps. I really enjoy how minimal it is, and powerful at the same time. It removes opinionated development and replaces it with logic and data philosophies, which has in turn fostered a robust and lively code and support community.

Avatar of Tim Lucas
Tim Lucas uses RailsRails

Rails 5 (beta 3) provided a nice structure for rendering responses, linking to front-end assets (compiled previously via Webpack), handling sessions w/ tailor made login links via an email button/token, background jobs, and creating an admin behind basic auth to allow managing of users and purchases.

Avatar of Ngakkan Nyaagu
Ngakkan Nyaagu uses RailsRails

For this project rails was ideal due to new features introduced in Rails 5 that allowed us to build a lightweight "API only" project. Developer familiarity and the ability to rapidly iterate, as well as providing an accessible testing framework were additional factors.

How much does Rails cost?
How much does React cost?
Pricing unavailable
Pricing unavailable