2023 International Conference on Computational Intelligence, Communication Technology and Networking (CICTN)

Analyzing the difference between ReactJS and

AngularJS
2023 International Conference on Computational Intelligence, Communication Technology and Networking (CICTN) | 979-8-3503-3802-7/23/$31.00 ©2023 IEEE | DOI: 10.1109/CICTN57981.2023.10141276

Tarun Sharma Shruti Gupta Uday Raj Singh

Student, CSE Department ABES Professor, CSE Department ABES Student, CSE Department ABES
Engineering College Engineering College Engineering College
Ghaziabad, UP, India Ghaziabad, India Ghaziabad, India
tsharma100401@gmail.com shruti.gupta@abes.ac.in udayrajsingh0718@gmail.com
B. Research Objective
Abstract— There is a large demand for front-end To analyze the difference between two frontend
technologies. Many Frontend frameworks are available, but the
frameworks that is ReactJs and AngularJS based on different
two most used frontend frameworks are ReactJS and
parameters like popularity, learning curve, SEO, and
AngularJS. So, there is so much hassle in choosing the suitable
framework for a particular project. Developers want the best performance. And find out the best framework for a particular
framework to design the UI of the web pages and make web condition. With the help of this research, developers can
pages attractive. So, it is required to identify the best framework decide which framework is better for a particular project or
for a particular project. A better frontend framework leads to a client's requirements [15].
better webpage or better user experience will indirectly help an C. Scope Of Study
organization’s growth. For this analysis, we will build a
frontend webpage in both the frameworks and then use the We can use this project to analyze the difference between
google developer tool to analyze the performance of both any framework with other frameworks and can decide which
webpages built in React and Angular. We will compare both framework is better for a particular project for programmers
frameworks based on various parameters like popularity, or an organization. We are using this project for only frontend
learning curve, SEO, and performance. This will give the final frameworks but in the future, we can also implement this
results and help us to decide which frontend framework is best project to differentiate between the backend frameworks also
for developers for a particular project. and the best frontend and backend combination for
programmers and students.
Keywords—ReactJS, AngularJS, frameworks, Stack, UI, UX,
SEO. II. LITERATURE REVIEW

I. INTRODUCTION A. Supporting web development decisions by comparing

three major javascript frameworks: Angular, react, and
There was a time when developers use JavaScript, CSS,
vue.js - E Wohlgethan – 2018.
and HTML(hypertext markup language) to build the front end
of web applications, but this trend is no longer sufficient. The three Popular frameworks that are most in demand are
Nowadays, many frameworks are available for building the Angular, React, and Vue.js, which are discussed in this thesis.
web application's front end. JavaScript is one of the most used Each of them will be looked at and judged in accordance with
programming languages in the world and has more than 50 predetermined standards. Then this research will provide the
front-end frameworks. The most trending frameworks used by best technology for developers. [1].
developers are ReactJS and AngularJS, developed by B. JavaScript Frameworks: Angular vs React vs Vue - E
Facebook and Google respectively. ReactJS is a JavaScript Saks - 2019
library but AngularJS is a JavaScript framework.
The purpose of this study was to examine the three best-
These days web applications are the most important part known JavaScript frameworks in terms of performance,
of any organization or business and web applications must be learning curve, and popularity so that the reader may choose
responsive, load quicker, and be interactive. So, choosing the the best framework for their project based on knowledge[2]
best framework is a very important thing to do before going to
build a web application[8]. C. Web application performance analysis using angular,
react, and vue.js framework – Konrad Bielak, Borek -
The two most trending stacks in the web development 2022
industry are MERN and MEAN stacks. For clients and big
enterprises, developers suggest using web stacks like MERN The task is to do a performance study and, on the basis of
or MEAN stack. With the help of these web stacks, developers the results, to suggest the quickest and most user-friendly
can build complex web applications very fast and effectively. operating framework. To evaluate the speed of operation of a
As a result, it can be said that the top clients' requirements few technologies, three Internet apps have been created. [3].
have supported and increased web development's D. Comparative analysis of AngularJS and ReactJS - A
advancement[5]. Kumar, RK Singh – 2016
A. Problem Statement AngularJS and React.js are the most used JavaScript
There is so much hassle in choosing a suitable frontend frameworks in web development. Both frameworks are used
framework to build a web application because there are many to build an interactive single-page application. This research
JavaScript frameworks. Developers get confused about which paper helps in understanding AngularJS and ReactJS[4].
framework is best for their project requirements, to decrease
this issue we will analyze both frameworks and identify the
best one for that suitable project.

979-8-3503-3802-7/23/$31.00 ©2023 IEEE 37

Authorized licensed use limited to: MULTIMEDIA UNIVERSITY. Downloaded on January 24,2024 at 19:49:17 UTC from IEEE Xplore. Restrictions apply.
 2023 International Conference on Computational Intelligence, Communication Technology and Networking (CICTN)

III. PROPOSED METHODOLOGY but there are the two most used frameworks that developers
We are building the same frontend web page with the help prefer are:
of each framework and trying to analyze the difference a) ReactJS (JS Library)
between both web pages with the help of the google developer b) AngularJS (JS Framework)
tool i.e. Lighthouse. The purpose of this research is to show There is a difference between the library and the
the potential strengths and weaknesses of each framework so framework. A framework contains a lot of APIs, compilers,
that readers can make an informed decision when choosing and libraries. On the other hand, the library contains helper
between them. To achieve this, frameworks are compared in modules, classes, objects, functions, and pre-written code. A
various categories: popularity, learning curve, SEO, and framework is difficult to replace but a library can be easily
performance. replaced by another library. Fig 1 shows the relationship
A. Popularity between library and frameworks[7].
Framework popularity is a very important point to be
considered because it shows how much a framework is
famous among programmers and organizations. Popularity
gives us an idea that how many users are there for a particular
framework. The evaluation of popularity is done by collecting
and analyzing data from leading cloud platforms related to
software development such as GitHub, NPM Trends, and
Stack Overflow[9].
B. Learning Curve
The framework learning curve is the best point to figure
out the difference between any framework because it shows
us the difficulty level of the framework and how much time it Fig. 1. Library v/s Framework
will take to learn that framework for programmers. By
comparing the syntax, architecture, data management, A. ReactJS
longevity, and simplicity of using third-party libraries of the ReactJS is an open-source frontend JavaScript library and
framework, the learning curve would be evaluated. The it is used to make the user interface of the single-page web
information required for that will be acquired using the application. React was created by Jordan Walke, a software
technical documentation for each framework [2]. engineer at Facebook. React was open-sourced in May 2013.
ReactJS is based on UI components. ReactJs is used to create
C. SEO (Search Engine Optimization)
single-page web applications. A single-page application is a
Search engine optimization is the process that improves web application in which page reload never occurs, which
the quality and quantity of webpage traffic of a web means if a user wants to open another web page, then the
application to increase its visibility on the search engine. In whole page will not reload instead, it will retrieve that page
other words, if the search engine optimization score is higher with a single page load[5].
for a web application, then it will be displayed higher in the
search engines. And that web application will receive more React is made up of components and these components
traffic[6]. can be written in two ways: components as a function and
components as an ES6 class. React doesn't use any specific
D. Performance template language it uses JSX extension which is basically
The performance of a web application refers to how fast a HTML code enriched with JavaScript code. And there is a
web browser can load and display a website's information, as need for a compiler that converts this JSX code to simple
well as how efficiently it reacts to user input. Poorly JavaScript code[8].
functioning websites take a long time to display and react to
B. AngularJS
user interaction. To evaluate framework performance, we
build a small application in each framework with the same UI AngularJS is an open-source frontend JavaScript-based
and content. Then measured the performance of both framework, used to build the single-page web application user
webpages using Google Chrome developer tools i.e. interface. AngularJS is developed by Google employees
Lighthouse. There are different parameters for performance Misko Hevery and Adam Abrons in 2008. AngularJS is used
like page load time, speed index, total blocking time, first to make single-page web applications. Angular has two
contentful paint, and largest contentful paint [1]. versions, 1st version is known as AngularJS and 2nd version
is known as Angular 2. Angular is used to make complicated
IV. JAVASCRIPT FRAMEWORKS and fast web applications. Nowadays Angular is used to build
JavaScript was rolled out as a scripting language in 1995 web applications, mobile applications, and desktop
when the world wide web was just introduced in the market. applications.
The main objective of JavaScript was to build more dynamic Angular uses Typescript as the main development
web applications and perform functional programming. language. Typescript is then converted into simple JavaScript
According to the data, 98% of web applications are made with at compile time. Angular is also a component-based
JavaScript. Every browser has a dedicated JavaScript engine framework. Angular components contain three parts: A
to run JavaScript on the client side[12]. JavaScript can also be HTML template file, a CSS file, and a TS file[5].
used for server-side website deployments. There are many
frameworks available to build the UI of the web application

38
Authorized licensed use limited to: MULTIMEDIA UNIVERSITY. Downloaded on January 24,2024 at 19:49:17 UTC from IEEE Xplore. Restrictions apply.
 2023 International Conference on Computational Intelligence, Communication Technology and Networking (CICTN)

V. IMPLEMENTATION ReactJS Main HTML Template

In this section design, implementation, and functioning of
import React from "react";
the Interior Design web application are discussed. We have
import img from "../assests/photos/img-1.png";
created similar frontend of an Interior Design web application
export default function About() {
with the help of ReactJS and AngularJS frameworks. We have
return (
used the following technologies:
<div className="about_section" id="about">
a) HTML <div className="container">
b) CSS <div className="row">
c) JS <div className="col-md-6">
<h1 className="about_text">About Us</h1>
d) REACTJS
<p className="lorem_text">
e) ANGULARJS An online Interior Designing Website
f) VS CODE established in 2022. Choose your design according to
your house and make your own color combination When
you give your home the Livspace touch, you get both
beauty and functionality. We employ state-of-the-art
technology to ensure your home features a flawless look
that lasts a very long time.
</p>
</div>
<div className="col-md-6">
<div className="image_1">
<img src={img} />
</div>
</div>
</div>
Fig. 2. Design of Webpage </div>
</div>
);
}
ReactJS Component Template
These are the ReactJS codes of Main HTML file and
“About” component code. ReactJS framework uses .JSX
extension for components. We have used NPX command “npx
create- react-app my-app” to create the React Application and
“npm start” command to run the React application. We have
created different components like Navbar, Footer, Hero, and
Products to build the web application.
Fig. 3. Design of Webpage <!doctype html>
<html lang="en">
<!DOCTYPE html> <head>
<html lang="en"> <meta charset="utf-8">
<head> <title>INTERIOR DESIGNS</title>
<meta charset="utf-8" /> <base href="/">
<meta http-equiv="X-UA-Compatible" <meta name="viewport" content="width=device-width,
content="IE=edge"> initial-scale=1">
<meta name="viewport" content="width=device- <link rel="icon" type="image/x-icon"
width, initial-scale=1" /> href="favicon.ico">
<link rel="icon" <link
href="%PUBLIC_URL%/favicon.png"/> href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/c
<link ss/bootstrap.min.css"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/c rel="stylesheet" integrity="sha384-
ss/bootstrap.min.css" rel="stylesheet" integrity="sha384- 1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbr
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbr CEXSU1oBoqyl2QvZ6jIW3"
CEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
crossorigin="anonymous"> </head>
<title>Interior Designs</title> <body>
</head> <app-root></app-root>
<body> </body>
<noscript>You need to enable JavaScript to run this </html>
app.</noscript>
<div id="root"></div>
AngularJS Main HTML Template
</body>
</html>

39
Authorized licensed use limited to: MULTIMEDIA UNIVERSITY. Downloaded on January 24,2024 at 19:49:17 UTC from IEEE Xplore. Restrictions apply.
 2023 International Conference on Computational Intelligence, Communication Technology and Networking (CICTN)

<div class="about_section" id="about">

Parameter Angular React
<div class="container">
GitHub Stars 85,518 199,432
<div class="row">
GitHub Forks 22,730 41,411
<div class="col-md-6">
GitHub Issues 1,151 891
<h1 class="about_text">About Us</h1>
<p class="lorem_text">
An online Interior Designing Website established TABLE I REACT V/S ANGULAR REPOSITORIES
in 2022. Choose your design according to your house and
make your own color combination When you give your
home the Livspace touch, you get both beauty and
functionality. We employ state-of-the-art technology to
ensure your home features a flawless look that lasts
a very long time.
</p>
</div>
<div class="col-md-6">
<div class="image_1">
<img src="../../assets/photos/img-1.png">
</div>
</div>
</div>
</div> Fig. 5. NPM Trends Data
</div>
AngularJS Component Template Fig 5 shows the NPM trends data and it also shows that
These are the AngularJS codes of Main HTML file and React is more popular than the Angular framework.
“About” component code. AngularJS framework uses
Typescript as the main development language. We have used
“ng new my-app” command to create the Angular Application
and “ng serve --open” command to run the application. We
have created different components like Navbar, Footer, Hero,
and Products to build the web application.
VI. RESULTS
We have built the same frontend webpage with the help of
both frameworks and use the Google developer tool
Lighthouse for analysing the difference between both
frameworks. These parameters are popularity, learning curve,
SEO, and performance.
A. Popularity Fig. 6. Stackover flow questions that year
We have collected the data from GitHub, NPM trends, and
Stackoverflow trends. And the results are given below: Fig 6 shows the Stackoverflow data and also shows that
React has more percentage of questions asked per year as
compared to Angular. That means programmers or students
are asking more questions about react framework because
there is a greater number of react users[6].

Fig. 7. React v/s Angular Google Searches

Fig. 4. Angular v/s React GitHub Repository Fig 7 shows Google trend data and shows that React is the
more searched framework than Angular.
According to the GitHub trend data, React repository is
more popular than the Angular repository. As you can see the
difference between the total stars for both the repository.
There is a table given below which shows the total data
about both the repository[9].

40
Authorized licensed use limited to: MULTIMEDIA UNIVERSITY. Downloaded on January 24,2024 at 19:49:17 UTC from IEEE Xplore. Restrictions apply.
 2023 International Conference on Computational Intelligence, Communication Technology and Networking (CICTN)

B. Learning Curve S Result Test Test Test Test Test AVG.

No. Parameter 1 2 3 4 5
By comparing the syntax, architecture, data management, 1 First
longevity, and simplicity of using third-party libraries of the Contentful 0.5s 0.5s 0.5s 0.5s 0.5s 0.5s
framework, the learning curve will be evaluated. The Paint
information required for that will be collected using the 2 Time to
instruction manuals for each framework[12]. Interactive 1.5s 1.4s 1.5s 1.5s 1.5s 1.48s
3
Angular uses HTML and Typescript. Typescript is an Speed 0.9s 0.6s 0.7s 0.6s 0.6s 0.68s
open- source programming language that is converted into Index
JavaScript at compilation time. Angular uses an HTML 4 Total 80m 70m 90m 80m 80m
Blocking s s s s s 80ms
template and all HTML tags are valid in angular. Angular has Time
two-way data binding and uses regular DOM. 5 Largest
Contentful 1.8s 1.7s 1.8s 1.8s 1.8s 1.78s
React uses JSX code which is a JavaScript syntax Paint
extension and JSX is made up of HTML and JavaScript. JSX 6 Cumulative 0 0 0 0 0 0
is used to build the components in react. React has one-way Layout
data binding and uses virtual DOM[12]. Shift

As Angular uses Typescript so it is difficult to learn as TABLE IV ANGULAR PERFORMANCE PARAMETERS

compared to React because react only uses HTML and
Javascript. And the architecture of Angular is also a little bit
AngularJS
complicated compared to React framework. S Result AVG.
Test Test Test Test Test
C. SEO (Search Engine Optimization) No. Parameter 1 2 3 4 5
1 First
If the search engine optimization score is higher for a web Contentful 2.6s 2.7s 2.5s 2.6s 2.5s 2.06s
application, then it will be displayed higher in the search Paint
engines. We have used the Google developer tool lighthouse 2 Time to 3.0s 3.4s 3.0s 3.6s 3.0s 3.2s
to check the SEO score of both web pages built with the help Interactive
3 Speed 2.6s 2.7s 2.5s 2.6s 2.5s 2.58s
of Angular and React frameworks[10].
Index
4 Total
TABLE II SEO SCORE Blocking 120 190 130 150 120 142ms
Time ms ms ms ms ms
Framework SEO
Scores 5 Largest
Angular 80 Contentful 3.8s 4.2s 3.7s 3.8s 3.7s 3.84s
React 70 Paint
6 Cumulative
Layout 0 0 0 0 0 0
As the result shows Angular has better search engine Shift
optimization as compared to react framework.
TABLE V PERFORMANCE SCORES
D. Performance
We have used the Google developer tool Lighthouse to test Test Overall
Performance
the performance of both web pages built with the help of Score
angular and react frameworks and analyze the difference ReactJSAngularJS
between them. We have tested the webpages 5 times through 1 92 62
lighthouse and taken the average of them. 2 91 55
3 93 61
4 92 60
5 92 62
AVG.92 60

As per the table below, the performance scores of React

framework is greater than Angular framework. React has high
performance score.
VII. DISCUSSION
In this project, we are doing an analysis on the difference
between two most used frontend frameworks that is React and
Angular. We have decided some parameters through which
we will conclude which framework is better in different
conditions. These parameters are popularity, learning curve,
SEO(Search Engine Optimization), and performance. We
Fig. 8. Angular score v/s React score have searched which framework is most popular among
developers and which framework has a high number of
TABLE III REACT PERFORMANCE PARAMETERS users[10]. Then we checked the documentation of both
frameworks and analyzed the syntax, architecture and learning
ReactJS curve of both frameworks and find out which framework is
easy to learn for developers and which one has high learning

41
Authorized licensed use limited to: MULTIMEDIA UNIVERSITY. Downloaded on January 24,2024 at 19:49:17 UTC from IEEE Xplore. Restrictions apply.
 2023 International Conference on Computational Intelligence, Communication Technology and Networking (CICTN)

curve. Then we checked the SEO of both web pages with the [13] Delcev, S., & Draskovic, D. (2018, May). Modern JavaScript
help of the lighthouse google developer tool[6]. To check the frameworks: A survey study. In 2018 Zooming Innovation in
Consumer Technologies Conference (ZINC) (pp. 106-109). IEEE.
performance, we have used the google developer tool
[14] Fat, N., Vujovic, M., Papp, I., & Novak, S. (2016, June). Comparison
lighthouse which gives us various parameters like web page of AngularJS framework testing tools. In 2016 Zooming Innovation in
load time, speed index, total blocking time etc. which Consumer Electronics International Conference (ZINC) (pp. 76-79).
concluded the overall performance of both webpages build IEEE.
using angular and react frameworks[4]. [15] Ferreira, J. (2018). A javascript framework comparison based on
benchmarking software metrics and environment configuration
VIII. CONCLUSION (Doctoral dissertation, Masters dissertation, DIT, 2018.
In this research paper, our main objective is to differentiate
between react and angular frameworks and find out which one
is best. We have used NPM trends, Google trends,
Stackoverflow trends, and Github Data for comparing the
popularity and found that React framework is more popular
than Angular framework among developers. Then we have
analysed the documentation and syntax of both framework
and found that react is little bit easy to learn because react uses
JSX and it is made of HTML and JavaScript, but on the other
hand Angular uses Typescript which is hard to learn as
compared to JSX. Then we have used Google developer tool
Lighthouse for SEO scores and Performance scores. In SEO
scores Angular beats the Reacts framework. Angular has
higher SEO score than React which makes Angular a better
search engine-optimized framework. Now we have tested
performance scores and the performance of react is higher
than angular framework[11]. It is difficult to say that this
framework is best because every framework has its
advantages and disadvantages but we can say that if
developers want easy to learn and high performance
framework than react is best but if developer wants to develop
a large complicated web application than angular is best as its
SEO score is also good as compare to the react[6].
REFERENCE
[1] Wohlgethan, E. (2018). Supportingweb development decisions by
comparing three major javascript frameworks: Angular, react and vue.
js (Doctoral dissertation, Hochschule für Angewandte Wissenschaften
Hamburg).
[2] Saks, E. (2019). JavaScript Frameworks: Angular vs React vs Vue.
[3] Bielak, K., Borek, B., & Plechawska-Wójcik, M. (2022). Web
application performance analysis using Angular, React and Vue. js
frameworks. Journal of Computer Sciences Institute, 23, 77-83.
[4] Kumar, A., & Singh, R. K. (2016). Comparative analysis of angularjs
and reactjs. International Journal of Latest Trends in Engineering and
Technology, 7(4), 225-227.
[5] Aggarwal, S., & Verma, J. (2018). Comparative analysis of MEAN
stack and MERN stack. International Journal of Recent Research
Aspects, 5(1), 127-132.
[6] Kaluža, M., Troskot, K., & Vukelić, B. (2018). Comparison of front-
end frameworks for web applications development. Zbornik
Veleučilišta u Rijeci, 6(1), 261-282.
[7] Vyas, R. (2022). Comparative Analysis on Front-End Frameworks for
Web Applications. International Journal for Research in Applied
Science and Engineering Technology, 10(7), 298-307.
[8] Voutilainen, J. (2017). Evaluation of Front-end JavaScript Frameworks
for Master Data Management Application Development.
[9] Molin, E. (2016). Comparison of Single-Page Application
Frameworks: A method of how to compare Single-Page Application
frameworks written in JavaScript.
[10] Madhuri A. Jadhav et al, “Single Page Application using AngularJS”,
International Journal of Computer Science and Information
Technologies, Vol. 6 (3) , 2015, 2876-2879 [10] Comparison of single-
page application frameworks - Molin, Eric – 2016
[11] Xu, W. (2021). Benchmark Comparison of JavaScript Frameworks
React, Vue, Angular and Svelte.
[12] Drobyazkin, R. S., & Dmitrienko, N. A. (2021). COMPARISON OF
ACTUAL JAVASCRIPT FRAMEWORKS FOR DEVELOPING
WEB- APPLICATIONS.

42
Authorized licensed use limited to: MULTIMEDIA UNIVERSITY. Downloaded on January 24,2024 at 19:49:17 UTC from IEEE Xplore. Restrictions apply.