Why VueJS and not Angular?

A while back I developed a rather large web application using Angular (v1). This particular application dealt with lots of data which needed to be available offline in the case of intermittent LTE availability. To do this, the remote databases were saved in the browser’s LocalStorage and synchronized in both directions when internet was available. Because of this, Angular had lots of objects to watch. When mutations to these objects occurred, Angular would digest these objects (multiple times, depending on how many scopes were involved on that particular page), bringing the application to its knees momentarily. I decided I would give VueJS a shot to see if their component-based framework could give my application the performance boost it needed to remain responsive to the user.

As has been the case for a number of years now, there are a number of frontend MVC frameworks, all of which claim varying levels of ease-of-use, speed, and minimal footprint. Angular was the go-to framework for a long time (and still is for some), but lots of people and places are jumping ship to try to take advantage of the previously mentioned advantages of more modern frameworks. For me, aside from speed, I was looking for a much less opinionated framework, as I grew tired of ‘the Angular way’ and having to hunt for common libraries wrapped in it.

Here is an enlightening quote from the book The Majesty of VueJS

Vue.js has better performance and is much, much easier to optimize, because it doesn’t use dirty checking. Angular gets slow when there are a lot of watchers, because every time anything in the scope changes, all these watchers need to be re-evaluated again. Also, the digest cycle may have to run multiple times to “stabilize” if some watcher triggers another update. Angular users often have to resort to esoteric techniques to get around the digest cycle, and in some situations there’s simply no way to optimize a scope with a large amount of watchers. Vue.js doesn’t suffer from this at all because it uses a transparent dependencytracking observing system with async queueing – all changes trigger independently unless they have explicit dependency relationships. The only optimization hint you’ll ever need is the track-by param on v-for lists.

Starting our first project.

So, let’s get started. The VueJS team seems to like Webpack a good bunch, so hopefully you do too. If you aren’t familiar, check it out here.

# install vue-cli
$ npm install -g vue-cli
# create a new project using the "webpack" boilerplate
$ vue init webpack my-project
# install dependencies and go!
$ cd my-project
$ npm install
$ npm run dev

Now, we should be able to go to our browser and see our minimal VueJS app at localhost:8080. Neat. But boilerplate is boring, so let us explore making our own Vue component.

Let’s write some code.

First, replace the code in src/App.vue with this:

<!-- src/App.vue -->
<style scoped>
  .strike-through {
    text-decoration: line-through;
  }
  small {
    float: right;
    color: red;
  }
  .angry-text {
    color: red;
  }
  .happy-text {
    color: green;
  }
</style>

<template>
  <!-- Vue likes it when you provide a root div to wrap all of your stuff -->
  <div>
    <!-- Oh cool, Angular like handlebars! -->
    <h1>{{listTitle}}</h1>

    <!-- Neat, we can do ng-repeat-like things! -->
    <div v-for="album in albums">

      <!-- ng-class-like things too!? -->
      <span v-bind:class="{'strike-through': (doILikeDreRightNow && album.artist=='Dre')}">
        {{album.name}}
      </span>

      <!-- I get it... we can do ng-if-like stuff too... -->
      <small v-if="(doILikeDreRightNow && album.artist=='Dre')">
        <span class="angry-text">< I don't like this right now!</span>
      </small>

      <!-- WAIT A MINUTE, there was no ng-else! -->
      <small v-else>
        <span class="happy-text">< Like it.</span>
      </small>

    </div>
  </div>
</template>

<script>
export default {
  data: function(){
    return {
      listTitle: 'My Favorite Albums',
      doILikeDreRightNow: true,
      albums: [
        {
          name: '2001',
          artist: 'Dre'
        },
        {
          name: 'The Chronic',
          artist: 'Dre'
        },
        {
          name: 'Evil Empire',
          artist: 'RATM'
        },
        {
          name: 'The Battle of Los Angeles',
          artist: 'RATM'
        }
      ]
    }
  },
  ready:function(){
    setInterval(() => {
      this.doILikeDreRightNow = !this.doILikeDreRightNow;
    }, 1000)
  }
}
</script>

What is this code all about?

The webpage should automatically update with a simple page whose creator can’t seem to decide if he likes Dr. Dre. Let’s go over some of the neat things going on here.

<style scoped></style> 

Here we can write CSS that only applies to this component. This is pretty neat because you can reduce the number of unique class names. This way, we can override and subclass our CSS selectors without effecting any global or other component’s CSS.

<template></template>

This is the component’s DOM. Anything in here defines the look and structure of the component. Notice all of the neat Angular-like ‘Directives’ or ‘Conditional Renderers’. In my opinion, Angular got that very right. And Vue continues the wonderful legacy of it.

<script></script>

This is where the magic and business happens. We expose the module logic the same way you would in NodeJS modules. VueJS has a number of hooks that you can use to provide your component with data and listen for events.

In our simple example here, we told Vue to evaluate our data property, which returned a function, which returned an object. The returned object is actively and efficiently watched by Vue for changes, at which point the DOM will be updated. As of VueJS 2.0 the Virtual DOM is used, making updates that much faster.

Some events are fired by VueJS too, such as ready (alias of DOMContentLoaded), which lets us know that our DOM is loaded and ready to go.

Remember how Angular had to know about EVERYTHING YOU WERE DOING, in order for your variable mutations to make it to the DOM? Specifically I am talking about $timeout and $interval and the like. Well, VueJS isn’t that nosey. You can use most asynchronous features of JavaScript and Vue will see those mutations. I don’t know the magic inside, but it works! As you can see in our example above, we are using a regular old setInterval timer to toggle the doILikeDreRightNow variable. Every time that variable mutates, Vue picks it up and repaints the changes to the DOM. It is marvelous.

How does VueJS map to Angular?

Angular Land –> VueJS Land
ng-if –> v-if
ng-class –> v-bind:class
ng-repeat –> v-for
??? –> v-else
ng-show –> v-show
ng-href –> v-bind:href
ng-click –> v-on:click
ng-src –> v-bind:src

note: (‘v-bind:’ can be shorthanded with a simple ‘:’ )

What other sorts of Events does VueJS emit?

In our example, we only waited on the ready event that Vue emitted, but there are a number of other things you can listen for within the component’s lifecycle. This diagram here gives a little visual and explanation for the different stages that a component lives through, and the events triggered at each stage.

That’s the getting started guide, but in the future I will go over more of the capabilities that VueJS provides like methods, filters and computed properties. After that, look for some examples with VueRouter and Vuex.