Modern JavaScript, without giving up on Rails

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

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

Modern JavaScript
without giving up on Rails

What do many common
resources and tutorials assume?

• No constraints!

• A Single Page Application is a good ﬁt!

• Your API is built and ready to consume!

• Many constraints!

• Established MVC server-side application

• Lots of valuable legacy JavaScript

• You do not have a fully featured API to work with (yet)

Where did CodeShip start?
( ~ 2 years ago )
• Standard mature Rails application

• Lots of JavaScript sprinkles

• But also CoﬀeeScript sprinkles

• Lot’s of direct DOM manipulation and jQuery

• Global everything (via Asset Pipeline)

• JavaScript was only exercised within acceptance tests

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 reﬂect the Vue community

• Testability!

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

app/javascript
app/javascript/packs

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

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

//= require capitalize
console.log(capitalize('hello world'))

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

import capitalize from 'capitalize'
console.log(capitalize('hello world'))

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

single page application
multi application page

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

Apps
• “Smart”

• Aware of their surroundings

• Handles AJAX

• Utilizes a vuex store if needed

• Composed of other components

Components
• Less Smart?

• Ignorant of the world around them

• Easily reused

• Presentation focused

• Track only local state

<template>
<p>Hello World!</p>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>

<!—- 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)

<!—- In your layout —->
<%= javascript_pack_tag :hello_world %>
const target = document.getElementById(‘hello-world')

Components as Upgraded Partials

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

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

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>

def vue_app(app)
end

def add_javascript_pack(*packs)
@custom_packs ||= Set.new
@custom_packs += packs
end
def custom_packs
@custom_packs || []
end
def vue_app(app)
end

def add_javascript_pack(*packs)
@custom_packs ||= Set.new
@custom_packs += packs
end
def custom_packs
@custom_packs || []
end
def vue_app(app)
add_javascript_pack(app_name)
end

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

def vue_app(app)
end

def vue_app(app, props = {})
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

const target = document.getElementById('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 component = new App({ propsData })

<template>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
user: Object
}
}
</script>

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

// app/javascript/lib/boot.js
export default function (name, app) {
}

// app/javascript/lib/boot.js
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)
})
}

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

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

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

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!

import boot from '@/lib/boot'
boot('hello-world', HelloWorld)

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

<template>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
user: Object
}
}
</script>

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

Modern JavaScript, without giving up on Rails

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

Similar to Modern JavaScript, without giving up on Rails

Similar to Modern JavaScript, without giving up on Rails (20)

Recently uploaded

Recently uploaded (20)

Modern JavaScript, without giving up on Rails