Comparative Study of Angular and Vue [611934]

1
Comparative Study of Angular and Vue

Ovidiu Constantin Novac1, Damaris Emilia Madar2

1 University of Oradea, Romania ,
Department of Computers and Information Technology, Faculty of Electrical Engineering and Information Technology ,
1, Universității Str. , 410087 Oradea, Romania, E-Mail: [anonimizat]

2 University of Oradea, Romania ,
Department of Computers and Information Technology, Faculty of Electrical Engineering and Information Technology ,
1, Universităț ii Str. , 410087 Oradea, Romania , E-Mail: [anonimizat]

Abstract – The development of technology led the
world to a new vision. People are more busy and they
need applications that help them. To -do list
applications are benefic for anyone who wants to
manage and to organize his program efficiently,
without forget things, especially the important ones .

Keywords: angular , vue, javascript.

I. INTRODUCTION

Nowadays, it has been noticed that technol ogy is in
a continuous development. It have been implemented
many applications to make people’s lives easier. The
developers improve day by day the known programming
languages and frameworks.
On the other hand, many developers develop new
programming langu ages and frameworks to keep up
with the world and the requirements.
In this paper, there is presented a comparative study
between two frameworks, Angular and Vue, as well as
there are presented two to -do list applications, one in
Angular and another in Vue .

II. THEORETICAL ASPECTS

Angular is a platform for building applications
using HTML and TypeScript. Angular combines
declarative templates, dependency injection, end to end
tooling, and integrated best practices to solve
development challenges. It imple ments core and
optional functionality as a set of TypeScript libraries
that are imported into the apps, [1].
The architecture of an Angular application is based
on fundamental concepts. An Angular application is
defined by a set of NgModules . These are the basic
building blocks , [2].
An application has at least one root module that
allows bootstrapping and in many times has other
functions too. Angular can choose and modify in
accordance with the program and data the components
that define views. Service pr oviders can make the code
to be modular, reusable and efficient by the way of the
components. Both are simply classes which mark their type and
provide metadata that tells Angular how to use them.
There are many advantage of Angular. It is
supported on va rious platforms. Angular presents tools
and design patters to build a good project. Angular is
built with TypeScript, a superset of JavaScript. The
components are decoupled . Angular is meant to be
thoroughly tested and it supports both unit and end -to-
end testing. Also, Angular is mobile and desktop ready
and it is actively maintained, which means that it has a
large community and ecosystem, [3].
Angular.js is an open -source JavaScript model –
view –controller framework for dynamic web
applications. It is too lset for building frameworks for
developing the applications , [4].
Every feature can be modified or replaced for a
perfect application (Figure 1)

Figur e 1. MVC design pattern , [5].

With Angular .js is possible to extend HTML
vocabulary for the applications. The resulting
environment is extraordinarily expressive, readable, and
quick to develop , [6].
Angular.js attempts to minimiz e the impedance
mismatch between document centric HTML and what an
application needs by creati ng new HTML constructs.
Angular.js teaches the browser new syntax through a
construct.
The impedance mismatch between dynamic
applications and static documents is often solved with: a
librar y or frameworks, [7].
Angular has some disadvantages. Angular is quite
complex and it is hard to learn. Also there are poor SEO
options. Developers can’t switch directly from

2
Angular.js to Angular, so there are difficulties with
backward compatibility.
There are many websites that are built with Angular
because the many benefits that Angular provides to
developers, for example: YouTubeTV, Rockstar Games,
Crunchbase, Udacity, Aie sec, Google Cloud, Blispay,
NBA , [8].
On the other h and, Vue is a progressive framework
for building user interfaces. It is designed from the
ground up to be incrementally adoptable. In the centre is
the view layer which is easy to set up and integrate with
other existing libraries or projects. Vue can make
complex Single -Page Applications when is used with
modern tooling and supporting libraries , [9].
Vue components extend basic HTML elements to
encapsulate reusable code. At a high level, components
are custom elements to which the Vue’s compiler
attaches b ehavior. In Vue, a component is essentially a
Vue in stance with pre -defined options , [10].
Vue.js is an open -source JavaScript framework
combining features from React.js and Angular. Vue.js is
a complete framework, but it has not very many features
and pac kages. Vue.js uses a Virtual DOM that makes
rendering the application’s user interface lightning fast.
The DOM (Document Object Model) is cross -platform
and language -independent convention for representing
and interacting with data in HTML, XML, and others .
Web browsers handle the DOM implementation details,
so we can interact with it using JavaScript and CSS
(Figure 2) , [11].

Figure 2. Virtual DOM and Real DOM , [12].

There are many differences between Angular and
Vue. Angular i s complex than Vue in terms of design
and API. Vue is considered simpler because it had come
to the use for developers after major framework releases.
Angular is easy to integrate with third -party components
and other javascript based technologies because it is a
JavaScript -based framework. Also Vue enables many
front -end libraries to be integrated with it easily which
makes Vue easier to use , [13].
Angular uses two -way binding between scopes. it
supports asynchronous services that are a great help to
devel opers in scenarios when they have third -party –
developed components to integrate with the app. On the
other hand, Vue supports one -way data flow between the
components. It ensures data flow easily and ensures the
non-trivial app development quickly. Develop ers can
use libraries when needed if working in conjuncti on
with asynchronous services, [13].
Both Angular and Vue.js performs fast with very
similar metrics on benchmarks and addressing similar issues. Angular is known to perform fast even having a
lot of watchers. It ensures similar performance metrics
on different benchmarks. Angular.js is highly flexible
beside Vue.js which is not as flexible as Angular.js ,
[13].
In Table I there is presented a comparison between
Angular and Vue.

Table I
Comparison bet ween Angular and Vue , [14].
Angular Vue
Type A framework A library
Written in TypeScript JavaScript
Founders Powered by
Google Created by Former
Google Employee
Initial Release September 2016 February 2014
Application
Types Develop ing Native
apps, hy brid apps,
and web apps Advanced SPA
and started
supporting Native
apps
Ideal for Feature -rich
applications Web development
and single -page
applications
Model Based on MVC
architecture Based on Virtual
DOM
Community
Support A large
community of
develope rs and
supporters Open -source
project sponsored
through crowd –
sourcing
Language
Preference Recommends the
use of TypeScript HTML templates
and JavaScript
Popularity Widely popular
among developers More than 40,000
stars added on
GitHub during the
year
Companies Using Used by Google,
Forbes, Wix, and
weather.com Used by Alibaba,
Baidu, GitLab,
and others

To get somewhat of an idea of the recent usage of
Angular and Vue, in Figure 3 is presented the total
number of downloads by developers from NPM.

Figure 3. Number of downloads from all time , [15].

It has been noticed th at both of them are used for the
many advantages they have.
Vue is growing quickly and has gained a lot of
traction from developers in recent years. It’s a sma ll
community and has no big company back support.
Angular is more popular among big companies. It has a
large communi ty and a back support of Google , [16].

3
III. IMPLEM ENTATION AND EXPERIMENTAL
RESULTS

Vue.js is a modern, progressive and open -source
JavaS cript framework. It is flexible enough that it can
add to jQuery projects, but can also be used to build a
detailed single page application. Vue.js is not the most
used framework, but is lighter and faster than more
competitors. Vue.js organizes code in lo gical structures
called components , [17].
On the other side, Angular is a TypeScript -based
open -source front -end web application platform
developed at Google. Angular and AngularJS are two
entirely different frameworks. Angular uses TypeScript
which is an improved form of JavaScript , [18].
There were implemented two to -do list applications,
one in Vue and another in Angular, to compare the
functionality of both.
A to-do list app lication is useful because it helps in
organization, is efficient, helps people feel more in
control of their lives. When the task is over, there is the
possibility to delete it, which is a very good skill. In
many ways, an efficient to -do application is the
ultimate productivity application.
It have been implemented two to -do list a pplications
which will be presented below.
The application who was created in Vue is presented
in Figure 4. The note s have a title and the content.

Figure 4. To-do list application in Vue

When the t ask is done, it can be delete d. The task
can be also edited. If the note is clicked, a modal opens
and it shows the task which can be edited or deleted
(Figure 5).

Figure 5. An example of a note

The other application which is implemented in
Angular, is pr esented in Figure 6 . There are the
following options: add, delete and selection when the
task is over. When a task is selected, it moves to the end
of the list.

Figure 6. To-do list application in Angular

The performance of the application who was
implemented in Vue is presented in Figure 7, and the
performance of the application who was implemented in
Angular is presented in Figure 8.

Figure 7. The performance of the application in Vue

Figure 6. The performance of the app lication in Angular

This applications are easy to use and very efficient.
Several tests were performed to see which framework is
better and it has made an average to the calculus of the
tests. In Figure 9 , it is presented a comparison between
the performa nce of the two applications by loading,
rendering and painting . In Figure 10, it is presented a
comparison between performance of the applications by
It can be seen that Vue is faster than Angular.
Both frameworks are effective. Vue is easier for
beginner s because it is not as structured and elaborated
as Angular.
010203040
Vue
Angular

Figure 7. Comparison between Vue and Angular performance

4

050010001500
Vue
Angular
Figure 8. The comparison betwe en Vue and Angular performance

In Figure 11 is presented the running time. It can be
noticed that this Vue project is more efficient than this
Angular project because the running time for Vue is
smaller than the running time for Angular.
0100020003000
Total TimeVue
Angular

Figure 9. The total time of comparison between Vue and Angular
performance

IV. CONCLUSIONS

Angular is a TypeScript -based JavaScript
framework. Developed and maintained by Google,
Angular is the rewritten, an incompat ible successor to
AngularJS.
Vue is also a JavaScript framework. Vue is the most
rapidly growing JS framework, especially without the
backing of any big company.
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.
Angular is more structured and elaborated. It forces
the developer to do everything in a standard way.
Mainly large enterprise projects rely on Angular because
of its predefine d structure which ensures that every
developer follows the same architecture.
For those who love coding in TypeScript, Angular is
the best choice. For those who are a fan of clean code,
Vue is a good idea.
Those who want separation of concerns in their
applications, Vue is a right option. For those who are a
fond of object -oriented programming, Angular is
definitely the pick for them.
In this paper, there were presented two to -do list
applications, one in Vue and another in Angular. Also,
there was presente d the performance of them and a
comparison between them.
Vue provides the easiest learning curve and it’s an
ideal option for beginners. Vue is ideal for a small team and a small project.
Angular is ideal for significant expansion plans.

REFERENCES

[1] Luxas Marx, “Angular: Everything you need to get
started, 2017, https://malcoded.com/posts/angular –
beginners -guide/ , Accesed: 09 -June-2020.
[2] “Angular: Introduction to Angular concepts”,
https://angular.io/guide/architecture , Accesed: 09 -June-
2020.
[3] “AngularJS JavaScript SDK | LoopBack documentation”,
https://loopback.io /doc/en/lb3/AngularJS -JavaScript –
SDK.html , Accesed: 09 -June-2020.
[4] John Potter, “NPM Trends: Angular/core vs Vue”,
https://www.npmtrends.com/@angular/core -vs-vue,
Accesed: 09 -June-2020.
[5] Ankit K umar, “React vs Angular vs Vue.js: A complete
comparison guide”, 2018, https://dzone.com/articles/react –
vs-angular -vs-vuejs -a-complete -comparison -gu, Accesed:
09-June-2020.
[6] “AngularJS – Superheroic JavaScript MVW Framework”,
https://angularjs.org/ , Accesed: 09 -June-2020.
[7] Ilya Bodrov -Krukowski, “Angular Introduction: What it
is, and why you should use it”, 2018,
https://www.sitepoint.com/angular -introduction/ , Accesed:
09-June-2020.
[8] “AngularJS: Developer Guide: Introduction”,
https://docs.angularjs.org/gui de/introduction , Accesed: 09 –
June-2020.
[9] Liliia Harkushko, “Angular: Best use cases and reason to
opt for this tool”, 2020, https://yalantis.com/blog/when -to-
use-angular/ , Accesed: 09 -June-2020 .
[10] Junaid Shaikh, “Application design model MVC”, 2019,
https://medium.com/@junaidsshaikh/application -design –
model -mvc-d59608495a5b , Accesed: 09 -June-2020.
[11] “Introduc tion – Vue.js”, https://vuejs.org/v2/guide/ ,
Accesed: 09 -June-2020.
[12] Corey Brooks, “Social network for programmers and
developers”, https://morioh.com/p/0ee10642bcb e,
Accesed: 09 -June-2020.
[13] “Angular vs Vue: which is the best javascript
framework?”, https://www.edeltaes.com/angular -vs-vue-
which -is-the-best-javascript -framew ork/, Accesed: 09 –
June-2020.
[14] Kostas Maniatis, “Learn the differences between shadow
DOM and Virtual DOM”, 2017,
https://vuejsfeed.com/blog/learn -the-differe nces-between –
shadow -dom-and-virtual -dom, Accesed: 09 -June-2020.
[15] “Components basics – Vue.js”,
https://vuejs.org/v2/guide/components.html , Accesed: 09 –
June-2020.
[16] Doug Wilson, “Building a ToDo list application with
Vue.js”, 2019, https://www.breaktech.com/post/building -a-
todo-list-application -with-vue-js, Accesed: 09 -June-2020.
[17] “Building a Todo App using Angular and JSDS – Part 1”,
2018, https://medium.com/@arjunatlast/building -a-todo-
app-using -angular -and-jsds-part-1-543a0eee7cbd ,
Accesed: 09 -June-2020.
[18] “Angular vs Vue.js – A handly comparison guide”, 2018,
https://medium.com/@systango/angular -vs-vue-js-a-
handy -comparison -guide -8164ce1773e0 , Accesed: 09 –
June-2020.