Applications these days appear to become more specific and role-divided. However, we want to deploy frontend and backend as one unit so Mikhail Bortnyk is going to research and to tell how modern JS frameworks are integrating into Rails, with pros, cons, blackjack, and dancers. Prepared for Ruby Meditation #16.

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

15. DHH dislikes SPAs

16. DHH dislikes SPAs
https://www.reddit.com/r/ruby/comments/341dyk/
why_does_dhh_dislike_spas_so_much/

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!