Different Ways of Integrating React into Rails - Pros and Cons
1 like236 views
The document discusses different methods for integrating React with Rails, outlining the pros and cons of each approach. It covers standalone applications, in-rails JavaScript, the react-rails gem, the react_on_rails gem, and the webpacker gem, providing insights into their respective benefits and drawbacks. Ultimately, it highlights the evolution of single-page applications in the Rails ecosystem and the complexities involved in frontend development.
Different Ways of Integrating React into Rails - Pros and Cons
- 1. React on Rails Different ways of integrating. Pros and Cons
- 3. About me • name’s Mikhail Bortnyk
- 4. About me • name’s Mikhail Bortnyk • team leader in Amoniac OU
- 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
- 9. Short history of SPA in Rails
- 10. Short history of SPA in Rails • Started from UJS
- 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
- 17. We are not DHH and sometimes we need something more than Rails
- 18. How do we do frontend in Rails from some hands-on experience
- 19. Case 1. Boring (Standalone application)
- 20. Standalone frontend • Pros and Cons
- 21. Standalone frontend • Pros: • full control on frontend development process
- 22. Standalone frontend • Pros: • full control on frontend development process • use what you actually want
- 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
- 25. Standalone frontend • Cons: • +1 AJAX request to load data
- 26. Standalone frontend • Cons: • +1 AJAX request to load data • you need to coordinate build and deployment
- 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!
- 30. Case 1.5. Creepy as hell (In-Rails JS)
- 31. In-Rails JS • Pros and Cons
- 32. In-Rails JS • Pros: • Almost nothing
- 33. In-Rails JS • Pros: • Almost nothing • Deployed at the same time
- 34. In-Rails JS • Cons: • Hardly maintainable
- 35. In-Rails JS • Cons: • Hardly maintainable • supports only in-browser JSX
- 36. In-Rails JS • Cons: • Hardly maintainable • supports only in-browser JSX • dependencies hell
- 37. In-Rails JS • Cons: • Hardly maintainable • supports only in-browser JSX • dependencies hell • suits only for very simple SPAs
- 38. Case 2. Outdated (react-rails gem)
- 39. react-rails gem • Pros and Cons
- 40. react-rails gem • Pros: • fixed react.js version
- 41. react-rails gem • Pros: • fixed react.js version • server-side rendering
- 42. react-rails gem • Pros: • fixed react.js version • server-side rendering • components generators
- 43. react-rails gem • Pros: • fixed react.js version • server-side rendering • components generators • UJS integration
- 44. react-rails gem • Pros: • fixed react.js version • server-side rendering • components generators • UJS integration • turbolinks integration
- 45. react-rails gem • Cons: • fixed react.js version
- 46. react-rails gem • Cons: • fixed react.js version • deep integration with assets pipeline
- 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
- 49. Case 3. Current (react_on_rails gem)
- 50. react_on_rails gem • Pros and Cons
- 51. react_on_rails gem • Pros: • separate SPA folder
- 52. react_on_rails gem • Pros: • separate SPA folder • a lot of helpers for react and redux
- 53. react_on_rails gem • Pros: • separate SPA folder • a lot of helpers for react and redux • templates for SPAs
- 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
- 56. react_on_rails gem • Cons: • separate SPA folder
- 57. react_on_rails gem • Cons: • separate SPA folder • dirty dances to get HMR working
- 58. react_on_rails gem • Cons: • separate SPA folder • dirty dances to get HMR working • complicated documentation
- 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
- 61. Case 4. Probably future (webpacker gem)
- 62. webpacker gem • Pros and Cons
- 63. webpacker gem • Pros: • easily managed components (via packs)
- 64. webpacker gem • Pros: • easily managed components (via packs) • works with Turbolinks
- 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
- 69. webpacker gem • Cons: • No server-side rendering
- 70. webpacker gem • Cons: • No server-side rendering • SPA is highly integrated into Rails App source code
- 71. webpacker gem • Cons: • No server-side rendering • SPA is highly integrated into Rails App source code • Still needs some setup ceremonies
- 73. Showtime
- 74. Conclusions
- 75. Questions?
- 76. Thanks!