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