5. About me
• name’s Mikhail Bortnyk
• team leader in Amoniac OU
• co-founder of kottans.org
6. About me
• name’s Mikhail Bortnyk
• team leader in Amoniac OU
• co-founder of kottans.org
• Ruby language researcher
7. About me
• name’s Mikhail Bortnyk
• team leader in Amoniac OU
• co-founder of kottans.org
• Ruby language researcher
• twitter: @mikhailbortnyk
8. About me
• name’s Mikhail Bortnyk
• team leader in Amoniac OU
• co-founder of kottans.org
• Ruby language researcher
• twitter: @mikhailbortnyk
• github: @vessi
11. Short history of SPA in Rails
• Started from UJS
• continued with Backbone.js (Marionette.js afterwards)
12. Short history of SPA in Rails
• Started from UJS
• continued with Backbone.js (Marionette.js afterwards)
• progressed to angular.js
13. 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)
14. 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
23. Standalone frontend
• Pros:
• full control on frontend development process
• use what you actually want
• no need to fight with assets pipeline
24. Standalone frontend
• Pros:
• full control on frontend development process
• use what you actually want
• no need to fight with assets pipeline
• SPA loads independently
27. Standalone frontend
• Cons:
• +1 AJAX request to load data
• you need to coordinate build and deployment
• dependencies hell management
28. Standalone frontend
• Cons:
• +1 AJAX request to load data
• you need to coordinate build and deployment
• dependencies hell management
• coordinate, coordinate, and coordinate again
29. 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!
47. react-rails gem
• Cons:
• fixed react.js version
• deep integration with assets pipeline
• no source maps
48. react-rails gem
• Cons:
• fixed react.js version
• deep integration with assets pipeline
• no source maps
• forget about “all-in-component” behavior
54. react_on_rails gem
• Pros:
• separate SPA folder
• a lot of helpers for react and redux
• templates for SPAs
• webpack as an app builder
55. 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
59. react_on_rails gem
• Cons:
• separate SPA folder
• dirty dances to get HMR working
• complicated documentation
• need to wait for upgrade dependencies
60. 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
65. webpacker gem
• Pros:
• easily managed components (via packs)
• works with Turbolinks
• supports hot loading out of box
66. webpacker gem
• Pros:
• easily managed components (via packs)
• works with Turbolinks
• supports hot loading out of box
• integrated into Rails starting from 5.1
67. 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
68. 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