Who am I?
Introducing Vue into your app and team
Vue, you say...?
Step #1: Convince
How to win friends and influence developers
1. Don't shame - empathize
2. Show something shiny
Attracting users writing single-page applications
Vue can too!
- Components
- JSX
- Fast
- Flexible architecture
- Testable components
React
Angular
- Components
- First-class TypeScript support
- Full offering - officially supported router and state management, among others
Emphasize fun & easy
(Probably) don't encourage rewrites!
How to try out Vue in existing SPAs
export default class VuePage extends React.Component {
constructor (props) {
super(props)
this.vm = new Vue({ /* ... */ })
}
componentDidMount () {
this.vm.$mount('#vue-app')
}
componentWillUnmount () {
this.vm.$destroy()
}
render () {
return <div id='vue-app'></div>
}
}Concerns
Size
Performance
State
Pros
Simple
Attracting mostly backend/jQuery users
Acknowledge fatigue
The simplest backend integration
<user-list :users="<%- users.toJSON() %>"></user-list><user-list :users="<%- users.toJSON() %>"></user-list> <!-- Vue -->
<% if (Application.env === 'development') { %>
<script src="https://unpkg.com/vue"></script>
<% } else { %>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<% } %>
</head>
<body>
<!-- Mount point -->
<div id="app">
<%- yield %>
</div>
<!-- App -->
<script>
new Vue({
el: '#app',
// Universal server-data
data: {
csrfToken: '<%- Application.csrfToken %>'
}
})
</script>Setup in layout
Components
<user-list :users="<%- users.toJSON() %>"></user-list>Views
Vue.component('user-list', {
// ...
})
Vue.component('flash-message', {
// ...
})Pros
Simple
Incremental
SEO
Standardization
Cons
Multiline strings
template: '\
<li>\
{{ todo.text }}\
</li>\
'template: `
<li>
{{ todo.text }}
</li>
`The next upgrade: single-file components
Implementations
Pros
Advanced JS features
Integration of concerns
Module system
Cons
Requires more knowledge
Single-page application
(SPA)
Separate frontend
Implementation options
vue-cli
nuxt/starter
webpack
pwa
+ simple
+ opinionated
+ SSR
+ control
+ tests
+ control
+ tests
+ progressive
Pros
Lighter (runtime-only build)
Advanced workflow
Readied for mobile app
Trade-offs
- Initial page speed
+ Next page speed
- Server resources
+ Client resources
Cons
Complex
Complex
Start with Nuxt
When do I need... ?
Vue Router
Vuex
Server-side rendering (SSR)
GraphQL
Real-time connections
...
Resources
1. Docs (vuejs.org/guide)
and soon...
2. Style Guide
3. ESLint Plugin
Questions?
@chrisvfritz
VueConf 2017/06
By Chris Fritz
