Vue or not Vue?

Vue or not Vue?

Grzegorz Koronowski 4 July 2017

For many months, I’m observing some community dispute about which most known and used framework is better than others.

Would it be Angular instead of React, or the opposite? Is Angular always a better option to choose, regarding building large, single-page applications? Is React always faster and lighter than the other frameworks, because it is based on Virtual Dom conception?

Not really. We, the FinAi team, came across many pros and cons, to decide what tool should we use in our frontend architectures and we decided that it will be Vue.js.

 

What was the requirements?

The decision about tool we wanted to use was a crucial one. It is common knowledge that the good choices once made will profit in future – and the bad will generate a cost, and not just in story points but first of all, in real money. That’s why we didn’t want to make an automatic response for question: “What tool will be the best?”. Allright then, but in the end, what were the criteria about development we had to consider?

  1. Speed of light – We must provide a blazing fast speed of our application running in web browser.
  2. Easy to develop – The code has to be very easy to develop and maintenance – technology low entry level must be provided
  3. No mysteries – We wanted to eliminate all possible “mystery” hooks like for instance unpredictable digest cycles.
  4. Component based – we have to build our product within a tiny, well spreaded out and separated components, with easily inheritance

 

What is Vue.js?

Vue.js is a framework to build user interfaces and frontend of your single-page applications. It relays strongly on view layer only and it is very easy to use, maintain, develop and integrate with other libraries.

Also, Vue is combining the best parts from Angular and React, and only the best of them. It is basing on pure JS syntax, with key-value config objects. Component based structure which you can extremely easily reuse, reconfig and inherit.

It is said that Vue.js combines all of the best parts from Angular and React, so, if you have ever heard about Angular, you will meet with pleasure syntaxes like:

v-if, v-else, v-show, v-for

And many callbacks like:

v-on:click="counter++"

Or:

v-on:keyup.enter="submit"

If you like inline expressions from Angular, you will like them also in Vue.js:

<div>{{ message | filter('arg1', arg2) }}</div>

Knowing the world of React, you can expect a props mechanism, component base architecture, and virtual DOM engine. Vue provides also a lot of features you may already know, like templates, filters, directives, data-binding, or events. Nice and convenient feature is vue file extension and syntax under the hood. That’s really awesome. From now on, you can put all together into one file, a template, a JS code, and scoped styles definitions, like this:

<template>
  <div>
    <h2>A content!</h2>
  </div>
</template>

<script>
import Vue from 'vue';
import Component from 'vue-class-component'

@Component({
  props:{}
})

export default class AppPage extends Vue {
  constructor() {
    super();
  }
}
</script>

<style>
h2 {
  color:#fff2bb;
}
</style>

Another very usefull thing of Vue js are lifecycle hooks. There are several hooks you can bind to and make some operations like for instance speed measurement or data retrieving. Those are:

beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, activated, deactivated, beforeDestroy, destroyed

 

What about the speed? 

Vue performance is really impressive, and it leads in almost all of ui transition operations. Take a look on this short comparition (time in ms):

   Angular 1.5 Angular 2.0   React 15.3.1 Vue 2.0.0 
create rows
(duration for creating 1000 rows
after the page loaded)
 270  198 187  171
swap rows
(time to swap to rows on a 1k table -
with 5 warmup iterations)
 50  50  48  19
create many rows
(duration to create 10000 rows)
 2414  1914  2229  1712
clear rows
(duration to clear the table
filled with 10000 rows)
 628  281  371  223

Source: http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html.

 

What I personally like?

  1. It is flexible as hell – I can do stuff whatever way I want, keeping our best practices, I don’t have to anything – I can everything.
  2. It’s strongly low-level – like the pure vanilla js – I’m basing only on ES6 syntax.
  3. Vue file structure – all necessary stuff included in one place. The template, the styles and the JS code!
  4. You can use TypeScript but you don’t have to – it is up to you!
Location icon Facebook icon Twitter icon Google+ icon LinkedIn icon Technology icon Business icon Marketing icon Phone icon Mail icon User icon Tag icon Bubble icon Arrow right icon Arrow left icon Calendar PR Contact