Comparative Analysis of the Front-end Frameworks
for SPA: Angular vs React
Nghi Le
University of Helsinki, Helsinki, Finland
Email: nghi.le@helsinki.fi
Abstract — “Time is money” is a common expression
within the development. Developing web application
nowadays consist of more than just code. Frameworks are
the key to this success; it provides the developers with built-
in function to save time and money. Usage of frameworks is
a crucial technology to be successful in developing business.
However, numerous front-end development frameworks
and libraries have been released and adopted widely
amongst tech communities and research. Amongst those,
Angular and React have been emerged as two of the most
popular web technologies starting from 2017. Each of these
technologies has its own unique advanced features and
outstanding capabilities. This paper will guide us through
the differences in strengths and weaknesses of these
frameworks, which in turn will provide us good insights on
their pros and cons depending on what type of web and
mobile applications development project.
Keywords—Angular, React, JavaScript frameworks,
software architect, software quality, single-page applications
I. INTRODUCTION
Consumers are more and more reliant on digital services
accessible via mobile and web-based applications. These
applications comprise mainly of 2 components: frontend and
backend. Front-end also known as the client, includes the
browser and the mobile app client. Meanwhile, the back-end
includes all the functionalities that are available on the server
(database, authorizations, authentications, etc.)
This paper focuses mainly on the frontend side, where all of
the best user experience, as well as user satisfaction, reside. The
demand is so high that there is a growing area of new
frameworks, platforms, and IDE tools that supports all aspects
of client-side development life cycles. In addition to that, with
the arrival of powerful HTML5 features, and the performance
enhancement of modern web browsers, developers now have
wider options to dictate how they can construct websites with
more sophisticated capabilities than ever before. Therefore,
choosing the right framework that fits the desired solution
becomes both a concern and a challenges for all stakeholders.
In the field of front-end development, there are several
competing frameworks and libraries. This paper focuses only on
Angular and ReactJs, which are some of the most popular
frontend frameworks until 2021. The paper focuses on 2
research questions (RQ):
RQ1: What are the comparable characteristics between
React and Angular?
RQ2: How do these characteristics differ between React
and Angular?
To answer RQ1, we will go through the following
characteristics: Data Binding, Templating, Extensibility,
Variable Observation, Routing, Testing, and other advanced
features such as Dependency Injection, Form Validation, and
Browser Support. For RQ2, We then discuss each framework
from these different aspects to analyse its usage, strengths, and
limitations from different angles versus other similar
frameworks.
II. BACKGROUND
In 2008, Google released the Chrome V8 engine which
adequately addresses the issue with HTML's rendering
efficiency and performance, which brings JavaScript to the front
with HTML5 [1]. Before the advent of Chrome V8, JavaScript’s
primary function used to be working with CSS to enhance UI
and responsible for some actions such as form validation. The
traditional compiling process, interpreting byte-code and
compiling the entire web project to execute them later from a
file system, consequently slow down JavaScript running time
tremendously compared to that of compiled languages like Java
or C++ [2].
In 2009, Node.js was released as a new development
platform combine with the V8 JavaScript engine [3]. Node.js
shifted developers’ mindset on what JavaScript can do in writing
an event-driven server-side application with simpleness [4].
The arrival of new technologies like these opened a new age
of web development, where web projects can now meet the
comparable speed as traditional desktop software. This leads to
emerging numerous front-end frameworks and libraries based
on JavaScript. Until the end of 2020, there are 5294660 React
repositories, and 1630131 Angular ones on Github. Consider
Angular has published its updated version, the paper will
combine the technical detail with Angular 1 and Angular 2. In
the following sections, the paper will focus on React and
Angular 1&2.
A. Angular
AngularJS was first launched in 2009, as part of a
commercial product, under the name of ‘GetAngluar’. It
achieved great benefits by simplifying and reducing the web
application development process. The ‘GetAngluar' project later
became open source thanks to Google's sponsor and promotions;
hence, the name "AngularJs" was coined [2][6].
The core concept of Angular1 is two-way data binding [6],
which enables web browsers to process, update and render data
dynamically on the frontend. There is almost no need for
backend involvement and user experience is also enhanced
tremendously due to low latency and high responsiveness.
However, Angular was left behind other front-end
frameworks in recent years due to many of its initial design
limitations. Being aware of that fact, the Google development
team introduced an upgraded version of Angular, which is a
complete rewrite of the old one in 2016, named Angular 2.
Angular uses ES2015 and ES2016 in addition to
‘Typescript’ as a compiler, which supports classes and module
loaders. Although Angular requires substantial effort to set up,
it provides a clear understanding of how components interact
with each other. Below are some main differences between
Angular 2 and Angular:
Firstly, Angular 2 removes template directive and controller.
It uses a new module called ‘Component’ to combine both parts
[7].
Secondly, Angular 2 adds event binding as one-way binding
from view to component which does not t in Angular 1
Figure 1. Event binding between View and Component [7].
Thirdly, Angular 2 changes its language from ‘JavaScript
Based’ to ‘TypeScript Based’, a strict syntactical JavaScript
superset developed by Microsoft [7].
B. React
React was developed by Facebook, initially in order to
enhance Facebook and Instagram applications with a better user
experience. Due to its powerful features in rendering UI
efficiency, React was released to the public in March 2013 as an
open-source JavaScript ES6 based library [8]. Later in 2015,
React Native was also launched to expand React capabilities in
the field of mobile application development [9].
Most React projects were written in ES2015, which is also
referred to as ES6. ES2015 is a pseudonym for the 2015 version
of the JavaScript programming language to be approved by
ECMA International, the standards group for vetting and
approving different versions of the language.
In essence, React mounts website content as different
components into the Document Object Model(DOM) which
then be rendered efficiently by a new browser rendering engine.
Figure 2. Mounting components in React & Re-rendering
components in React [9]
One of React’s core wisdom is creating a virtual DOM [8].
In traditional HTML websites, when the user interacts with the
UI and causes data updated, the page is rerendered entirely. This
process consumes a lot of browser resources which in turn
affects website speed performance. React tackles this problem
by creating a virtual DOM with one-way data binding. For
example, when the user navigates to another subpage, React
creates an updated virtual DOM first then compares the
difference between virtual DOM and a light-weight copy of the
original displayed DOM. This comparison ensures changing
will take place optimally (using ‘dirty checking’ or
‘observable’). As a result, the website updates faster, which
proves one of the best advantages of virtual DOM.
React also builds up a new standard in UI design and
development by enforcing developers to create UI components
under module standards. React recognizes its own reusable
components and avoids unnecessary re-rendering on the web
pages whenever these components display.
In addition, React uses JSX [10] as its programming
language, which is an extension to JavaScript that has XML-like
syntax. This approach helps business logic and component
HTML template co-locate in one file, which in turn makes
components well encapsulated and reusable in React [11].
Using React alone maybe not sufficient to build a complex
application. Other libraries may be needed to develop a fully
functional advanced application with capabilities such as API
calls, routing, dependency management, enforcing
unidirectional flows, and testing. For instance, Redux is a
library [12] that provides a single-state container that all React
components can access and manipulate.
III. COMPARABLE CHARACTERISTICS
To systematically compare the two frameworks, there are a
few points or features that we can base on them to carry out
further analysis. This analysis will provide us a high-level
overview of the selected framework as well as assist us in
making a decision on what framework to follow in our
application project.
 Language: This is a critical aspect to be considered in
deciding which frameworks to use due to their efficiency, Table 1. shows the current language-based situation
popularity, and difficulty. between different frameworks.

Data Binding: This is the essential process in the front-end

Angular 1 Angular 2 React
development of connecting the business logic with the User
Interface (UI). It is critical to present and update correct data to Language JavaScript ES5 TypeScript JavaScript ES6
dynamically reflect user interactions. When the model variables (2015)
are updated, the upper UI layer also gets updated in sync and
vice versa. The binding process takes place directly in the
HTML template, which can include other framework elements Data Binding:
such as directives, pipes, event listeners, and so on.
Table 2. shows the data binding way in each framework and
Templating: This is a process of dividing the view into
library.
smaller pieces and then render them on demand. This method
enhances code readability, maintainability as well as
reusability. For example, data can be rendered and updated Angular 1 Angular 2 React
dynamically using a complex HTML structure i.e. widgets.
Data binding Two-way One-way & two-way One-way
Dependency Injection: (also known as Inversion of
Control) is one of the most used design patterns that As can be seen from the table, React is loyal to one-way
demonstrates how to create ‘loosely coupled’ classes. In short, binding meanwhile Angular is flexible with both one-way and
they are all about removing dependencies from your code. This two-way binding. This is one of the most significant differences
practice allows the developer to easily change the class's between the two.
implementation without the need to update all other classes that
depend on the new one. Moreover, it enhances testability and
class decoupling. We can, therefore, reuse the independent
classes easily in many other contexts.

Size and Performance: A larger volume means the

framework or library contains more features and functions, but
it will spend more time loading the framework or library.

Community Support: reflects the popularity of the

framework. Angular or React are developed by big tech
companies like Facebook or Google which relies on a huge
growing developer base. This feature is one of the very good
indicators and sometimes condition for developers/businesses
in deciding on which framework they should use to build their
application.
Figure. 3. Angular 1 two-way binding [14]
Behind the scenes, React is required to handle more
sophisticated data flow compared to Angular due to its process
of checking the difference between virtual DOM and displayed
DOM.

IV. THE COMPARISION
In this section, we will go through the defined main features
of web development frameworks mentioned in the earlier
section.
Language: React uses JavaScript ES6, the latest JavaScript
industry standard from 2015, as their based language,
meanwhile, Angular 1 uses the JavaScript ES5 which is the
previous version. Angular 2, however, relies on TypeScript
which optimizes the JavaScript language structure and provides
an excellent experience of type inference which in turn reduces
various types of bugs. The advent of TypeScript, with its
declarative nature [13] in Angular provides a good opportunity
in object-oriented programming in the front-end. Despite the
fact that TypeScript possesses certain advantages over
traditional JavaScript, its developer community is still limited,
which poses a potential risk that it may disappear at some point
by other future rival languages. JavaScript ES6 is however here
to stay due to its updatability and being the industry standard.
However, Two-way data binding also possesses noticeable
drawbacks. Both model and DOM can be updated
simultaneously. The more data bindings we have, the more
observers and watchers will be needed which may affect the
performance of the application.
Using two-way to transit data between component and view
may also pose a risk of conflicting data being spread from
multi-sources, which leads to unexpected component states,
especially in event-based circumstances. This is not the case
with one-way binding.
To avoid this situation, the Angular 2 team solves the
dilemma by allowing developers to use both one-way and two-
way binding. This flexibility provides a hybrid solution to
leverage the advantages of both mechanisms.
 Figure. 4. Example of data binding in AngularJs
Figure. 5. Example of data binding in React
Templating
Angular templates are written straight from HTML which
can contain Angular elements. While defining a component, we
can refer to an HTML template by adding the template Url field
as shown in Figure. 6
Figure. 6. Example of referencing to HTML file used as
template in Angular
This way, Angular can combine all information provided
from controllers, directives, filters then render them into a
dynamic view of the user, as shown in Figure. 7
Figure. 7. Example of data binding and templating in
AngularJs
Unlike Angular, React puts HTML into JavaScript [15] as
shown in Figure. 5 while Angular puts JS in HTML template.
Instead of vaguely separating concerns by putting markup and
script code in separate files, React uses loosely coupled
“components” which includes both [jsx
https://reactjs.org/docs/introducing-jsx.html]. It embraces the
idea of rendering logic should be inherently coupled with UI
logic from events, states handling to how data is rendered. To
achieve this, React uses JSX where any valid JavaScript
expression can be put inside the curly braces. After
compilation, JSX expressions become regular JavaScript
function calls and evaluate JavaScript objects. [jsx] Besides,
ES6 added the ability to use backticks at the start and end of the
string to write inline code. String interpolation using
${expression} placeholders can be used as well inside
templating. Figure. 8 shows the usage of backticks and string
interpolation.
Figure. 8. Example of templating in Angular
Dependency Injection: Dependency Injection is one of the
best practices that facilitate clean code and reusability. With
this capability, Angular dynamically manages modules and
components dependencies referencing. This helps to avoid
coupling issues between components. On the other hand,
dependency injection is not explicitly used by React. Data,
state, or even functions are passed directly from parent to child
component via its properties. This way, they can be shared,
modified between components.
Size and Performance: Due to its advanced
comprehensive functions and features, Angular 2 has the most
significant volume of 143 kilobyte (KB) while React 16 (react
+ react-dom) is 109KB. However, complicated structure leads
to a potential risk that Angular 2’s running performance is
worse than React especially in memory allocation. Table 3
shows that Angular 2 requires more time to prepare and run
the memory.
Table 3. Front-end frameworks and library memory
allocation performance [16]
Activity Angular 2 React
Ready memory 4.8±0.0 4.5±0.1
(1.4) (1.3)
Run memory 10.9±0.1 9.7±0.1
(2.7) (2.6)
Community Support: Better support means a better
relationship with developer communities, which is a crucial
part to make a framework popular. In this regard, React
provides consistent technical support. Facebook is a huge
company that possesses a large fan base. The core team is
supporting developers all the time with bug fixes releasing and
other development tools. It does a very good job of keeping its
API stable. Official scripts are released to simplify the
development upgrade and immigration process Angular also
offers similar services. It is backed by Google, all the design
documents are shared in the community and there are various
developer tools to support it. Protractor, Batarang, ngmin, and
Zone.js are just a few of many. Its API, however, is not as stable
as that of React. One clear example is AngularJs (or Angular 1)
is totally different compared to Angular 2 or later versions. On
31st December 2021, AngularJS will hit it’s EOL.
 Recently create-react-app is a useful tool that React [2]
community released. It automatically creates all necessary
configurations to set up a new project. This speeds up new
project development by reducing the time needed for
configurations. A comparable tool in Angular is Angular
Command Line Interface (CLI), which was released in March [3]
2017. It facilitates generating Angular components, services,
enum, pipes, and classes which makes it easier to create a
project from scratch with all needed dependencies including the [4]
project best practice structure (source code, environment
variables, main and index.html, E2E testing locations). Plus, it
can build and deploy the project either for development or
production aim.
[5]
As it was the first choice for many developers, the total
numbers of followers for React are higher than that of Angular.
At the time of this writing. the total number of stars and
watchers of Angular GitHub [17] are 72.1K and 3.2K, [6]
respectively. For React, those numbers are 166K and 6.7K,
respectively.
[7]
V. CONCLUSION
From various diverse aspects of front-end frameworks and
libraries, we can conclude that each framework or library has
its own advantages and disadvantages. With the capability of [8]
one-way and two-way binding, Angular 2 provides the most
suitable solution in the data processing. It also has stable
technical support from the Google team. However, run time [9]
performance may be a big concern due to its size. It will also
take more time for developers to learn the framework due to its
abundant functionalities. Therefore, Angular is suitable in
large-scale enterprise solutions where complicated functions, [10]
sophisticated data processing, most importantly, consistency
and maintainability are in demand. React also has powerful
[11]
support from Facebook. Its stable API lowers the risks of
updating and migration. Besides, after learning React
developers can directly develop a mobile application using
React Native. However, React is just a frontend library. With [12]
its smaller size compared to Angular, React cannot provide as
many features as Angular does. This requires more work from
the developers' perspective. However, thanks to its lightweight [13]
and fast rendering speed, React becomes a good solution for
Social media and communication applications. Its simplicity
also makes React easier to learn which, in turn, makes it so [14]
popular within the developer community. The majority of
companies would choose a tool where they can easily find [15]
developers on the market to enhance the security of their
projects.
[16]
REFERENCES
[1] R. Minto, 2008. The genius behind Google’s browser.
From https://www.ft.com/content/03775904-177c-11de-
8c9d-0000779fd2ac [17]
M. Kovatsch, M. Lanter and S. Duquennoy, 2012.
Actinium: a Restful runtime container for scriptable
Internet of Things applications, 2012 3rd IEEE
International Conference on the Internet of Things, Wuxi,
2012, pp. 135-142.
Teixeira, P., 2012. Professional Node. js: Building
JavaScript based scalable software. John Wiley & Sons.
K. Lei, Y. Ma and Z. Tan, "Performance Comparison and
Evaluation of Web Development Technologies in PHP,
Python, and Node.js," 2014 IEEE 17th International
Conference on Computational Science and Engineering
(CSE), Chengdu, China, 2014, pp. 661-668.
Github, “Front-end frameworks popularity (React, Vue
and Angular).” [Online]. Available:
https://gist.github.com/tkrotoff/b1caa4c3a185629299ec23
4d2314e190
Ramos, M., Valente, M.T. and Terra, R., 2018. AngularJS
performance: A survey study. IEEE Software, 35(2),
pp.72-79.
Angular Official Blog., 2018, July. AngularJS to Angular
Concepts: Quick Reference From
https://angular.io/guide/ajs-quick-reference
Gackenheimer C., 2015. Introducing Flux: An Application
Architecture for React. In: Introduction to React. Apress,
Berkeley, CA
Eisenman, B., 2015. Learning React Native: Building
Native Mobile Apps with JavaScript. " O'Reilly Media,
Inc.".
JSX, “JSX.” [Online]. Available:
https://jsx.github.io/doc/literalref.html
Facebook Inc., “A JavaScript library for building user
interfaces - React.” [Online]. Available:
https://facebook.github.io/react/
Redux, “Introduction Redux.” [Online]. Available:
http://redux.js.org/
E. Muller, “DZone/Web Dev Zone.” [Online]. Available:
https://dzone.com/articles/typed-front-end-with-angular-2
El Omari, M., Erramdani, M. and Filali, S., Getting Model
of MVVM pattern from UML Models.
Muhammad, “codementor.” [Online]. Available:
https://www.codementor.io/codementorteam/react-vs-
angular-2-comparison-beginners-guide-lvz5710ha
Stefankrause Developer Team., 2018, December. Results
for js web frameworks benchmark. From
https://www.stefankrause.net/js-frameworks-
benchmark6/webdriver-ts-results/table.html
Github, “GitHub.” [Online]. Available: https://github.com/