Oct 20, 2016 - Jacob Schatz  

Why We Chose Vue.js

Why GitLab went with 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

For the latest and most detailed news follow @gitlab on Twitter. Future blog posts suggestions RSS

Install GitLab in 2 minutes

With Ubuntu, Debian, CentOS and Raspbian packages or from source

Install GitLab Now

Try GitLab Enterprise Edition risk-free for 30 days.

No credit card required. Have questions? Contact us.