Volume 7, Issue 9, September – 2022 International Journal of Innovative Science and Research Technology

ISSN No:-2456-2165

Comparison of JavaScript Frameworks:

React.js and Vue.js
1 2
Tapan Kumar Patra Dr. Sourabh Jain
Department of Information Technology Department of Information Technology
Indian Institute of Information Technology, Sonepat. Indian Institute of Information technology, Sonepat
Sonipat, Haryana, India Sonipat, Haryana, India

Abstract:- The rising ubiquity of JavaScript has frameworks in order to further expand knowledge and
prompted an assortment of JavaScript framework that research towards comparing JavaScript frameworks. In
expect to assist designers with tending to programming simple terms, a JavaScript framework is a web application
errands. Be that as it may, the quantity of JavaScript framework that is written using the JavaScript language. A
framework has risen quickly so it is challenging for the JavaScript framework differs to that of a JavaScript library in
developers to distinguish the framework that best met that, a library comes packaged with predefined functions that
their requirements. For web programmers, it is essential are ready to be used by developers straight out of the box. On
to pick the proper JavaScript framework that not just the other hand, a JavaScript framework describes how an
serves their ongoing web project needs, yet additionally application should be built and allows for code to be reusable
gives code of high quality and good execution. Moreover, and more organized which in turn, reinforces the scalability
there is a lack of information in regards to what drives and flexibility of an application.
developers towards the decision. The extent of this work
is to give an exhaustive quality and performance test of II. FRONT-END FRAMEWORKS AND LIBRARIES
the most well-known JavaScript frameworks React.js and
Vue.js. A. React Js
React is a JavaScript library used to build stateful and
Keywords:- Frameworks, JavaScript, Developers, React, reusable UI parts. openly released by Facebook in 2013, and
Vue. is ideal for setting up present day single-page utilizations of
any size and scope.
I. INTRODUCTION
Many front-end applications rely on global state
JavaScript programming language has been in presence management to store information, such as who is logged in
for a long time as of now and is one of the most commonly and other user settings. The most popular project for
known, if not, the most utilized front-end programming JavaScript state management is Redux. Most developers use
language in web improvement. Nonetheless, JavaScript is as the official React bindings for Redux, which are maintained
yet developing and with the rise of JavaScript Frameworks by the Redux team. Because of React.js popularity, finding
(JSF), there has been a significant change in how developers input components and ready-to-use elements is extremely
develop software these days. Developers these days easy. They are all just a Google or GitHub search away. The
frequently utilize multiple frameworks to satisfy their work React ecosystem also includes React Native that allows you
which has led to the issue for developers with regards to to build native iOS and Android applications from a single
picking the right JavaScript framework to create software codebase written in React. So, React can be a great choice for
which is halfway because of the accessibility of innumerable building mobile applications using web technologies, too.
quantities of JavaScript frameworks and libraries. In addition, React is part of the MERN stack, which contains MongoDB,
the utilization of JavaScript is getting more significant for Express.js, React, and NodeJS. The great thing about this
web advancement and in this way, there has been significant combination is that a single language — JavaScript — powers
contemplations done about the execution part of the the whole application.[11]-[13]
JavaScript programming language.[1] There has been an
overwhelming interest as of late for incredibly progressed and B. Vue Js
dynamic web applications, to supplant the old desktop Vue.js is an orderly framework for the improvement of
application in all areas. The advancement of web applications UIs. Vue was intended to be gradually user adoptable.
is much of the time in view of the utilization of a specific Because of its usefulness, genuinely straightforward
framework and at times mix of frameworks for better expectation to learn and adapt, what's more, capacity to
execution. These days, single-page applications have become fabricate strong, fast, and refined single-page
very common, notwithstanding their huge limit with regards applications.[17]-[19]
to making web and mobile applications.[17] This project
involves the comparison of JavaScript frameworks which Despite the fact that Redux can be utilized in Vue, there
increasingly have become a cornerstone of web development. are no authority ties. Yet, that shouldn't concern you on the
This research evaluates the performance of JavaScript grounds that Vuex is the authority state the board library made

IJISRT22SEP055 www.ijisrt.com 254

Volume 7, Issue 9, September – 2022 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165
explicitly for Vue applications. Beside coordinating very well  Speed test
with Vue, it is not difficult to troubleshoot utilizing Vue's Pingdom and giftofspeed websites are used to test the
designer devices. In the beginning of Vue, it was more speeds of both the webpage.
diligently to find ready to-use parts. Since the local area has
developed, there is a great many info parts and high-level
components that you can use to accelerate your turn of events.
For mobile application, there is an exceptional project called
Weex. Weex is created and utilized by Alibaba, yet it isn't
generally so full grown and strong as React Native. In
addition, since the undertaking is created and involved more
in China, it is more enthusiastically to track down
documentation and answers for issues in English. Vue Fig 3:- React Js app speed test in Pingdom. [10]
coordinates well with Laravel, and that is the reason they are
frequently utilized together. Laravel offers total JavaScript
and CSS framework to empower the utilization of Vue in new
undertakings.[11]

III. COMPARING REACT JS AND VUE JS

This section focuses on the comparison of the java script

frameworks React Js and Vue Js on the basis of different
Fig 4:- Vue Js app speed test in Pingdom. [10]
parameters to make a clear view on the both the frameworks.
From the figures 3 & 4, It is evident that Vue Js app is
A. Performance and speed test using a web app
slightly faster as compared to React Js app Due to half the size
A Todo web app is developed in both the frameworks
of React Js app.
to test the performance and speed of the same webpage in
both the frameworks i.e., React Js and Vue Js.

 Performance Test
Webpage.org site is used to test the performance of both
the webpages through a waterfall view.

Fig 5:- Speed test of React Js app using giftofspeed.[2]

Fig 1:- The waterfall view of React Js app. [20]

Fig 6:- Speed test of Vue Js app using giftofspeed. [2]

From Figures 5 & 6, It is evident that Vue Takes less

time React but its solely due to lesser in size.

B. Secondary Statistics
 Github Statistics
Fig 2:- The waterfall view of Vue Js app. [20] GitHub is a development stage that was established in
2008 by Chris Wanstrath, PJ Hyett, Tom Preston-Werner, and
From the figures 1 & 2, It is observed that both the web Scott Chacon. For every repository seeing the aggregate sum
apps are very close in case of the time taken to load but in is conceivable of watches, stars and forks, in table 1
performance, Vue is preferable as the webpage is lighter in underneath information from every framework's repository
size. were accumulated. [3] [4]

IJISRT22SEP055 www.ijisrt.com 255

Volume 7, Issue 9, September – 2022 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165
Watch Stars Forks From Figure 7, In case of Likability and usability, Vue
React 6.6k 191k 39.4k is just next to React by the web developers community over
Vue 6.1k 198k 32.4k the years.
Table 1:- Github Statistics. [5] [6] C. Analysis of the front-end solutions
There is no question that React and Vue are well known
 Npm Statistics frontend improvement arrangements in present day web
Npm, Node package manager, is the biggest development. Notwithstanding, they have various attributes
programming vault instrument for JavaScript creating, which and driven idea. It implies that different business measures
empowers designers from everywhere the world to use, to need to choose a reasonable framework or library to greatest
acquire or share open source packages for building their application utilization and effectiveness.
applications. Npm is based upon three parts, the site, the CLI
and the registry. Below is the table 2 which shows the  Data Processing
dependents, weekly downloads, unpacked size and total files. Data Processing is the fundamental part in front-end
[7] improvement since the information handling proficiency and
quality choose the client experience in visiting the
Frame Dependents Weekly Unpacked Total application.
works downloads size files
React 89,139 14,580,49 316 KB 20 React Vue
5
Vue 56,818 3,301,092 2.55MB 33 Data Binding One way One way /Two
Table 2:- Npm Statistics. [8] [9] ways
Table 3 - Data binding in React Js and Vue Js. [21]
From table 2, Its clear that more number of people use
React Js that Vue Js and React also slightly upper hand due to Table 3 shows the data binding way in every framework
its much lesser unpacked size and total files as compared to and library. Vue can utilize DOM audience members to
Vue. accomplish two-way restricting or utilize one-way restricting
without DOM audience members. React requirements to
 State of java script surveys process more confounded data stream because of actually
State of JS is a site made by Raphaël Benitte, Sacha take a look at the distinction
Greif and Michael Rambeau. They direct yearly reviews between virtual DOM and displayed DOM. [21]
about the state of JavaScript, and that implies inquiring
developers about points from frontend frameworks to  Volume and performance
backend frameworks. Below is the Figure 1 implies the Bigger volume implies the framework or library
ranking of front-end frameworks including React Js and Vue contains more highlights and works, however it will invest
Js. [14] more energy on stacking the framework or library.

Activity React Vue

Read memory 4.5±0.1 (1.3) 3.8±0.0 (1.1)
Run memory 9.7±0.1 (2.6) 7.5±0.1 (1.9)
Table 4:- Front-end framework and library memory
allocation performance. [16]

From Table 4, It is observed that Vue takes less time

because of its adaptable and proficient benefits.

 Technical Support
Technical Support is likewise essential since better help
can develop a superior relationship with developer networks
which is a fundamental part to extend the framework's
standing. React offers solid specialized help and its API is
entirely steady. Update and migration are exceptionally
straightforward because of the authority scripts to help
developers to conclude the connected update. So, React offers
relentless specialized types of assistance. In spite of the fact
that Vue has straightforward migration and update between
Fig 7:- Rankings of front- end frameworks. [15] various adaptations, there is no normal update plan from the
authority group due to the monetary constraint. [21]

IJISRT22SEP055 www.ijisrt.com 256

Volume 7, Issue 9, September – 2022 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165
 Merits and Demerits IV. CONCLUSION

a. React Js This Research work aimed to choose a framework by

comparing the JavaScript Frameworks and libraries on the
Merit – basis of different criteria like the performance and speed test
 React utilizes a virtual DOM that accomplishes ideal of the same web app in both the JavaScript Frameworks, to
productivity by re-rendering nodes as wanted. observe the popularity and the usability of users around the
 Server side rendering is one more significant benefit of world through secondary statistics and by analyzing the
this structure for some sort of executions like substance solution of Frameworks through data binding, volume and
centered applications. performance and technical support.
 Limits client's asset load by offering support for packaging
and tree shaking. React is sufficiently old to be experienced and has an
 Utilitarian programming of react helps in making reusable immense number of commitments from the community. It has
code. acquired inescapable acknowledgment. The work market for
 Generally better SEO in examination with vue.js. React is great, and the future for this framework looks
splendid. React looks like a decent decision for somebody
Demerits – getting everything rolling with front-end JavaScript systems,
 Need to import libraries for state and model as React new companies and developers who like some adaptability.
doesn't carry out MVC. The capacity to coordinate with different frameworks
 React creates some distance from class-based modules flawlessly gives it an extraordinary benefit for the people who
and can be a hindrance for Object Oriented Programming would like some adaptability in their code.
(OOP) for developers to feel more loose.
Vue is most current to the field, without the support of
a significant organization. Nonetheless, it has done well over
b. Vue Js
the most recent couple of years to emerge as competitor for
React, and particularly so with the arrival of Vue 3.0. This is
Merits-
maybe assuming a part with a great deal of Chinese giants like
 Vue is quick and very light. It offers benefits that
Alibaba and Baidu picking Vue as their essential front-end JF.
incorporate more noteworthy proficiency for restricted
Vue ought to be your decision on the off chance that you favor
asset PCs, expanded convenience for clients with poor
user-friendliness, yet in addition like adaptability.
network and a superior by and large client experience.
 Its reactivity is one of the most grounded elements of
To finish up the decision of framework relies upon who
Vue.js. Connecting information among HTML and JS
is utilizing it, what sort of prerequisites an undertaking has,
code has never been simpler. the assets of an organization, and the areas requests. Thusly,
various frameworks will be reasonable for various
 Vue is treating two-way powerful information restricting circumstances.
like nothing else. At the point when the information is
refreshed, the DOM ought to continuously be adjusted as REFERENCES
needs be which is ideally suited for SPA. [17]
[1]. A Andreas B. Gizas, Sotiris P. Christodoulou and
Demerits- Theodore S. Papatheodorou, "Comparative Evaluation
 Contrasted with React, Vue.js just has a moderately low of JavaScript Frameworks ",Proceedings of the 21st
piece of the pie, and that intends that data trade in this international conference on world wide web, april 2012,
system is just in the beginning phases. pages-513-514
 Hazard of being over adaptable while coordinating with [2]. Giftofspeed, [online] Available at :
enormous tasks because of absence of resources. https://www.giftofspeed.com/ [Accessed on May,2022]
[3]. Github, [online] Available at: https://github.com/
D. Discussion [Accessed on May,2022]
The analysis shows that the various frameworks [4]. Github features, [online] Avaiable at:
capability all around founded on the below application https://github.com/features/ [Accessed on May,2022]
criteria: [5]. Github react stastistics, [online] Avaiable at:
Vue.js is more reasonable for applications: https://github.com/facebook/react/releases/tag/v0.3.0
 Light weight applications. [Accessed on May,2022]
 At the point when there is prerequisite to incorporate into [6]. Github vue statistics, [online] Avaiable at:
existing applications. https://github.com/vuejs/vue/releases/tag/0.6.0
 Where speed is basic boundary. [Accessed on May, 2022]
[7]. npm, [online] Available at:
React is practical framework for applications: https://docs.npmjs.com/about-npm/ [Accessed on May,
 That require fast action with better performance. 2022]
 Applications that require adaptability.
 Best SEO.

IJISRT22SEP055 www.ijisrt.com 257

Volume 7, Issue 9, September – 2022 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165
[8]. npm react statistics, [online] Available at:
https://www.npmjs.com/package/react [Accessed on
May,2022]
[9]. npm vue stistics, [online] Available at:
https://www.npmjs.com/package/vue [Accessed on
May,2022]
[10]. Pingdom website speed test, [online] Available at :
https://tools.pingdom.com/ [Accessed on May,2022]
[11]. Rajeev Kumar Sinha, “International Journal of All
Research Education and Scientific Methods
(IJARESM)”, Volume 9, Issue 5, May -2021
[12]. React, [online] Available at : https://reactjs.org/
[Accessed on May,2022]
[13]. React docs, [online] Available at
:https://reactjs.org/docs/getting-started.html [Accessed
on May,2022]
[14]. State of JavaScript Survey, [online] Available at:
https://stateofjs.com/en-us/ [Accessed on May 2022]
[15]. State of JavaScript Survey Front-end frameworks and
libraries, [online] Available at:
https://2021.stateofjs.com/en-us/libraries/front-end-
frameworks/ [Accessed on May,2022]
[16]. Stefankrause Developer Team., 2018, December.
Results for js web frameworks benchmark, [online]
Available at: https://www.stefankrause.net/js-
frameworks-benchmark6/webdriver-ts-
results/table.html [Accessed on May,2022]
[17]. Vinuta Hutagikar and Vinay Hegde, "Analysis of Front-
end Frameworks for Web Applications", International
research journal of Engineering and Technology
(IRJET), volume: 07, issue: 04, april 2020
[18]. Vue, [online] Available at: https://vuejs.org/ [Accessed
on May,2022]
[19]. Vue docs, [online] Available at:
https://vuejs.org/guide/introduction.html [Accessed on
May,2022]
[20]. webpage test, [online] Available at :
https://www.webpagetest.org/ [Accessed on May,2022]
[21]. Yongkang Xing, "Research and analysis of the front-
end frameworks and libraries in E-business
development", the 2019 11th international conference
,feb 2019

IJISRT22SEP055 www.ijisrt.com 258