In a world of emerging JavaScript, is Rails getting left behind? Are server-side MVC applications out and static single page applications in? In this talk I’ll describe how we’ve used webpack(er) and Vue to revitalize our JavaScript approach within an aging Rails application. You can have it both ways.

1. @jondavidjohn
https://jondavidjohn.com
Jonathan Ⓓ Johnson

2. DISCLAIMER
All code covered in this talk will be provided
as part of a working rails application in the
form of a GitHub repository
😅

3. Modern JavaScript
without giving up on Rails

4. Modern JavaScript
without giving up on Rails

6. What do many common
resources and tutorials assume?

8. • No constraints!
• A Single Page Application is a good fit!
• Your API is built and ready to consume!

9. 🥴

10. 🥴

11. 🥴

12. What was our reality?

14. • Many constraints!
• Established MVC server-side application
• Lots of valuable legacy JavaScript
• You do not have a fully featured API to work with (yet)

15. Where did CodeShip start?
( ~ 2 years ago )
• Standard mature Rails application
• Lots of JavaScript sprinkles
• But also CoffeeScript sprinkles
• Lot’s of direct DOM manipulation and jQuery
• Global everything (via Asset Pipeline)
• JavaScript was only exercised within acceptance tests

16. Where do we want to end up?
• Leverage the progress in the JavaScript ecosystem
• JavaScript components as upgraded partials
• Let Rails continue to be good at what Rails is good at
• Our Vue usage should reflect the Vue community
• Testability!

17. webpack(er)

18. Once your JavaScript files express their
dependencies explicitly using ESModules or
CommonJS, webpack can leverage that information
to build your assets in more intelligent ways

22. app/javascript
app/javascript/packs

23. app/javascript/packs/thing.js
public/packs/thing-abc123.js

24. // app/javascript/packs/thing.js
console.log('hello world')

25. // app/javascript/packs/thing.js
//= require capitalize
console.log(capitalize('hello world'))

26. yarn add capitalize

27. {
"name": "...",
"version": "...",
"dependencies": {
"capitalize": "^2.0.0"
}
}

28. // app/javascript/packs/thing.js
import capitalize from 'capitalize'
console.log(capitalize('hello world'))

30. We have assets, now what?

31. <%= javascript_include_tag :thing %>
Asset Pipeline
Webpacker
<%= javascript_pack_tag :thing %>

32. single page application

33. single page application

34. single page application
multi application page

36. Apps vs. Components?
(A distinction that has worked well for us)

37. Apps
• “Smart”
• Aware of their surroundings
• Handles AJAX
• Utilizes a vuex store if needed
• Composed of other components

38. Components
• Less Smart?
• Ignorant of the world around them
• Easily reused
• Presentation focused
• Track only local state

39. <!-- app/javascript/apps/hello-world.vue -->
<template>
<p>Hello World!</p>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>

40. <!—- Somewhere in an ERB template —->
<div id="hello-world"></div>

41. <!—- Somewhere in an ERB template —->
<div id="hello-world"></div>
// app/javascript/packs/hello-world.js
import Vue from 'vue'
import HelloWorld from '@/apps/hello-world'
const target = document.getElementById(‘hello-world')
const App = Vue.extend(HelloWorld)
const component = new App()
component.$mount(target)

42. <!—- Somewhere in an ERB template —->
<div id="hello-world"></div>
<!—- In your layout —->
<%= javascript_pack_tag :hello_world %>
// app/javascript/packs/hello-world.js
import Vue from 'vue'
import HelloWorld from '@/apps/hello-world'
const target = document.getElementById(‘hello-world')
const App = Vue.extend(HelloWorld)
const component = new App()
component.$mount(target)

43. Components as Upgraded Partials

44. <%= render 'hello-world', user: @user %>
<p>Hello <%= user.name %></p>

45. <%= vue_app 'hello-world', user: @user %>
<template>
<p>Hello {{ user.name }}!</p>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
user: Object
}
}
</script>

46. def vue_app(app)
app_name = app.to_s.dasherize
content_tag :div, nil, { 'vue-app': app_name }
end
<%= vue_app :hello_world %>
<div vue-app=“hello-world"></div>

47. def vue_app(app)
app_name = app.to_s.dasherize
content_tag :div, nil, { 'vue-app': app_name }
end

48. def add_javascript_pack(*packs)
@custom_packs ||= Set.new
@custom_packs += packs
end
def custom_packs
@custom_packs || []
end
def vue_app(app)
app_name = app.to_s.dasherize
content_tag :div, nil, { 'vue-app': app_name }
end

49. def add_javascript_pack(*packs)
@custom_packs ||= Set.new
@custom_packs += packs
end
def custom_packs
@custom_packs || []
end
def vue_app(app)
app_name = app.to_s.dasherize
add_javascript_pack(app_name)
content_tag :div, nil, { 'vue-app': app_name }
end

50. <body>
<%= yield %>
<% custom_packs.each do |pack| %>
<%= javascript_pack_tag pack %>
<% end %>
</body>

51. <body>
<%= yield %>
<% if custom_packs.empty? %>
<%= javascript_include_tag :application %>
<% end %>
<% custom_packs.each do |pack| %>
<%= javascript_pack_tag pack %>
<% end %>
</body>

52. Passing locals into our apps
(Vue calls these “props”)
<%= vue_app :hello_world, user: @user %>

53. def vue_app(app)
app_name = app.to_s.dasherize
add_javascript_pack(app_name)
content_tag :div, nil, { 'vue-app': app_name }
end

54. def vue_app(app, props = {})
app_name = app.to_s.dasherize
add_javascript_pack(app_name)
props = props.stringify_keys.map do |key, val|
["data-#{key.dasherize}", val.to_json]
end
content_tag :div, nil, Hash[props].merge({
'vue-app': app_name
})
end

55. // app/javascript/packs/hello-world.js
import Vue from 'vue'
import HelloWorld from '@/apps/hello-world'
const App = Vue.extend(HelloWorld)
const target = document.getElementById('hello-world')
const component = new App()
component.$mount(target)

56. // app/javascript/packs/hello-world.js
import Vue from 'vue'
import HelloWorld from '@/apps/hello-world'
const target = document.getElementById('hello-world')
const propsData = {}
Object.entries(target.dataset)
.forEach(([key, value]) => {
try {
propsData[key] = JSON.parse(value)
} catch (e) {
propsData[key] = value
}
})
const App = Vue.extend(HelloWorld)
const component = new App({ propsData })
component.$mount(target)

57. <!-- app/javascript/apps/hello-world.vue -->
<template>
<p>Hello World!</p>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>

58. <!-- app/javascript/apps/hello-world.vue -->
<template>
<p>Hello {{ user.name }}!</p>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
user: Object
}
}
</script>

59. Pass in your URLs
<%= vue_app :hello_world, users_url: users_url %>

60. Extracting our mounting logic

61. // app/javascript/lib/boot.js
import Vue from 'vue'
export default function (name, app) {
}

62. // app/javascript/lib/boot.js
import Vue from 'vue'
export default function (name, app) {
const nodes = document.querySelectorAll(`[vue-app=${name}]`)
if (!nodes.length) return
const App = Vue.extend(app)
return Array.prototype.map.call(nodes, (node) => {
const propsData = {}
Object.entries(node.dataset).forEach(([key, value]) => {
try {
propsData[key] = JSON.parse(value)
} catch (e) {
propsData[key] = value
}
})
return new App({ propsData }).$mount(node)
})
}

63. import boot from '@/lib/boot'
import HelloWorld from '@/apps/hello-world'
boot(‘hello-world', HelloWorld)

64. Testing
yarn add —-dev jest
yarn add —-dev @vue/test-utils

65. app/javascript/apps/hello-world.vue
spec/javascript/apps/hello-world.spec.js

66. Generators!

67. rails generate vue_app hello_world
create app/javascript/packs/hello-world.js
create app/javascript/apps/hello-world/index.vue
create spec/javascript/apps/hello-world/index.spec.js
Generators!

68. // app/javascript/packs/hello-world.js
import boot from '@/lib/boot'
import HelloWorld from '@/apps/hello-world'
boot('hello-world', HelloWorld)

69. <!-- app/javascript/apps/hello-world/index.vue -->
<template>
<p>Hello World!</p>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>

70. // spec/javascript/apps/hello-world.spec.js
import { mount } from '@vue/test-utils'
import HelloWorld from '@/apps/hello-world'
describe(‘HelloWorld', () => {
it('should render', () => {
const app = mount(HelloWorld)
expect(app).toMatchSnapshot()
})
})

72. rails generate vue_app hello_world

73. rails generate vue_app hello_world
<%= vue_app :hello_world, user: @user %>

74. rails generate vue_app hello_world
<%= vue_app :hello_world, user: @user %>
<template>
<p>Hello {{ user.name }}!</p>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
user: Object
}
}
</script>

76. @jondavidjohn https://jondavidjohn.com
bit.ly/rails-vue-example