Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Different ways of integrating React into Rails - Mikhail Bortnyk

575 visualizaciones

Publicado el

Ruby Meditation #16 Odessa
IQSpace
15.07.2017

Publicado en: Tecnología
  • 7 Second Daily Ritual Melts Stubborn Fat While You Sleep ☺☺☺ https://bit.ly/2XYSZo6
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • 7 Second Daily Ritual Melts Stubborn Fat While You Sleep ●●● https://bit.ly/3fJGS4i
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Leptitox Upto 70% Off | Free Colon Cleanse?? | Insane Discount?. 100% Money Back Guarantee. Safe & Secure. $39 Only + Free Colon Cleanse?. You can not miss this discount. ▲▲▲ https://url.cn/5yLnA6L
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • ODD "WATER HACK" CRUSHES FOOD CRAVINGS and MELTS Fat ➤➤ http://t.cn/AirVsfPx
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Order Manifestation Magic Today For Up To 96% Off The Retail Price. Offer Expires Soon. Over 100,000 Satisfied Customers. Join Today And See For Yourself ◆◆◆ http://scamcb.com/manifmagic/pdf
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Sé el primero en recomendar esto

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!

×