A comparative study of VueJs and ReactJs [627764]

A comparative study of VueJs and ReactJs
Raluca Marina Sferle
University of Oradea, Romania,
Information Technology Management,
Oradea, Romania, [anonimizat]

Abstract – It is known that in this days the request for
faster and better applications and tools has increased.
JavaScript Frameworks comes with an helpful hand in
terms of popularity, easy -to-use and integration, using
new technology in the favor of developer and user.
It is probably the choice of the manager which
framework is the best for his project. But in this analysis
will be compared two main JavaScript framework:
React.js and Vue.js.
Keywords: framework, vue, react, javascript, calculator,
comparison.
1. INTRODUCTION
The total of techniques, skills, methods, and
processes used in the production of goods, services or
scientific investigation is called technology. Technology
is the knowledge of techniques and it can be integrated in
machines to allow for ope ration.
React.js and Vue.js are JavaScript Framework. Both
are written in JavaScript. A framework is like an
arhitecture, it defines the entire application design.
With React is easy to build interactive applications
because it design views for each stat e in your application.
When data is changed React will update and render the
right components.
With the help of Node React can render on the
server and also power mobile apps using React Native.
Vue is a progressive framework for building user
interfaces a nd is designed to be adoptable because it is
easy to integrate with existing projects. Vue can powering
Single -Page Applications when used in combination with
supporting libraries and modern tooling.
In this case study it will be compared React and Vue
frameworks. In the experiment it will be checked the
performance of these two SPA.
2. LITERATURE REVIEW
A software framework is an abstraction in which
user-written code has the role to provide generic functionality [1][2][3 ]. Is a reusable, universal software
environment. Software frameworks may include tool sets,
support programs, code libraries, Application
Programming Interfaces and compilers.
Frameworks are different from normal libraries
because they have features [1] like inversion of control ,
extensibility and non-modifiable framework code [1][2].
JavaScript frameworks are a type of tool that makes
working with JavaScript easier and smoother [2][3].
These frameworks also responsive and makes them very
popular (Fig 1) [4].

Fig. 1 Google trends search React vs. Vue.

Statistically [4], it is considered that these
frameworks are in top ten, the best JavaScript frameworks
are Angular, React, Vuejs, Ember.js, Meteor, Mithrill,
Node.js, Polymer, Aurelia, Backbone.js [2].
3. PROPOSED MODEL
It seems that React is more popular and searched
programming technology in comparison to Vue [5][6].
But also it is not sure that React wins because Chinese
developers are not massively using google. Statistically, a
Chinese developer will use more frecvently VueJs than an
American developer which will use React [5].
Component frameworks are sets of well -defined
interfaces that establish the protocols for component
cooperation within the framework [5]. These protocols
are served by component develope rs to ensure the
interoperability of their components within the scope of a
given framework [5]. Vue has Quasar framework and
Vuetify and React has Material UI [5].

React is more popular than Vue in the countries
outside of China and is backed with a top b rand
(facebook), but Vue is not.
Vue comes with battries and it provides a graphical
interface to work with which makes it easier than React to
get started with [5].
The production size of Vue is smaller than React and
Vue has more component frameworks th an React.
There are some similarities like both are built to
work with root libraries. React.js and Vue.js are based on
the Virtual DOM model and have a component -based
structure [5][6].
But also have some differences. Each framework has
its own advantages and disadvantages to consider.
Advantages for React.js are flexibility and
responsiveness [5][6], Virtual DOM – based on document
object model; Rich JavaScript Library, Scalability,
Constantly Evolving – React is backed by professional
developers from Facebook who continuously look for
ways to improve it [6]; Mobile Platform or Web – React
provides the React Native platform which can be used for
developing native -rendered apps for iOS and Android
through the same React component model [6].
Desavantage for React.js is that it requires deep
knowledge of JavaScript framework to build an
application [6].
Advantages for Vue.js. Vue.js is one of the widely
used frameworks with up -to-date libr aries and packages
because has an adaptable architecture [6]. HTML -based
templates is the standard embraced by Vue.js and offers
smoother integration without any effect on the whole
system, also provides hassle -free migration, simple and
efficient structur e, and reusable templates. The detailed
documentation helps in deep and easier learning and
requires no extra knowledge [6].
Desavantages for Vuejs is that it still has a very
small market share in comparison to React.
A. In-Depth Comparison of Vue and React
1) Rerendering and Optimization
When the component’s state is changed React’s
mechanism triggers [7] the rerendering of an entire
component tree. It may need to use extra properties to
avoid the unnecessary rerendering of subcomponents.
Vue provides optimiz ed rerendering in which the
system keeps track of dependencies during its render and
works accordingly [7]. Rerendering makes Vue a widely
embraced framework by the developers across the world
because is the most distinguishing feature [7].
2) JSX vs HTML React uses JSX – a declarative JavaScript XML [7]
which allows developers to write components leveraging
the power of JavaScript, while Vue uses HTML templates
to create views.
3) Routing and State Management Solutions
In component -based frameworks like React an d
Vue, it is important to pay more attention to the state
management and data flow [7], because there are a
number of components interacting with each other and
sharing data.
React offers an solution called Flux/Redux
architecture which represents unidirec tional data flow and
an alternative to the famous MVC architecture [7]. Vue.js
framework has more advanced architecture called Vuex
which integrates into Vue and offers an unbeatable
experience.
4) Building Tools
Both Frameworks have a good development
environment. Developers can build apps that get them up
and running with the latest practices and templates. In
React, there is a Create React App and in Vue, it is vue –
cli [7].
Both of these bootstrap tools tend to give developers a
comfortable and flexible development environment and a
superior starting point [7].
5) Cross -Platform App Development
Cross -platform app development is widely popular
and both frameworks are providing the superior cross –
platform app developm ent experience [7]. Vue’s Weex
aims to provide a smooth development experience to
create apps for iOS and Android.
6) Usage
For a lightweight, faster, and modern UI library for a
startup application, it is recommanded to use Vue.js
[4][5][7].
React has a ma ture and larger development
community of professionals who are dedicated to making
it more advanced because it is powered by Facebook
which has many use cases, solutions, resources and
projects [4][5][8]. Furthermore, React is suitable for
mobile apps and large -scale applications due to the
grown -up user base [8].
Vue.js it is recommanded in these scenario:
Up-to-date documentation, simple syntax, smaller,
faster, flexible, rich HTML templates, easy for
development.

React.js is better than Vue.js in these scenario:
Professional community, easy and light -weight
version migrating.
Perfect for building large -scale apps and mobile apps.
4. EXPERIMENT
It was created two application following these
steps The performance of the test is carried out with
the help of Google Chrome performance tool for
calculating the time, which starts when the button is
clicked and ends when the rendering process does.
It has been created a calculator in both
frameworks (Fig 2) (Fig 3).

Fig. 2. React calculator
Fig 3. Vue calculator

By clicking on the button it can be seen the
performance of the frameworks. First, it has been tested
React calculator and this is the result (Fig 4):
Fig. 4. React test app

The second test, has been made with Vue calculator
(Fig 5).

Fig. 5. Vue.js Test app

The final result is shown in the Fig 6.

Fig. 6. React and Vue test

With the comparing of these two test, it has been
made a statistic to see the performance of the f rameworks.
The greater is the speed, more points is added on the
framework. So, the winner is React, which gain 75% of
the score. It had been tested over 100 times to see exactly
which has more speed and better performance.
React and Vue have Virtual DOMs which provide a
boost to the performance. Vue has the deepest memory
allocation.

5. CONCLUSION
React.js and Vue.js have no considerable differences
and this decision is highly subjective based on application
requirements. If it is necessary to integrate a front -end
JavaScript framework into an existing application, Vue.js
is a better choice and if it is necessary to build mobile
apps with JavaScript, React is definitely the way to go.
The capabilities of the respective framew orks vary in
accordance with the size of the applications that need to
be developed. React proves to be the go to library if it is
planned to scale the app. This is validated by the fact that
Facebook, WhatsApp, and Instagram all make use of
React and each of them are large applications at a global
scale. A maintainable architecture with server -side
rendering can be easily developed with React.
Developers consider Vue to be helpful while
working with large -scale applications. The framework
follows a lean methodology for the learning curve, which
immediately trumps the complexity of frameworks like
React that often prove to be difficult among new
developers and large -scale app developers.
6. REFERENCES

1. D. R. Lakshmi and S. S. Mallika, “A Review
on Web Application Testing and its Current Research Directions,” International Journal of
Electrical and Computer Engineering (IJECE),
vol. 7, no. 4 , p. 2132, 2017.
2. N. Prokofyeva and V. Boltunova, “Analysis and
Practical Application of PHP Frameworks in
Development of Web Information
3. Systems,” Procedia Comput. Sci., vol. 104, no.
December 2016, pp. 51 –56, 2016.
4. Article, “Web Technology Usage Trends W eb
and Internet Technology Usage Statistics.”.
5. Web Technology Usage Trends, Web page.
Source: https://trends.builtwith.com/ .
6. Article, Navicstein Rotciv 22 November
2019,„A fair comparison of React.js and Vu e.js
in 2019 and beyond!”, Source:
https://dev.to/navicsteinr/a -fair-comparison -of-
react -js-and-vue-js-in-2019 -and-beyond -19l5
7. Article, Ankit Ku mar, 08 August 2018 „React.js
vs. Vue.js: A Comparison of Popular
Frameworks”. Source:
https://dzone.com/articles/reactjs -vs-vuejs –
comparison -of-popular -frameworks
8. Article, Cuelogic Technologies, 04 Octomber
2019,„Angular vs. React vs. Vue: A
Comparison”.
Source: https://dev.to/cuelogictech/angular -vs-
react -vs-vue-a-comparison -updated -2fgn