Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Different ways of integrating React into Rails - Mikhail Bortnyk

318 views

Published on

Ruby Meditation #16 Odessa
IQSpace
15.07.2017

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Different ways of integrating React into Rails - Mikhail Bortnyk

  1. 1. React on Rails Different ways of integrating. Pros and Cons
  2. 2. About me • name’s Mikhail Bortnyk
  3. 3. About me • name’s Mikhail Bortnyk • team leader in Amoniac OU
  4. 4. About me • name’s Mikhail Bortnyk • team leader in Amoniac OU • co-founder of kottans.org
  5. 5. About me • name’s Mikhail Bortnyk • team leader in Amoniac OU • co-founder of kottans.org • Ruby language researcher
  6. 6. About me • name’s Mikhail Bortnyk • team leader in Amoniac OU • co-founder of kottans.org • Ruby language researcher • twitter: @mikhailbortnyk
  7. 7. About me • name’s Mikhail Bortnyk • team leader in Amoniac OU • co-founder of kottans.org • Ruby language researcher • twitter: @mikhailbortnyk • github: @vessi
  8. 8. Short history of SPA in Rails
  9. 9. Short history of SPA in Rails • Started from UJS
  10. 10. Short history of SPA in Rails • Started from UJS • continued with Backbone.js (Marionette.js afterwards)
  11. 11. Short history of SPA in Rails • Started from UJS • continued with Backbone.js (Marionette.js afterwards) • progressed to angular.js
  12. 12. 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)
  13. 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) • webpack becomes part of Rails via webpacker gem
  14. 14. DHH dislikes SPAs
  15. 15. DHH dislikes SPAs https://www.reddit.com/r/ruby/comments/341dyk/ why_does_dhh_dislike_spas_so_much/
  16. 16. We are not DHH and sometimes we need something more than Rails
  17. 17. How do we do frontend in Rails from some hands-on experience
  18. 18. Case 1. Boring (Standalone application)
  19. 19. Standalone frontend • Pros and Cons
  20. 20. Standalone frontend • Pros: • full control on frontend development process
  21. 21. Standalone frontend • Pros: • full control on frontend development process • use what you actually want
  22. 22. Standalone frontend • Pros: • full control on frontend development process • use what you actually want • no need to fight with assets pipeline
  23. 23. Standalone frontend • Pros: • full control on frontend development process • use what you actually want • no need to fight with assets pipeline • SPA loads independently
  24. 24. Standalone frontend • Cons: • +1 AJAX request to load data
  25. 25. Standalone frontend • Cons: • +1 AJAX request to load data • you need to coordinate build and deployment
  26. 26. Standalone frontend • Cons: • +1 AJAX request to load data • you need to coordinate build and deployment • dependencies hell management
  27. 27. Standalone frontend • Cons: • +1 AJAX request to load data • you need to coordinate build and deployment • dependencies hell management • coordinate, coordinate, and coordinate again
  28. 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 • and don’t forget about API versioning!
  29. 29. Case 1.5. Creepy as hell (In-Rails JS)
  30. 30. In-Rails JS • Pros and Cons
  31. 31. In-Rails JS • Pros: • Almost nothing
  32. 32. In-Rails JS • Pros: • Almost nothing • Deployed at the same time
  33. 33. In-Rails JS • Cons: • Hardly maintainable
  34. 34. In-Rails JS • Cons: • Hardly maintainable • supports only in-browser JSX
  35. 35. In-Rails JS • Cons: • Hardly maintainable • supports only in-browser JSX • dependencies hell
  36. 36. In-Rails JS • Cons: • Hardly maintainable • supports only in-browser JSX • dependencies hell • suits only for very simple SPAs
  37. 37. Case 2. Outdated (react-rails gem)
  38. 38. react-rails gem • Pros and Cons
  39. 39. react-rails gem • Pros: • fixed react.js version
  40. 40. react-rails gem • Pros: • fixed react.js version • server-side rendering
  41. 41. react-rails gem • Pros: • fixed react.js version • server-side rendering • components generators
  42. 42. react-rails gem • Pros: • fixed react.js version • server-side rendering • components generators • UJS integration
  43. 43. react-rails gem • Pros: • fixed react.js version • server-side rendering • components generators • UJS integration • turbolinks integration
  44. 44. react-rails gem • Cons: • fixed react.js version
  45. 45. react-rails gem • Cons: • fixed react.js version • deep integration with assets pipeline
  46. 46. react-rails gem • Cons: • fixed react.js version • deep integration with assets pipeline • no source maps
  47. 47. react-rails gem • Cons: • fixed react.js version • deep integration with assets pipeline • no source maps • forget about “all-in-component” behavior
  48. 48. Case 3. Current (react_on_rails gem)
  49. 49. react_on_rails gem • Pros and Cons
  50. 50. react_on_rails gem • Pros: • separate SPA folder
  51. 51. react_on_rails gem • Pros: • separate SPA folder • a lot of helpers for react and redux
  52. 52. react_on_rails gem • Pros: • separate SPA folder • a lot of helpers for react and redux • templates for SPAs
  53. 53. react_on_rails gem • Pros: • separate SPA folder • a lot of helpers for react and redux • templates for SPAs • webpack as an app builder
  54. 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 • yarn as a package manager
  55. 55. react_on_rails gem • Cons: • separate SPA folder
  56. 56. react_on_rails gem • Cons: • separate SPA folder • dirty dances to get HMR working
  57. 57. react_on_rails gem • Cons: • separate SPA folder • dirty dances to get HMR working • complicated documentation
  58. 58. react_on_rails gem • Cons: • separate SPA folder • dirty dances to get HMR working • complicated documentation • need to wait for upgrade dependencies
  59. 59. 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
  60. 60. Case 4. Probably future (webpacker gem)
  61. 61. webpacker gem • Pros and Cons
  62. 62. webpacker gem • Pros: • easily managed components (via packs)
  63. 63. webpacker gem • Pros: • easily managed components (via packs) • works with Turbolinks
  64. 64. webpacker gem • Pros: • easily managed components (via packs) • works with Turbolinks • supports hot loading out of box
  65. 65. webpacker gem • Pros: • easily managed components (via packs) • works with Turbolinks • supports hot loading out of box • integrated into Rails starting from 5.1
  66. 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 • package.json lives in the same folder
  67. 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 • config lives altogether with your app config
  68. 68. webpacker gem • Cons: • No server-side rendering
  69. 69. webpacker gem • Cons: • No server-side rendering • SPA is highly integrated into Rails App source code
  70. 70. webpacker gem • Cons: • No server-side rendering • SPA is highly integrated into Rails App source code • Still needs some setup ceremonies
  71. 71. Showtime
  72. 72. Conclusions
  73. 73. Questions?
  74. 74. Thanks!

×