Back to all posts

Comparing Angular vs Vue

Posted by Zsolt Nagy on March 17, 2019

Years ago, it seemed like everyone wanted to write his or her own framework. Besides Knockout, Backbone, Marionette, software developers thought they could earn bragging rights by reinventing the wheel and creating their own framework. The churn rate was very high, and developers had to learn a lot to keep up with the pace. Fortunately, the framework wars and the days of ultra high churn rates are over. Three participants carved out their own niche: React, Angular, and Vue. As Angular and Vue are similar in terms of syntax, in this article, we will compare and contrast Angular and Vue.

Although the syntax of the two frameworks is similar, the use cases for Angular and Vue are different. These use cases are well illustrated by the history of each framework.

Angular

Angular is a highly popular corporate solution. Banks, financial institutions, and backend developers normally favor Angular. Angular is backed by Google, and companies like WhatsApp, Instagram, PayPal, and many other established companies use it.

Some popular websites made using Angular:

Angular websites
Source: MadeWithAngular

undefinedVue was created by Evan You, an ex-Google employee. In fact, Evan worked on Angular at Google, which means he has an in-depth understanding of the ins and outs of Angular. The pitch of Vue is to build fast, progressive JavaScript applications quickly. Companies like Alibaba, GitLab, Grammarly trust Vue.js, and it seems these companies appreciate the benefits of Vue.

Angular is the default commercial solution for developing enterprise application clients. Angular is a bigger, more mature framework, and it generally takes more time to develop applications. Vue on the other hand is great for simple, performant applications, as well as for rapid prototyping.

 Some popular websites made using Vue:

Vue websites
Source: Techuz

Comparison by Numbers

undefinedCommunity size

Angular is definitely the more stable solution out of the two due to the backing of Google. As a result, Angular tends to evolve at a healthy pace. Angular has 313k followers on Twitter, compared to 128k followers of Vue. This is not a direct indication of how popular the technologies are, and neither is Google Trends. The problem with Google Trends is that it does not necessarily recognize searches containing Vue and Vue.js as the same topic. The Vue.js search term may just gives us a fraction of the search results, while the Vue search term may yield results that have nothing to do with Vue.js. Therefore, the comparison is not obvious. There are obviously more people searching for Angular, but Vue was never expected to compete with Angular.


To get somewhat of an idea of the recent usage of Angular and Vue, here are the total number of downloads in the last year by developers from NPM:

NPM comparison stats
Source: NPM

undefined  GitHub activity

The GitHub Activity of the two frameworks is really interesting. Vue has more stars and forks than Angular. At the time of writing this article, Vue has 18.2k forks and 130k stars, while Angular has only 11.8k forks and 45.3k stars. Vue has clearly become more popular among the masses. Angular only leads in terms of the number of contributions: 845 vs 260. This is expected though, as Angular has been around longer than Vue.

undefined

undefinedDeveloper Experience

According to the State of Js 2018 Survey, Vue.js does something right. Vue positions not only offer similar average salaries as Angular salaries, but the number of developers abandoning Vue.js after trying it out is a lot smaller than the number of Angular developers who want to abandon Angular. Currently, around the same number of experienced developers are willing to work with Vue and Angular, but Angular has been abandoned by a seriously large number of developers, possibly in favor of Vue and React. According to the survey, more people are interested in learning Vue than Angular.

Framework comparisons
Source: StateofJS

undefinedJob Market Trends

At the same time, the job market still favors Angular over Vue. Angular is losing ground in terms of job opportunities, while Vue is gaining traction. This recent article on jobfluent.com highlights this trend clearly. If we break the usage down per marketplace, we can see a recent snapshot in this medium article. Across most markets, Angular job opportunities are a lot more frequent than Vue job opportunities. As Angular is losing ground, it will be interesting to watch how the tendencies in 2019-20.

undefinedRuntime performance

I left the most interesting number to the end of this section: runtime performance metrics. Check out this benchmark for more details. Generally, both Angular and Vue are green, or at worst yellow, in most metrics. Only one metric stands out negatively for Angular: the non-keyed Script Bootup Time. Angular’s 227.6 vs Vue’s 56.9 clearly indicates the cost of including Angular in the code base. In applications, where space and memory are both limited, Vue is the natural choice. Based on generic data, startup and memory allocation are the weak spots of Angular, while it outperforms Vue at runtime metrics.

Similarities

Some parts of Vue.js remind programmers of working with Angular. Templating, model binding, loops, conditionals, and event binding work in a similar way for both frameworks. As there are more Angular developers than Vue developers, these similarities come in handy during migration. Some of the code examples below that demonstrate the similarities were partially inspired by this article. Let’s see these similarities one by one.

Templating. Technically, you can count on identical syntax. There are minor differences in the templating engine when it comes to evaluating objects, arrays, and json data.

Syntax in both Vue.js and Angular:

{{expression}}

Model binding. The syntax and the idea are very similar. Only the attribute names are different.

Angular:

<input ng-model="modelVariable">
<div ng-bind="modelVariable">...</div>

Vue:

<input v-model="modelVariable">
<div v-model="modelVariable">...</div>

Loops. The Vue syntax is clearly inspired by Angular. Differences are minimal. Notice that the Vue.js v-repeat syntax is simplified compared to the Angular syntax. As the {{name}} template may not make sense to you, I recommend reading the Displaying a List section of the vue official guide.

Angular:

<li ng-repeat="item in items">
    {{item.name}}
</li>

Vue:

<li v-repeat="items">
    {{name}}
</li>

Conditionals. Apart from the ng- and v- prefixes, the code is identical.

Angular:

<div ng-if="value"></div>
<div ng-show="value"></div>

Vue:

<div v-if="value"></div>
<div v-show="value"></div>

Event binding. In Angular, you have different event names such as ng-click, ng-mousedown, ng-mouseover etc. In Vue, there is one event binding attribute: v-on. The event name itself goes inside the string describing the binding.

Angular:

<a ng-click="callback($event)">text</a>

Vue:

<a v-on="click: callback($event)">text</a>

There are some other similarities that are evident in Angular and Vue. These similarities are not surprising, as the vue.js team kept what they thought was good in Angular.

Differences

When comparing Angular to Vue, your best source of documentation is a migration guide from one framework to the other. I recommend studying the syntax present in this Angular to Vue migration article.

With Angular, using TypeScript is mandatory. As not everyone likes TypeScript, this is a polarizing decision from the authors of Angular. Vue decided on not making TypeScript mandatory. The vue.js official site claims, “In many smaller-scale use cases, introducing a type system may result in more overhead than productivity gain”. Therefore, Vue.js supports TypeScript’s static type checking system, but its usage is not mandatory.

Vue is generally less opinionated than Angular. This means there is no one way of writing code in vue.js, software developers can be more creative, and use vue.js in the way they want to. As a result, quick wins are faster to reach, and the learning curve of vue.js is a lot less steep than the learning curve of Angular. Authors of the official Vue guide claim that developers can get started developing Vue applications in less than a day. This is yet another benefit in favor of vue.js when used for rapid application development.

In the rest of this section, you will read about two differences between Angular and Vue: Angular modules versus vue.js components and directives.

Angular modules may contain any piece of functionality, not necessarily a component.

angular.module("moduleName", [...]);

As its name suggests, a vue.js component holds most of the component logic.

vue.extend({ ... });

Angular directives are generally more complex than vue.js directives. Vue separates directives and components more clearly. Vue.js directives encapsulate DOM manipulations only, while Angular directives are able to fulfill a wider variety of use cases. In the Angular world, a component is just a specific directive. For more information, compare Angular directives to vue.js directives.

Conclusion

Both Angular and Vue.js are viable choices for web application development. They are also similar in nature when it comes to writing code. Vue.js is more lightweight, while Angular is more enterprise ready for developing complex applications. However, many enterprise users testify that Vue has its place in enterprise application development.

Angular’s main drawback is its size, startup time, and memory allocation capacity compared to Vue. However, Angular shines as the complexity of the application goes up.

If you decide to go ahead with Angular, here's an easy way to get started and have your website all set up. And for those deciding to go with Vue, we have a quick set up solution for you as well. 

Don't miss out on our other framework comparison posts.
    

Related Articles