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!