Embed Size (px)
Citation preview
React on RailsDifferent ways of integrating. 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 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
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
Showtime
Conclusions
Questions?
Thanks!
