2023 3rd International Conference on Electronic and Electrical Engineering and Intelligent System (ICE3IS), 9-10 August 2023

Comparative Performance Analysis of Javascript

Frontend Web Frameworks
1st Jason Tong 2nd Ricky Rivaldo Jikson 3rd Alexander Agung Santoso Gunawan
Mathematic Department Mathematic Department Computer Science Department
School of Computer Science School of Computer Science School of Computer Science
2023 3rd International Conference on Electronic and Electrical Engineering and Intelligent System (ICE3IS) | 979-8-3503-2776-2/23/$31.00 ©2023 IEEE | DOI: 10.1109/ICE3IS59323.2023.10335250

Bina Nusantara University Bina Nusantara University Bina Nusantara University

Jakarta, Indonesia 11480 Jakarta, Indonesia 11480 Jakarta, Indonesia 11480
[email protected] [email protected] [email protected]

Abstract— One of the most popular tools today for building Interaction speed is important performance metrics [4]. By
engaging, robust, and easy to manage websites is the JavaScript reducing loading times by a few seconds, it can improve user
programming language. Over the past 10 years, numerous interaction and storage. Speed interaction is also an important
front-end frameworks have been developed on top of part when there are many requests from users and technical
JavaScript, making it simpler to develop, design, and maintain
difficulties such as slow connection issues [5].
interactive websites. Currently, the most popular JavaScript
front-end frameworks are React.js and Vue.js. Next.js is a Due to complexity and variety of front-end frameworks, it
relatively new framework that is also catching developers' will be so difficult for developers to select the right framework
attention and growing in popularity. This paper assesses the for their project, especially for beginners who are just start in
performance of these prominent front-end JavaScript front-end field [6]. Frameworks are also very sensitive
frameworks, analyzing aspects like browser performance, speed because if framework changes then most of the code will
index, interactive time, and the efficiency of specific DOM change. Developers must choose based on the framework that
operations such as adding, editing, and removing elements. is popular, frequently used, a decent framework as well as a
Using benchmark applications tailored for each framework, we front-end framework community. Not only that. In choosing a
conducted extensive testing to gauge their performance across framework, you also have to consider high viability to ensure
different DOMs, leveraging technology-based data. Finally, our lots of maintenance and updates in the future [5]. The rest of
study of three front-end frameworks concluded that Next.js this paper is organized as follows: first in this paper discuss
offers superior performance, React.js's focus on JavaScript about systematic literature review in general and then follow
dynamics leads to latency, and Vue.js exhibits average speed, by a research methodology in section 3. In research
particularly in 'to-do list' and 'image gallery' project contexts. methodology section, will discuss comparisons of JavaScript
front-end developer and to find which is better or suitable for
Keywords—JavaScript, Front-end Framework, React.js,
developer. Finally, we analyze our research results in section
Vue.js, Next.js.
4 and conclude our work with suggestions for future research
I. INTRODUCTION in section 5.
The purpose of this paper is to analyze performance of II. TOOLS THAT WILL BE USED
JavaScript front-end framework in determining how the To demonstrate and compare each framework, there will
developer can choose which framework that suits to their be some tools that will be used. It is important since the tools
project or workplace. that has a relation to a browser.
Front-end Development is part of web development. At A. Front-end Foundation (HTML and CSS)
first, front-end development was just for displays content
using HTML, CSS, and very minimum JavaScript even HTML (Hyper Text Markup Language) is a markup
doesn’t require a framework at all. To develop user interaction language that is used to create and describe the structure and
and effectiveness, developer need a new reusable and easy to content of a web page. CSS (Cascading Style Sheets) is a
maintain front-end technology [1]. At the same time, front-end language to visualize the web page which can be applied to
developer has difficulties in using JavaScript programming HTML elements [7].
languages because each type of browser has different support B. Javascript
against standard ECMAScript. Framework is an enabling
technology code structure to style quickly and effectively [2]. 1) Introduction to JavaScript
Most of the variations and complexities of JavaScript JavaScript is a scripting programming language that can
framework and library comes from front-end development be written in HTML. It was created in 1995 with the purpose
itself. Front-end technology is developing very fast. several to make interactive functions to web pages [8].
years then there is still using jQuery in manipulating elements, 2) EcmaScript Standard
but React.js and Vue.js have started to take over the front-end ECMAScript is a core language for JavaScript that
market [3]. performs computations in web applications. ECMAScript is
1) Performance Metrics for websites standardized by Ecma International in ECMA-262 which
For websites, performance metrics have a very important specifies only language syntax and the semantics of the core
role. Good performance means less load time, higher API [4].
satisfaction users, and can increase revenue for commercial
websites.
3) React.js

Authorized licensed use limited to: MULTIMEDIA UNIVERSITY. Downloaded on January 24,2024 at 20:03:42 UTC from IEEE Xplore. Restrictions apply.
979-8-3503-2776-2/23/$31.00 ©2023 IEEE 81
2023 3rd International Conference on Electronic and Electrical Engineering and Intelligent System (ICE3IS), 9-10 August 2023

React.js is a framework library that can be used to make developing websites with attractive features offered and in
User Interfaces (UI). It has following helpful features, such as 2021, it is still in the 13th rank [12].
using virtual DOM to maximize efficiency, server-side
rendering for some implementations, and can be customized The second data source to compare the front-end
[9]. framework for this paper is npm daily front-end framework
download [13]. Npm is an online repository for publishing of
4) Vue.js open-source Node.js projects. It has been used by more than 4
Vue.js is a framework library that can be used as an million developers on worldwide, and npm front-end
addition to interactive behavior and functionality to any places framework download (Fig. 2) reflects the popularity of the
that can be run by JavaScript. It can be used for simple tasks project developed by developers.
such as making individual webpages and complex tasks such
as providing foundation for enterprise application [10].
5) Next.js
Next.js is a framework library that can be used to give
React functionality’s structure. It can also be used to identify
and reload modified files, give advantage of using component-
specific styles, and loads JavaScript modules and Reacts
components [11].
III. METHODOLOGY
A. Experimental Methodology
For the next section, this paper will begin to analyze
performance, user interaction, DOM and much more on each
front-end framework. The goal is to help beginners to
choosing the right framework for development. Therefore,
this paper will build a Realworld web application using the Fig. 2. Npm downloads of every frontend framework
different front-end frameworks to know the advantages and
the disadvantage of the framework. finally, this paper will The data was taken from December 2021 to December
evaluate whether to validate each framework based on the 2022. The number of Vue.js downloads is already over
results obtained [3]. 30,000,000 and become first place between other frameworks.
React.js download is rated second place with over 15,000,000
B. Front-end Framework Selection downloads about 1/2 that of Vue.js downloads. while other
The survey team on JavaScript has invite tons of frameworks such as next.js and angular are still below the
developers since 2016 to participate in a survey regarding the average is about 3,000,000 downloads this year [14].
framework and libraries. From the survey, will get an idea
about communities and ecosystems to know which front-end C. Realworld Application
framework that developer must choose. Result of this survey Realworld application (Fig. 3) is a case study of a web-
was chosen in this paper because developer can know more based application which has the main features in doing CRUD
about the most popular frameworks available currently based (Create, Read, Update and Delete) To-do or usually called the
on ideas from thousands of developers around the world [3]. Todolist App and features display photo gallery. In this
Survey in 2020 there were 23,000 more respondents from 137 Realworld application, it will be developed using 3 different
countries, the survey covered ten types of frameworks or frameworks namely React.js, Vue.js and Next.js. Each
libraries. framework will be given the same data and use each method
to produce the same result exactly.

Fig. 1. Satisfaction usage ratio rankings from State of JavaScript Surveys

since 2016–2021. Fig. 3. Realworld application overview

From Fig. 1, React.js is front-end framework with the 1) Building with React.js
highest level of usability and followed by Angular and Vue.js In general, in developing this Realworld application,
in the 2021 usage rate ranking. React.js, Angular, and Vue.js React.js is not it's difficult to develop this app because react.js
are also quite stable since 2016 because it always in tops the is basically a library with limited features so react.js requires
top 3 until 2021. In addition to the framework above there are third party libraries such as react.js-hooks for data
still many frameworks that don't make it into the top 10, one management, as well as a library for content rendering to a
of them is Next.js. Next.js is a framework introduced in 2016. DOM (document object model) that can be controlled
As technology develops, it becomes sufficient Good at effectively. In this section will discuss how to build the

Authorized licensed use limited to: MULTIMEDIA UNIVERSITY. Downloaded on January 24,2024 at 20:03:42 UTC from IEEE Xplore. Restrictions apply.
82
2023 3rd International Conference on Electronic and Electrical Engineering and Intelligent System (ICE3IS), 9-10 August 2023

Realworld Application using React.js. First, install create- Todolist Component

react-app from npm or yarn and use create-react-app to
import List from '../List/List';
generate a initial React.js project template in the terminal. List Component
<Container>
Main Page Component {todo.map((item, index) => (
<TodoContainer key={index}>
<input
import Todo from './Components/Todo/Todo';
type="checkbox"
id={index}
Todolist Components onClick={() => checkToggle(index)}
/>
<label for={index} className={item.status ? 'active' : null}>
<Container> {item.text}
<h1>TODOLIST</h1> </label>
<InputContainer onSubmit={submitHandler}> </TodoContainer>
<input type="text" ref={inputRef} /> ))}
<button type="submit">+</button> </Container>
</InputContainer>
<List todo={todo} setTodo={setTodo}></List>
<Info> Then, delete each todo by changing the status from false
<p> to true of the todo using the useState function that created
{todo.filter((item) => item.status === true).length} of earlier, namely setTodo. But, don't forget to also configure
{todo.length}
tasks done
todo id that want to change.
</p>
<button onClick={RemoveChecked}> </button>
let checkToggle = (id) => {
</Info>
let newTodo = [...todo];
</Container>
newTodo[id].status = !newTodo[id].status;
setTodo(newTodo);
};
Data management for storing Todo data in react.js will use
one of the features of react.js hooks, namely useState. useState But in this function only change todo status and not actualy
include 2 parameter variables, namely data value and set data delete the todo so simply create another function to delete all
value. todo that have true status.

let RemoveChecked = () => {

import React, {useState} from 'react.js'; let newTodo = todo.filter((item) => item.status === false);
let [todo, setTodo] = useState([]); setTodo(newTodo);
document.querySelectorAll('input').forEach((item) =>
(item.checked = false));
If user want to insert new todo, simply combine between };
ref variable and useState function to store the data. To store
the data, program will automatically call function when user That’s all for todolist feature and now time to create
submitted. another feature namely image gallery. For image gallery,
literally import image from local file and display using html
img tag.
let submitHandler = (e) => {
e.preventDefault();
if (!inputRef.current.value) return; import image from './Assets/background.webp';
<img
setTodo((prev) => { src={image}
return [ width={300}
...prev, height={300}
{text: inputRef.current.value, status: false, id: +new Date()}, alt="wallpaper"
]; />
});
}; This is an example for display image using react.js. But, if
developer need more than 1 image, feel free to add more img
tag with difference src value.
This function is used to store user input todo, todo status
2) Building with Vue.js
(start from false) and todo id in useState variable. Next to
Vue.js is different from React.js. Vue.js is equipped with
display todolist that user input all the time, simply use another
features own data management so that it can be used without
component namely list. First, import list components to
downloading other third-party libraries to develop this
todolist components.
Realworld Application. First, install @vue.js/cli and create
project using npm or yarn in the terminal. Same as react.js,
vue.js also a component-based framework that can separate
out to multiple smaller components, so in vue.js only need to
separate our list file.

Authorized licensed use limited to: MULTIMEDIA UNIVERSITY. Downloaded on January 24,2024 at 20:03:42 UTC from IEEE Xplore. Restrictions apply.
83
2023 3rd International Conference on Electronic and Electrical Engineering and Intelligent System (ICE3IS), 9-10 August 2023

Main Component To access our data management variables, simply use

“this” keyworld before variable name. For example, to change
<script> todo file simply write following code.
import List from './components/Todo.vue';
export default {
this.todo = this.todo.filter((item) => item.status === false);
components: { List }
};
</script>
For add todo, remove todo, and other function for todolist
feature use the same logic but a bit different syntax. To create
List Component image gallery in vue.js simply import image from local file
inside script tag and store all image in our data management
<div class="Container"> can use it in html template tag.
<div class="TodoContainer" :key="index" v-for="(item, index) in
todo">
<input type="checkbox" :id="index" @click="setData(index)" /> import image from './assets/background.webp';
<label :for="index" :class="item.status ? 'active' : null"> export default {
{{ item.text }} data() {return {image}}
</label> }
</div>
</div> 3) Building with Next.js
Building using next.js is literally the same while using
Keep in mind that vue.js still using HTML based template so React.js because next.js is an improvement technology from
in vue.js can simply style inside the style tag. react.js library. So, in general, building Realworld
applications is the same, but this section will explore next.js
<style scoped> new feature that does not include in react.js library feature.
img {
object-fit: cover; First, in next.js have maximize SEO (Search Engine
} Optimization) feature that vue.js and react.js cannot do that.
.imgContainer { To maximize SEO, use technology namely SSR (Server-Side
display: grid; Rendering) or SSG (Server-Side Generation). SSR is a
grid-template-columns: repeat(auto-fit, 300px);
}
program that will render our page before the browser displays
</style> it to client. So, while displaying it to client, our website is
already having fully html tag in head and body tag that can
Also for data management don’t neet to import from external boost our SEO value. The difference when using react.js and
vue.js (Fig. 4) is although the result is same as next.js (Fig. 5),
like react.js use Usestate. In vue.js can simply add “data”
but UI displayed use react.js and vue.js framework is render
function in script export default object. in client side so in initial render website using react.js and
vue.js framework do not have fully html tag in body tag and
export default {
data() { that is very impactful for SEO.
return {todo: [id: 1, text: 'todolist - 1', status: false},{id: 2, text:
'todolist - 2', status: false}]}
}
}

And for several function to add todo to data management or

delete todo, simply inset to “method” function in script export
default object

export default {
methods: {
Fig. 4. React.js and Vue.js initial render code
setData(index) {
let todoList = [...this.todo]; todoList[index].status =
!todoList[index].status; this.todo = todoList;
},
addTodo(event) {
if (!event.target.querySelector('input').value) return;
this.todo = [
...this.todo,
{ id: +new Date(),text: event.target.querySelector('input').value,
status: false,
},
]; Fig. 5. Next.js initial render code
},
RemoveChecked() {.todo = this.todo.filter((item) => item.status export const getStaticProps = async () => {
=== false)} return {
}, props: {
} initialData: [{text: 'Jason', status: false, id: 1},{text: 'Toni', status:
false, id: 2}
]}}};

Authorized licensed use limited to: MULTIMEDIA UNIVERSITY. Downloaded on January 24,2024 at 20:03:42 UTC from IEEE Xplore. Restrictions apply.
84
2023 3rd International Conference on Electronic and Electrical Engineering and Intelligent System (ICE3IS), 9-10 August 2023

In next.js, if developer want to create SSR simply create a TABLE II. AVERAGE SPEED INDEX USING FRONT-END FRAMEWORKS
FOR REALWORLD APPLICATION USING LIGHTHOUSE
function in main page namely “getStaticProps” and also need
to export it as asynchronous function. Inside the function that Test Front-end Framework
return properties for initial render. In this situation only need Attemp React.js Vue.js Next.js
to return our initial todo data to our data management
1 0.9s 1.1s 0.8s
(useState).
2 0.8s 1.1s 0.8s
Second, in Next.js have a nice feature for display image in
our website namely Image Compressor. Next.js can auto 3 0.8s 1.1s 0.8s
compress our image in website and change image type to 4 0.8s 1.1s 0.8s
Webp so image that have high size can way smaller and
increase website performance. Here is how to create auto 5 0.8s 1.1s 0.8s
image compressor in Next.js. Average 0.82s 1.1s 0.8s

import Image from 'next/image';

<Image In lighthouse analysis, again and again can conclude that
src={image} next.js provides the best speed index because of Image
width={300} compressor feature which causes the image load time to be
height={300} much faster, React.js is also very good with score of 0.82s and
/>
in the last position is vue.js which continues to be consistent
with lowest speed index.
To create auto image compressor in Next.js, first need to
import special tag from Next.js Framework namely “Image”, TABLE III. AVERAGE TIME TO INTERACT USING FRONT-END
then simply create Image tag and add properties like regular FRAMEWORKS FOR REALWORLD APPLICATION USING LIGHTHOUSE
img tag from HTML. But in Image tag, must add 2 more
Test Front-end Framework
properties namely “width” and “height” to determine height
Attemp React.js Vue.js Next.js
and width of the image.
1 1.5s 1.1s 1.5s
IV. DATA ANALYSIS
2 1.1s 1.2s 1.5s
In this section, a Realworld application that build with
difference front end frameworks will differ in comparison 3 1.1s 1.1s 1.2s
based on performance, speed index and interactive time using 4 1.3s 1.1s 1.5s
lighthouse application that provide from chrome extension
and manual analysis from website inspect [14]. This paper 5 1.3s 1.1s 1.5s
also provide insight about front-end framework and give a Average 1.26s 1.12s 1.44s
recommendations for developers to choose a framework that
suitable for their development project.
Time for interaction with the user is the total time required
A. Networking Realworld Application
by the website to be fully interactive. this is a important part
1) Performance because some websites still prioritize visibility content over
When measuring performance on each framework, this interactivity. This will be a big problem if website is
paper will use lighthouse to measure it for 5 attempts and the completely loaded but when user tries to interact with our
result will be shown in Table 1 to Table 4. website and they don’t get any response. React.js and Vue.js
are in moderate range, which is from 1.1 to 1.3s. Otherwise,
TABLE I. AVERAGE PERFORMANCE USING FRONT-END Next.js are slower than React.js and Vue.js and the average
FRAMEWORKS FOR REALWORLD APPLICATION USING LIGHTHOUSE
time is 1.44s. React.js and Vue.js can provide users a pretty
Test Front-end Framework good interactive experience.
Attemp React.js Vue.js Next.js
2) Line of Code
1 88 75 100 This paper will use the Cloc third library to calculate total
2 75 75 100 lines of codes. Cloc can count total lines of code in src folder
of each front-end framework without comment line and blank
3 88 75 99 lines [15]. Total line of code can indication that how concise
4 88 75 99 a given library/framework/language is.
5 87 75 99 TABLE IV. TOTAL LINE OF CODE FROM 3 DIFFERENT FRONT-END
FRAMEWORK USING CLOC CODE STATISTIC TOOL
Average 85.2 75 99.4
Front-end
Total Line of Code
Framework
If analyze the results of Lighthouse analysis, the conclude React.js 263
that next.js provides the best performance because of SSR and Vue.js 231
Image compressor, React.js is also very good with score of
85.2 and in the last position is vue.js which continues to be Next.js 269
consistent with not high performance.

Authorized licensed use limited to: MULTIMEDIA UNIVERSITY. Downloaded on January 24,2024 at 20:03:42 UTC from IEEE Xplore. Restrictions apply.
85
2023 3rd International Conference on Electronic and Electrical Engineering and Intelligent System (ICE3IS), 9-10 August 2023

Total lines of code indicates how concise the code is After conducting this research, it became evident that each
written for run realworld applications using a different front- front-end framework brings its unique advantages and
end framework. This fact shows that Vue.js is a very well characteristics, catering to developers' varied needs in website
packaged and can provide same functionality with other front- projects. However, this study possesses certain limitations.
end framework but fewer lines of code, whereas React.js and The 'Realworld' application, though insightful, represents a
Next.js have a similar level of code simplicity. relatively simple web project, and the performance of these
frameworks may differ with more complex applications. For
3) Package Size the future research, we can augment this study by introducing
Packages with a smaller size can speed up the download more intricate web projects and including other emerging
time, the way to find out the size of the package is to look at front-end frameworks. This would provide a broader
the total size in the node_modules folder because all the code understanding of their capabilities and performance nuances.
is listed in package.json stored in node_modules.
REFERENCES
TABLE V. TOTAL PACKAGE SIZE FROM 3 DIFFERENT FRONT-END
FRAMEWORK. [1] D. A. Rauschmayer, Speaking JavaScript: An In-Depth Guide for
Programmers, California: O’Reilly Media, 2014.
React.js 280mb [2] C. Fu, "Exploration of Web front-end development technology and
optimization," Atlantis Press, pp. 166-169, 2016.
Vue.js 63.3mb [3] M. Kaluža, K. Troskot and B. Vukelić, "COMPARISON OF FRONT-
END FRAMEWORKS FOR," Zbornik Veleučilišta u Rijeci, vol. 6, no.
Next.js 148mb
1, pp. 261-282, 2018.
[4] D.-P. P. a. A. Altar, "Designing an MVC Model for Rapid Web
Application," Procedia Engineering, vol. 69, pp. 1172-1179, 2014.
Result of searching for package or package.json size to
[5] R. Vyas, "Comparative Analysis on Front-End Frameworks,"
implement in realworld applications using 3 front-end International Journal for Research in Applied Science & Engineering
libraries in the npm registry addressed are shown in Table 5, Technology, vol. 10, no. VII, pp. 298-307, 2022.
where the size obtained is dependencies or third party libraries [6] E. Molin, "Comparison of Single-Page Application Frameworks : A
that are used and registered inside package.json. Package size method of," KTH ROYAL INSTITUTE OF TECHNOLOGY,
comparison the fact that React.js and Next.js support includes Sweden, 2016.
a greater spectrum of functionality, while Vue.js are created [7] D. Raggett, A. L. Hors and I. Jacobs, HTML 4.0 Specification,
for much more efficient development that more suitable for Cambridge: w3c, 1998.
small projects. [8] L. Groner, Learning JavaScript Data Structures and Algorithms: Write
complex and powerful JavaScript code using the latest ECMAScript,
V. CONCLUSION 3rd Edition, Birmingham: Packt Publishing Ltd, 2018.
[9] Z. Dinku, "React.js vs. Next.js," Metropolia, Finland, 2022.
Through our exploration of three distinct front-end [10] E. Hanchett and h. Listwon, Vue.js in Action, New york: Simon and
frameworks, we have gained a deeper understanding of their Schuster, 2018.
performance nuances, especially in the context of 'to-do list' [11] Y. Ko, H. Lee, J. Dolby and S. Ryu, "Practically Tunable Static
and 'image gallery' project types. These projects serve as Analysis Framework for Large-Scale JavaScript Applications (T)," in
representations of user interactions and simple image 30th IEEE/ACM International Conference on Automated Software
rendering. Our study meticulously analyzed the associated Engineering, 2015, 2015.
DOM operations with CRUD (create, read, update, and delete) [12] Netlify, "2021stateofjs," Netlify, 2021. [Online]. Available:
https://2021.stateofjs.com/en-US/libraries/front-end-frameworks/.
and the respective time frames for each framework. Our [Accessed 28 december 2022].
findings revealed that Next.js exhibits superior performance
[13] J. Potter, "npmtrends," uidotdev, [Online]. Available:
when compared to the other tested frameworks. React.js, on https://npmtrends.com/. [Accessed 28 december 2022].
the other hand, does not achieve the speed of Next.js, [14] G. Developers, "Tools for Web Developers," Lighthouse, [Online].
primarily because it invests significant time in diverse DOM Available: https://developer.chrome.com/docs/lighthouse/overview/.
operations. This apparent latency in React.js can be attributed [Accessed 2 january 2023].
to its emphasis on optimizing JavaScript dynamics over [15] A. Danial, "cloc," Github, August 2006. [Online]. Available:
accelerating the Diff Virtual DOM. Meanwhile, Vue.js https://github.com/AlDanial/cloc. [Accessed 3 January 2023]
demonstrated average speed performance.

Authorized licensed use limited to: MULTIMEDIA UNIVERSITY. Downloaded on January 24,2024 at 20:03:42 UTC from IEEE Xplore. Restrictions apply.
86