Home / Graphic Design / Consider VueJS for Your Next Web Project

Consider VueJS for Your Next Web Project

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.

What Is VueJS?

To get a rough idea of what Vue (pronounced “view”) does, think about it as the ‘V’ in an MV* pattern. If you’d like to compare it to something else, it’s probably closest to React but with a far lower barrier of entry. No need to learn something like JSX or pre-compile files just to give it a try. Drop it into your HTMLs header like any JS library, and you’re all set. Templating will probably look familiar to anyone who has worked with Angular or Mustache in the past.

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">
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.

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?

About Yesaya R. Athuman

Colleagues know me as a highly Creative Software Developer who can always be trusted to come up with the new approach. But I know that client's business come first, and I never try to impose my ideas on others. Instead, I spend a lot of time understanding business and the audience before suggesting ideas. I can (and often do) work well alone, but I'm at my best collaborating with others.

Check Also

How to Create Logo in Illustrator and using Custom Brushes

How to Create Logo in Illustrator and using Custom Brushes

In this tutorial we are going the Logo in Adobe Illustrator and playing around the …