SlideShare a Scribd company logo
React on Rails
Different ways of integrating. Pros and Cons
Different Ways of Integrating React into Rails - Pros and Cons
About me
• name’s Mikhail Bortnyk
About me
• name’s Mikhail Bortnyk

• team leader in Amoniac OU
About me
• name’s Mikhail Bortnyk

• team leader in Amoniac OU

• co-founder of kottans.org
About me
• name’s Mikhail Bortnyk

• team leader in Amoniac OU

• co-founder of kottans.org

• Ruby language researcher
About me
• name’s Mikhail Bortnyk

• team leader in Amoniac OU

• co-founder of kottans.org

• Ruby language researcher

• twitter: @mikhailbortnyk
About me
• name’s Mikhail Bortnyk

• team leader in Amoniac OU

• co-founder of kottans.org

• Ruby language researcher

• twitter: @mikhailbortnyk

• github: @vessi
Short history of SPA in Rails
Short history of SPA in Rails
• Started from UJS
Short history of SPA in Rails
• Started from UJS

• continued with Backbone.js (Marionette.js afterwards)
Short history of SPA in Rails
• Started from UJS

• continued with Backbone.js (Marionette.js afterwards)

• progressed to angular.js
Short history of SPA in Rails
• Started from UJS

• continued with Backbone.js (Marionette.js afterwards)

• progressed to angular.js

• appeared react.js support (3rd party gems)
Short history of SPA in Rails
• Started from UJS

• continued with Backbone.js (Marionette.js afterwards)

• progressed to angular.js

• appeared react.js support (3rd party gems)

• webpack becomes part of Rails via webpacker gem
DHH dislikes SPAs
DHH dislikes SPAs
https://www.reddit.com/r/ruby/comments/341dyk/
why_does_dhh_dislike_spas_so_much/
We are not DHH
and sometimes we need something more than Rails
How do we do frontend in Rails
from some hands-on experience
Case 1. Boring
(Standalone application)
Standalone frontend
• Pros and Cons
Standalone frontend
• Pros:

• full control on frontend development process
Standalone frontend
• Pros:

• full control on frontend development process

• use what you actually want
Standalone frontend
• Pros:

• full control on frontend development process

• use what you actually want

• no need to fight with assets pipeline
Standalone frontend
• Pros:

• full control on frontend development process

• use what you actually want

• no need to fight with assets pipeline

• SPA loads independently
Standalone frontend
• Cons:

• +1 AJAX request to load data
Standalone frontend
• Cons:

• +1 AJAX request to load data

• you need to coordinate build and deployment
Standalone frontend
• Cons:

• +1 AJAX request to load data

• you need to coordinate build and deployment

• dependencies hell management
Standalone frontend
• Cons:

• +1 AJAX request to load data

• you need to coordinate build and deployment

• dependencies hell management

• coordinate, coordinate, and coordinate again
Standalone frontend
• Cons:

• +1 AJAX request to load data

• you need to coordinate build and deployment

• dependencies hell management

• coordinate, coordinate, and coordinate again

• and don’t forget about API versioning!
Case 1.5. Creepy as hell
(In-Rails JS)
In-Rails JS
• Pros and Cons
In-Rails JS
• Pros:

• Almost nothing
In-Rails JS
• Pros:

• Almost nothing

• Deployed at the same time
In-Rails JS
• Cons:

• Hardly maintainable
In-Rails JS
• Cons:

• Hardly maintainable

• supports only in-browser JSX
In-Rails JS
• Cons:

• Hardly maintainable

• supports only in-browser JSX

• dependencies hell
In-Rails JS
• Cons:

• Hardly maintainable

• supports only in-browser JSX

• dependencies hell

• suits only for very simple SPAs
Case 2. Outdated
(react-rails gem)
react-rails gem
• Pros and Cons
react-rails gem
• Pros:

• fixed react.js version
react-rails gem
• Pros:

• fixed react.js version

• server-side rendering
react-rails gem
• Pros:

• fixed react.js version

• server-side rendering

• components generators
react-rails gem
• Pros:

• fixed react.js version

• server-side rendering

• components generators

• UJS integration
react-rails gem
• Pros:

• fixed react.js version

• server-side rendering

• components generators

• UJS integration

• turbolinks integration
react-rails gem
• Cons:

• fixed react.js version
react-rails gem
• Cons:

• fixed react.js version

• deep integration with assets pipeline
react-rails gem
• Cons:

• fixed react.js version

• deep integration with assets pipeline

• no source maps
react-rails gem
• Cons:

• fixed react.js version

• deep integration with assets pipeline

• no source maps

• forget about “all-in-component” behavior
Case 3. Current
(react_on_rails gem)
react_on_rails gem
• Pros and Cons
react_on_rails gem
• Pros:

• separate SPA folder
react_on_rails gem
• Pros:

• separate SPA folder

• a lot of helpers for react and redux
react_on_rails gem
• Pros:

• separate SPA folder

• a lot of helpers for react and redux

• templates for SPAs
react_on_rails gem
• Pros:

• separate SPA folder

• a lot of helpers for react and redux

• templates for SPAs

• webpack as an app builder
react_on_rails gem
• Pros:

• separate SPA folder

• a lot of helpers for react and redux

• templates for SPAs

• webpack as an app builder

• yarn as a package manager
react_on_rails gem
• Cons:

• separate SPA folder
react_on_rails gem
• Cons:

• separate SPA folder

• dirty dances to get HMR working
react_on_rails gem
• Cons:

• separate SPA folder

• dirty dances to get HMR working

• complicated documentation
react_on_rails gem
• Cons:

• separate SPA folder

• dirty dances to get HMR working

• complicated documentation

• need to wait for upgrade dependencies
react_on_rails gem
• Cons:

• separate SPA folder

• dirty dances to get HMR working

• complicated documentation

• need to wait for upgrade dependencies

• a lot of side-selling in documentation
Case 4. Probably future
(webpacker gem)
webpacker gem
• Pros and Cons
webpacker gem
• Pros:

• easily managed components (via packs)
webpacker gem
• Pros:

• easily managed components (via packs)

• works with Turbolinks
webpacker gem
• Pros:

• easily managed components (via packs)

• works with Turbolinks

• supports hot loading out of box
webpacker gem
• Pros:

• easily managed components (via packs)

• works with Turbolinks

• supports hot loading out of box

• integrated into Rails starting from 5.1
webpacker gem
• Pros:

• easily managed components (via packs)

• works with Turbolinks

• supports hot loading out of box

• integrated into Rails starting from 5.1

• package.json lives in the same folder
webpacker gem
• Pros:

• easily managed components (via packs)

• works with Turbolinks

• supports hot loading out of box

• integrated into Rails starting from 5.1

• package.json lives in the same folder

• config lives altogether with your app config
webpacker gem
• Cons:

• No server-side rendering
webpacker gem
• Cons:

• No server-side rendering

• SPA is highly integrated into Rails App source code
webpacker gem
• Cons:

• No server-side rendering

• SPA is highly integrated into Rails App source code

• Still needs some setup ceremonies
Different Ways of Integrating React into Rails - Pros and Cons
Showtime
Conclusions
Questions?
Thanks!

More Related Content

PDF
Riding IronRuby on Rails
PDF
Practical IronRuby
PDF
ASP.NET MVC
PDF
Modern javascript
PDF
A Day of REST
KEY
In-house web automation?
PDF
eMusic: WordPress in the Enterprise
PPTX
Saving Time By Testing With Jest
Riding IronRuby on Rails
Practical IronRuby
ASP.NET MVC
Modern javascript
A Day of REST
In-house web automation?
eMusic: WordPress in the Enterprise
Saving Time By Testing With Jest

What's hot (20)

KEY
improving the performance of Rails web Applications
PDF
AWS Users Meetup April 2015
PPTX
How NOT to get lost in the current JavaScript landscape
KEY
Rapid development with Rails
PDF
Live Coverage at The New York Times
KEY
Torquebox rubyhoedown-2012
PDF
Ruby Masters 2011
PDF
Taking Micronaut out for a spin
PDF
REST In Action: The Live Coverage Platform at the New York Times
PDF
What I wish I knew about maven years ago
PDF
WordPress: Getting Under the Hood
PDF
2015 WordCamp Maine Keynote
PDF
Deployment Nirvana
PDF
淺談 Startup 公司的軟體開發流程 v2
PDF
An Introduction to the Laravel Framework (AFUP Forum PHP 2014)
PPTX
They why behind php frameworks
PDF
Merging two big Symfony based applications - SymfonyCon 2017
PPTX
Webservices: The RESTful Approach
PDF
Web a Quebec - JS Debugging
PDF
Transactions and Concurrency Control Patterns - 2019
improving the performance of Rails web Applications
AWS Users Meetup April 2015
How NOT to get lost in the current JavaScript landscape
Rapid development with Rails
Live Coverage at The New York Times
Torquebox rubyhoedown-2012
Ruby Masters 2011
Taking Micronaut out for a spin
REST In Action: The Live Coverage Platform at the New York Times
What I wish I knew about maven years ago
WordPress: Getting Under the Hood
2015 WordCamp Maine Keynote
Deployment Nirvana
淺談 Startup 公司的軟體開發流程 v2
An Introduction to the Laravel Framework (AFUP Forum PHP 2014)
They why behind php frameworks
Merging two big Symfony based applications - SymfonyCon 2017
Webservices: The RESTful Approach
Web a Quebec - JS Debugging
Transactions and Concurrency Control Patterns - 2019
Ad

Similar to Different Ways of Integrating React into Rails - Pros and Cons (20)

PDF
React on rails v6.1 at LA Ruby, November 2016
PDF
React on rails v4
PDF
React with Ruby on Rails: Perfect Pair to Build Web Apps
PDF
React with rails a perfect combination to build modern web application
PDF
How Much Does It Cost To Hire Full Stack Developer In 2022.pdf
PDF
React.js for Rails Developers
KEY
Wider than rails
PDF
Rails api + JS app
PDF
Things you must know on ruby on rails single page application
PDF
Agile Web Development With Rails 4th Edition 4th Edition Sam Ruby
PDF
Why Would A Programmer Fall In Love With SPA?
PDF
Rails 3 : Cool New Things
PPTX
Progressive Enhancment with Rails and React
PDF
Modern UI Development With Node.js
PDF
Functional Web Apps with WebMachine Framework - Mikhail Bortnyk
PDF
Functional Web Apps with WebMachine Framework
PPTX
Ruby conf
KEY
Ultra-modern Front-end Dev & Introducing Spar
PDF
What's new in ruby on rails 4
PDF
Front End Sadness to Happiness: The React on Rails Story
React on rails v6.1 at LA Ruby, November 2016
React on rails v4
React with Ruby on Rails: Perfect Pair to Build Web Apps
React with rails a perfect combination to build modern web application
How Much Does It Cost To Hire Full Stack Developer In 2022.pdf
React.js for Rails Developers
Wider than rails
Rails api + JS app
Things you must know on ruby on rails single page application
Agile Web Development With Rails 4th Edition 4th Edition Sam Ruby
Why Would A Programmer Fall In Love With SPA?
Rails 3 : Cool New Things
Progressive Enhancment with Rails and React
Modern UI Development With Node.js
Functional Web Apps with WebMachine Framework - Mikhail Bortnyk
Functional Web Apps with WebMachine Framework
Ruby conf
Ultra-modern Front-end Dev & Introducing Spar
What's new in ruby on rails 4
Front End Sadness to Happiness: The React on Rails Story
Ad

More from Amoniac OÜ (14)

PDF
Dokku your own heroku 21
PPTX
GO in Heterogeneous Language Environments
PDF
Cleaners of Caribbean
PPTX
Ruby JIT Compilation
PDF
Ambiguous Sinatra
PDF
Capistrano and SystemD
PPTX
Distributed Cluster in Ruby
PDF
Roda: Putting the Fun Back into Ruby Web Development
PDF
Rubymotion: Overview and Ecosystem
PDF
Rupher
PDF
Functional Ruby
PDF
How to Become a Сhef
PDF
Let's Count Bytes! Launching Ruby in 32K of RAM
PDF
Deployment tales
Dokku your own heroku 21
GO in Heterogeneous Language Environments
Cleaners of Caribbean
Ruby JIT Compilation
Ambiguous Sinatra
Capistrano and SystemD
Distributed Cluster in Ruby
Roda: Putting the Fun Back into Ruby Web Development
Rubymotion: Overview and Ecosystem
Rupher
Functional Ruby
How to Become a Сhef
Let's Count Bytes! Launching Ruby in 32K of RAM
Deployment tales

Recently uploaded (20)

PDF
Audit Checklist Design Aligning with ISO, IATF, and Industry Standards — Omne...
PDF
Understanding Forklifts - TECH EHS Solution
PDF
Claude Code: Everyone is a 10x Developer - A Comprehensive AI-Powered CLI Tool
PDF
Internet Downloader Manager (IDM) Crack 6.42 Build 41
PDF
Why TechBuilder is the Future of Pickup and Delivery App Development (1).pdf
PPTX
Reimagine Home Health with the Power of Agentic AI​
PDF
Odoo Companies in India – Driving Business Transformation.pdf
PDF
EN-Survey-Report-SAP-LeanIX-EA-Insights-2025.pdf
PPTX
CHAPTER 2 - PM Management and IT Context
PPTX
Operating system designcfffgfgggggggvggggggggg
PPTX
Essential Infomation Tech presentation.pptx
PDF
How to Migrate SBCGlobal Email to Yahoo Easily
PDF
PTS Company Brochure 2025 (1).pdf.......
PPTX
Lecture 3: Operating Systems Introduction to Computer Hardware Systems
PDF
Internet Downloader Manager (IDM) Crack 6.42 Build 42 Updates Latest 2025
PDF
wealthsignaloriginal-com-DS-text-... (1).pdf
PPTX
Agentic AI : A Practical Guide. Undersating, Implementing and Scaling Autono...
PDF
Which alternative to Crystal Reports is best for small or large businesses.pdf
PDF
Navsoft: AI-Powered Business Solutions & Custom Software Development
PDF
System and Network Administraation Chapter 3
Audit Checklist Design Aligning with ISO, IATF, and Industry Standards — Omne...
Understanding Forklifts - TECH EHS Solution
Claude Code: Everyone is a 10x Developer - A Comprehensive AI-Powered CLI Tool
Internet Downloader Manager (IDM) Crack 6.42 Build 41
Why TechBuilder is the Future of Pickup and Delivery App Development (1).pdf
Reimagine Home Health with the Power of Agentic AI​
Odoo Companies in India – Driving Business Transformation.pdf
EN-Survey-Report-SAP-LeanIX-EA-Insights-2025.pdf
CHAPTER 2 - PM Management and IT Context
Operating system designcfffgfgggggggvggggggggg
Essential Infomation Tech presentation.pptx
How to Migrate SBCGlobal Email to Yahoo Easily
PTS Company Brochure 2025 (1).pdf.......
Lecture 3: Operating Systems Introduction to Computer Hardware Systems
Internet Downloader Manager (IDM) Crack 6.42 Build 42 Updates Latest 2025
wealthsignaloriginal-com-DS-text-... (1).pdf
Agentic AI : A Practical Guide. Undersating, Implementing and Scaling Autono...
Which alternative to Crystal Reports is best for small or large businesses.pdf
Navsoft: AI-Powered Business Solutions & Custom Software Development
System and Network Administraation Chapter 3

Different Ways of Integrating React into Rails - Pros and Cons