Why Vue.js?
Finding a javascript framework that just worked
Brian Wells
@brianjwells
Who am I?
● Senior Lab Software Developer at Riverbed
● Recently moved to Nashville area in May
● Currently use Vue.js in production
● Working remotely
Angular, Ember, React, etc
https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4
Lessons I’ve Learned
Lessons I’ve Learned
● You’ll embrace a framework once it solves a problem you have
● There will always be a popular new framework
● Choose one that is stable and master it
● Don’t be afraid to tinker first
● Never stop learning
The progressive framework
The progressive framework
“ Use a progressive framework composed of incrementally adoptable libraries
@vuejs
https://twitter.com/vuejs/status/753636851504799744
The progressive framework
1. The Core Vue.js Framework
2. Components
3. HTTP Resources
4. Client-Side Routing
5. State management
The progressive framework
“ We can scale up the framework’s complexity incrementally, only when the
project’s inherent complexity demands it.
Evan You, Creator of Vue.js
http://blog.evanyou.me/2015/12/20/vuejs-2015-in-review/
Let’s Get Started
The Core Vue.js Framework
● Reactive data binding User Input
● View layer only
● Automatic
○ // AngularJS
View State
$scope.$apply()
Render
// Ember.js
Ember.Object.create()
View is just a State should be the
// React declarative mapping single source of truth
this.shouldComponentUpdate() from the state
this.setState()
// Knockout
ko.observable()
The Core Vue.js Framework
Vue Instance
Event Listeners
View State
Directives (1.x)
Virtual DOM (2.0)
DOM Plain JavaScript
Objects
Vue
The Core Vue.js Framework
● Mustache syntax <div id="app">
<p>{{ message }}</p>
○ {{ text }} {{* once }} {{{ html }}}
<input v-model="message">
○ {{ ok ? 'YES' : 'NO' }} </div>
● Directives
○ v-model="message"
new Vue({
○ v-bind:href="message.url" el: '#app',
■ :href="message.url" data: {
message: 'Hello Vue.js!'
○ v-on:click="sendMessage"
}
■ @click="sendMessage" })
The Core Vue.js Framework <div id="app">
<button @click="b">Increment</button>
a={{ a }}
● Methods </div>
○ methods: { ... }
new Vue({
● Handle native DOM events el: '#app',
○ @click or v-on:click data: {
a: 1
● Automatic event listeners },
methods: {
○ // jQuery example
b: function (event) {
$('#button').on('click', // `this` points to the vm instance
function (event) { this.a = this.a + 1
}
...
}
}); })
The Core Vue.js Framework <div id="app">
a={{ a }} b={{ b }}
● Computed properties </div>
○ computed: { ... }
new Vue({
● Replaces binding expressions el: '#app',
data: {
○ {{ ok ? 'YES' : 'NO' }}
a: 1
● Computed setter },
computed: {
○ computed: { // a computed getter
b: { b: function () {
// `this` points to the vm instance
get: function () { ... },
return this.a + 1
set: function (newValue) { ... } }
} }
})
}
The Core Vue.js Framework
● Class and style bindings
○ :class or v-bind:class <div class="static" :class="{ 'class-a': isA }">
...
○ :style or v-bind:style
</div>
● Conditional rendering
○ v-if="hasMessages"
<h1 v-if="hasMessages">Yes</h1>
○ v-show="hasMessages" <h1 v-else>No</h1>
○ v-else
<h1 v-show="hasMessages">Yes</h1>
<h1 v-else>No</h1>
<div id="app">
The Core Vue.js Framework <ul>
<li v-for="todo in todos">
{{ todo.text }}
● JSON data format
</li>
○ var object = { ... } </ul>
</div>
● List rendering
○ v-for="todo in todos"
new Vue({
○ todos: [ {...}, {...}, {...} ]
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue.js' },
{ text: 'Build Something Awesome' }
]
}
})
Components
Components
Nav
Content Sidebar
● Small
Item
● Self-contained
● Often reusable
Components
<div id="app">
<app-nav></app-nav>
<app-content>
● Custom DOM elements <example></example>
</app-content>
○ <my-component></my-component>
</div>
● Replaced with template HTML
var Example = Vue.extend({
template: '<div>{{ message }}</div>'
data: function() {
return {
message: 'Hello Vue.js!'
}
}
})
// register it with the tag <example>
Vue.component('example', Example)
Components
● Single File Components
● Reusability
○ Props
○ Content Slots
○ Dynamic Components
HTTP Resources
HTTP with vue-resource
● HTTP requests/responses
// GET /api/movies
● RESTful API friendly this.$http.get('/api/movies')
● Async Promises .then((response) => {
// success callback
● Alternatives: }, (response) => {
○ SuperAgent // error callback
});
○ $.ajax
○ No-backend (i.e. Firebase)
Client-Side Routing
Routing with vue-router <a v-link="{ path: '/movies' }">Movies</a>
<a v-link="{ path: '/settings' }">Settings</a>
● Single page application (SPA) <router-view></router-view>
● Native application
var App = Vue.extend({})
var router = new VueRouter()
router.map({
'/movies': {
component: Movies
},
'/settings': {
component: Settings
}
})
router.start(App, '#app')
Routing with vue-router
App
/
Home
App
/movies/1
Movie with { id: 1 }
State management
State management with vuex
● Shared vs. scattered state
● One-way data flow
● Centralized store
● Alternatives:
○ Flux
○ Redux
Development Tools
Development Tools
● Documentation
○ vuejs.org/guide
● Scaffolding tool
○ vue-cli $ npm install -g vue-cli
$ vue init <template-name> <project-name>
● Laravel Elixir (aka Gulp) $ vue init webpack my-project
○ laravel-elixir-vue $ vue init browserify my-other-project
● Vue Devtools (Chrome)
○ Time traveling with vuex
● Hot Reloading
○ vue-loader
○ vueify
Development Tools - Vue Devtools
Development Tools - Hot Reloading
Vue.js 2.0
Vue.js 2.0
● 2 - 4x faster
● 12 - 17 kb min + gzip (vs. React 15 with 44kb min + gzip)
● Virtual DOM (still reactive)
● Streaming Server Side Rendering (SSR)
● JSX/Hyperscript rendering and/or HTML templates
https://rc.vuejs.org/
Vue.js In Practice
Project Idea
● AirPlay movies from server
● Simple clean interface
● JSON-API 1.0
● Laravel
● Vue.js
Live Demo
Additional Resources Get the slides: https://goo.gl/yxU0w7
Learn all the things! Why use Vue.js?
● vuejs.org ● It is very fast
● laravel.com ● People actually use it
● laracasts.com ● Comparison with React
● github.com/wells/airflix ● Backed by the community
Books
● You Don’t Know JS - Book Series
● JavaScript: The Good Parts
