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 ďŹght with assets pipeline
24. Standalone frontend
⢠Pros:
⢠full control on frontend development process
⢠use what you actually want
⢠no need to ďŹght 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!
48. react-rails gem
⢠Cons:
⢠ďŹxed 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
⢠conďŹg lives altogether with your app conďŹg