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!


“[…] 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">
  <meta charset="UTF-8">
  <script src="vue.js">
  <div id="selector">
// 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"
  <h1 v-if="name">
    {{message | uppercase}}
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 %>
// 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">
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



“The Vast World of Vue.js”

(Free Tutorial  by Jeffrey Way)



Should you go all in on Vue.js?

Probably not.


Should you use Vue.js to replace

jQuery or Backbone Views?



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