Déjà Vue
Vue.js - The MVVM library you didn't know you already knew…
SwissJS 2015 Lighting Talk – Raphaël Saunier (@RaphaelSaunier)
The Problem
Most of you are already familiar with one or more of the following frameworks:
Sometimes the impact on the complexity and size of the code isn’t justifiable
Large libraries are not always adequate for:
- Legacy projects
- Prototypes, hackathons
- Server-heavy applications
- Designers
So what do we do?
$.problem() ?
There's a better way!
vuejs.org
“[…] Vue.js core intends to stay as a no-frills, drop-in view layer library, and that will not change”
For 70KB* you get:
- An API to define reusable Components
- Data-binding & computed properties with transparent dependency tracking
- Events, with some niceties (filtering, debouncing)
- Filters
- Transitions
All of this with a familiar syntax, a comprehensive documentation, friendly error messages and
great performance!
* Minified (~22KB gzipped)
- vue-element (allows you to register real Custom Elements)
- vue-resource (interact with REST APIs)
- vuex (Flux implementation)
- vue-router
- vue-touch (Hammer.js wrapper)
- vue-loader for WebPack
- ES7/TypeScript decorators
…and there's more!
Show us some code!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<script src="vue.js">
</script>
</head>
<body>
<div id="selector">
<h1>{{message}}</h1>
</div>
</body>
</html>
// Define a plain JSON
// object to hold the data
var data = {
message: "Hello"
};
// Instantiate Vue on an element
new Vue({
el: "#selector",
data: data
})
// Works since getters/setters
// are now proxied
data.message = "Hi";This looks familiar…
<div id="selector">
<input type="text"
v-model="name">
<h1 v-if="name">
{{message | uppercase}}
</h1>
</div>new Vue({
el: "#selector",
data: {
name: ""
},
computed: {
message: function(){
return "Hello, " + name + "!";
}
}
});Ah nice, it supports models, filters, conditionals, …
<div id="selector">
<input type="text" ng-model="name">
<h1 ng-if="name">
<%= message %>
</h1>
</div>// I'd like delimiters that are more difficult to type
Vue.config.delimiters: ['<%=', '%>'];
// I'd like to have the performance of Backbone Views
Vue.config.async = false
// I'd like to pretend it's Angular
Vue.config.prefix = "ng-";
var Controller = Vue.extend({
$scope: this.data // (…don't do that, it's silly)
});
Configure all the things!
<ul id="selector">
<li v-repeat="person: people"
v-on="click: greet">
{{person.name}}
</li>
</ul>var rofl = new Vue({
el: "#selector",
data: {
people: [{
name: "Bruno",
job: "Kameramann"
} /* ... */]
},
methods: {
greet: function(person){
alert(`Ich bin ${person.name},
ich bin der ${person.job}!`);
}
}
});All the dirty things you used to be able to do in Angular are now just a bit nicer…
Visit vuejs.org/examples for more examples
Learning Resources
Guide
API
“The Vast World of Vue.js”
(Free Tutorial by Jeffrey Way)
laracasts.com/series/learning-vuejs
Should you go all in on Vue.js?
Probably not.
Should you use Vue.js to replace
jQuery or Backbone Views?
Probably!
vue + vue-router > jquery + backbone + underscore + rivets + marionette
JS libraries come and go, and therefore it makes
sense to invest one's time wisely.
With Vue you‘ll:
- grok the basics in a few minutes,
- become productive within an hour
- remember most of its API in a day.
Thank you!
Déjà Vue(.js)
By Raphael Saunier
