Different ways of integrating React into Rails - Mikhail Bortnyk

transcript

React on RailsDifferent ways of integrating. Pros and Cons

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

• 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 SPAshttps://www.reddit.com/r/ruby/comments/341dyk/

why_does_dhh_dislike_spas_so_much/

We are not DHHand sometimes we need something more than Rails

How do we do frontend in Railsfrom some hands-on experience

Case 1. Boring (Standalone application)

Standalone frontend• Pros and Cons

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

• 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

• 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

• server-side rendering

• components generators

• UJS integration

• turbolinks integration

react-rails gem• Cons:

• 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

• 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:

• 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)

• 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

• SPA is highly integrated into Rails App source code

• Still needs some setup ceremonies

Showtime

Conclusions

Questions?

Thanks!

Different ways of integrating React into Rails - Mikhail Bortnyk

Technology