Why we chose Vue.js

I had a great conversation with an interviewee a few weeks ago about how one

should go about choosing a JavaScript framework.

He pointed out that when a major software company releases their secret sauce,

there is going to be hype. Devs think to themselves, "That company writes JS

differently than me, and they are prominent and successful. Is their way of

writing JS better than mine? And therefore must I adopt it?"

Their secret sauce may be awesome, but don't assume awesomeness just because everyone else gets excited. You wouldn't copy and paste an answer from StackOverflow, without understanding it, so why copy and paste an entire framework?

Which brings me to our decision to use Vue.js at GitLab.

Simplicity and ease of use

Primarily what drew us to Vue.js is that it allows our team to easily write simple

JavaScript. Getting started with Vue.js is extremely easy. Its source code is

very readable, and the documentation is the only tutorial you'll ever need. You

don't need external libraries. You can use it with or without jQuery. You won't

need to install any plugins, though many are available. I like vanilla Vue.js

personally, although I can reach for vue-resource when I need it. Hooking Vue.js

up to existing code is very straightforward. There's no magic to Vue.js -- it's Objects

all the way down.

I talk to a lot of JavaScript devs and I find it really interesting that the ones who

spend the most time in Angular tend to not know JavaScript nearly as well. I don't want

that to be me or our devs. Why should we write "not JavaScript?"

I remember back when I was using Backbone, I had to really force myself to stay

DRY, because it's really a blank canvas. Vue.js does not make large assumptions

about much of anything either. It really only assumes that your data will change.

But Vue.js comes with the perfect balance of what it will do for you and what you

need to do yourself. If Backbone was anarchy (no one in charge) and Angular is a

dictatorship (the Angular team is in charge), I'd say Vue.js is like socialism: you

are definitely in charge, but Vue.js is always within reach, a sturdy, but

flexible safety net ready to help you keep your programming efficient and your

DOM-inflicted suffering to a minimum.

To give you an idea of what I mean, here's a simple

Codepen:

<div id="journal">
  <input type="text" v-model="message">
  <div>{{message}}</div>
</div>

var journal = new Vue({
  el: '#journal',
  data: {
    message: 'Your first entry'
  }
});

If you've seen a few JavaScript libraries, it's not hard to understand everything in

this example without any documentation. And usually with other frameworks, this is

where the simplicity stops. You get nice, simple examples when you're "Getting

started", but in reality things get complicated as soon as you to try to get

your money's worth out of the framework. Not with Vue.js though -- real-life usage

seems to stay as simple as the docs.

And that is what we love about Vue.js: it's an elegant combination of structure

and simplicity. The data for the view goes in an object called data, but the

data can get there and look however you want. Any functions you'll write as

callbacks for events go into a methods object, but they can do or return whatever

you want. Vue.js just knows when things change and updates your views. And you write less code.

Vue.js + GitLab === Less code

So what problem does this solve for GitLab? When I joined, all the JavaScript was written

with JQuery. There is nothing wrong with that, except that it takes a lot

more code to solve every problem. We knew we could do better. Once we started with

Vue.js, we could immediately and consistently solve complex problems in much less time.

A simple, but practical example we're using in production: on a GitLab

Issue, the issue's state is displayed as either closed or open. That

simple value can change often and needs to be represented in several views.

With JQuery, we had about 30 or so lines of code to propagate those changes, and

those lines involved multiple classes and querying the DOM by hand.

In Vue.js, this now requires us to write one line of JavaScript. The only other code

we add is in the HTML, and that's just a few additional attributes.

What Evan You knows is that creating a kick ass framework isn't just about

writing great code. You need excellent documentation, a strong community helping each other

learn, a supporting cast of libraries and plugins to help users solve the hard problems,

and short feedback loops based on user feedback to keep the framework relevant. Vue.js is all

of that, plus great code. That's why we're using it. What about you?

Watch the Why We Chose Vue.js webcast