FRONTEND WEB DEVELOPMENT

NAKKA VENKATA SAI BHANU VIKAS

1
Student, Department of Electronics and Communication Engineering, GIET Engineering
College Rajamahendravaram – 533296, East Godavari District, A.P., India
Email: [email protected]

Abstract
A frontend framework is pre-written code that provides the architecture for a
project, along with certain features to help with the development process. With
the availability of many frameworks, each with its own features and advantages,
it is important to understand the difference between the various frameworks and
make the right choice of framework for a particular project. This paper elabo-
rates on the features of three popular frameworks: React, Angular and Vue,
draws a comparison among them, and provides guidelines on how to make the
choice of a suitable framework for a project.

Keywords: Frameworks, React, Angular, Vue, JavaScript

1 Introduction

Over the past couple of decades, the web has grown exponentially, and with it has
increased the size and complexity of various web applications and services provided
over the web. This has led to developers needing higher-level tools and technologies
which cater to the development of complex web applications, handling more user
traffic.
To cater to this increasing need, various frontend web-development frameworks
such as ReactJS, AngularJS, VueJS, and NextJS, to name a few, were developed.
While all these frameworks find their base in JavaScript, each offers developers a
different set of features, structures, and options.
The objectives of this paper are as follows-

• To analyze various popular frontend frameworks that have come into use over the
last couple of years.
• To do a qualitative comparison between the features and structures of these frame-
works.
• To break-down some of the large-scale applications built using particular frame-
works.
• To assess how to choose between the vast array of frameworks available.
2

2 Research Questions

This paper aims to tackle the following questions:

1. What are the different features provided by the various frontend frameworks?
2. How can one choose between various frameworks for a web application?

3 Contributions

1. A detailed comparison of various frontend frameworks' features, functionality, and

structure.
2. Case study analysis of large-scale applications built using particular frontend
frameworks
3. Methodology and suggestions in making choices of frameworks for particular pro-
jects.

4 Literature Review

Over the past couple of decades, web development, along with its associated technol-
ogies, has continuously changed. With the advent of the Web in the 1990s, early web
pages, built primarily using HTML and CSS, were text-based websites that did not
have to deal with much traffic. As time passed and the size of the web expanded rap-
idly, so did the need for more complex web applications to provide services to the
users.
To simply work for developers and facilitate faster and more efficient development
of websites, JavaScript-based frameworks started emerging in the 2000s. The first of
these was jQuery [1], launched in 2006. jQuery is referred to as a fast, lightweight,
JavaScript library, that uses an API to make tasks like document traversal, manipula-
tion, and event handling simpler. [1] It is referred to as a library and not a framework;
for this paper, we will consider JavaScript libraries such as jQuery and ReactJS
alongside JavaScript frameworks.
While subtle, the distinction between a library and a framework is essential to un-
derstand. A library consists of a reusable package of predefine functions, objects, and
methods that the developer can use in the project as and when deemed fit. Some of the
popular JavaScript libraries are jQuery, ReactJS, and D3.js.
On the other hand, a JavaScript framework is a pre-written code that provides an
architecture for the project. It provides a standardized structure that developers can
follow and extend based on the framework's features and the developer's needs. Some
of the popular JavaScript frameworks are AngularJS and VueJS.
While there has not been extensive research comparing the various available
frameworks, the works of [2] and [3] serves as a basis for me to build upon further in
this paper.
 3

Framework: Blueprint of house Library: Furniture inside the house

Fig. 1. Depiction of difference between framework and library

After jQuery for developed in 2006, the upcoming years saw the release of many new
frontend frameworks and libraries, which helped ease the development process.

Fig. 2. Advancement in Web-Development over the years

5 Frameworks Analysis

5.1 Methodology
For the purpose of analysis and further comparison, this paper will be focusing on
three frameworks in particular namely React, Angular and Vue. While apart from
these frameworks there are many more JavaScript frameworks used for frontend de-
velopment, such as jQuery, Svelte, Ember etc., the popularity of React, Angular and
Vue far supersedes that of the other available frameworks [Table 1]. Due to their vast
popularity these frameworks have been used for the development of many large-scale
applications. Hence, in this section we will focus on each of the individual frame-
works, their features and functionality.
According to a survey by JetBrains in 2021 [2], comparing the popularity of Ja-
vaScript Frameworks among developers.
4

Table 1. Popularity of Frameworks among developers

5.2 React JS

ReactJS is a JavaScript library developed and maintained by Facebook (now Me-

ta), used to create interactive user-interfaces. [3] React’s wide popularity is primarily
due to its improved performance with the help of the use of the virtual DOM over the
actual DOM, ease of learning, and reusable components.

Virtual DOM vs. Actual DOM:

. The Document Object Model (DOM) is a programming interface for web docu-
ments. The DOM represents the document as nodes and objects so that programming
languages can interact with the page. [4] It further represents web pages in a tree
structure, with the nodes containing objects that developers can modify using JavaS-
cript. Hence it is a representation of the user-interface of the Web Application. Any
time an object of the DOM is updated, the updated component, along with all its chil-
dren, gets re-rendered. This re-rendering of the UI makes the DOM slow, as the UI
must be re-rendered with every DOM update.
React handles this by making use of the Virtual DOM (VDOM). The VDOM is a
virtual representation of the Real DOM, where React first updates any state changes
and the affected components, then compares the VDOM obtained with the snapshot of
the VDOM before the update occurs. This helps React figure out which objects have
been changed, and only those objects are updated in the Real DOM; instead of the
entire Real DOM being updated, only the, affected objects are updated.
This greatly helps React improve the performance and memory utilization of the
DOM
.
 5

Fig. 3. Use of Virtual DOM to handle updates to the DOM

In addition to the performance optimization offered by React, it is also preferred by

developers (Table 1) because it is extremely easy for new developers familiar only
with HTML and Vanilla JS (refers to the use of JavaScript without any of its librar-
ies), to adapt to ReactJS. This is because ReactJS allows developers to write code in
JSX, a syntactic extension to JavaScript, which allows HTML code to be embedded
along with the JavaScript functions [3].
Lastly, Meta (Facebook) also provides browser extensions to simplify the process of
debugging React Applications. It allows developers to inspect component hierarchies
in React and record the web application's performance. [5]

5.3 Angular

Angular is a popular JavaScript frontend framework developed by Google. Angu-

lar 1 (also known popularly as AngularJS) was the version released by Google in
2010; however, in 2016, Google released Angular 2, completely rewriting the original
version released [6]. While over the years, AngularJS was popular due to a variety of
its features, as of January 2022, Google has officially announced the end of support
for AngularJS [7]. Hence, for this paper, we shall primarily focus on Angular2 and its
subsequent versions, which are currently in wide use among developers, the features
offered, and how it differed from its predecessor, AngularJS.
Angular is a development platform built with the help of Typescript, which in-
cludes a component-based framework, a collection of libraries, and a set of developer
tools to build and test applications [8]. Some of the features of Angular that impact its
use among developers are as follows:
Compared to React, which uses a Virtual DOM as discussed previously, Angular
directly interacts with the Real DOM, updating the entire DOM tree when any change
to the user interface occurs.

Architecture
. While AngularJS supported MVC and MVVM Architecture, Angular2, taking in-
spiration from React, shifted to a Component-based Architecture. In the Angular
Framework, Applications consist of Angular Components organized into NgModules.
All the components and modules in Angular are classes with associated decorators
that provide Angular with the required metadata.
Components have associated templates that define views that Angular can access
and modify based on the app’s logic. The components also utilize services, providing
functionality to the application that may not directly be related to the view; these ser-
vices are injected into the components and dependencies. The components of an ap-
plication consist of many views arranged hierarchically.
The template associated with a component works to combine HTML with the An-
gular markup. Templates have associated directives that provide the program logic.
Angular evaluates the program logic and resolves the template's binding (Event and
Property Binding). [9]
6

Fig. 4. Angular Architecture (From [8])

Data Binding in Angular.

Data Binding refers to keeping the UI of the page up to date based on the state of
the web application. [8] Angular provides three categories of Data Binding:

• One-way from data source to view target

• One-way from view target to data source
• Two-way

Fig. 5. Types of Data Binding

 7

Fig. 6. Two-Way Data Binding

Furthermore, Angular also provides inbuilt support to set up Unit Testing and Inte-
gration Testing with the help of the Jasmine testing Framework, an open-source be-
havior-driven development framework for testing JavaScript code [10] , and Karma as
the task-runner for tests.

Changes From AngularJS to Angular2+

. While the upgrade from AngularJS to Angular2 and then subsequent updates to
Angular2 have resulted in many changes in the frameworks, some of the significant
differences between the versions are:

• While AngularJS is a JavaScript-based framework, Angular is built using Type-

Script, which is statically typed and helps ensure fewer errors and better code un-
derstandability.
• Applications made using Angular are also optimized for mobile browsers, whereas
AngularJS provides no support for mobile devices.
• While AngularJS has an MVC based architecture, the architecture of Angular is
primarily based on Components consisting of templates and directives.
• AngularJS relies on third party tools for testing where as Angular comes support
for unit and integration testing based on Jasmine and Karma.

5.4 Vue
VueJS is a JavaScript framework for building a user interface built upon HTML,
CSS, and JavaScript. [11] Of all the frameworks analyzed in this paper, Vue is the
newest, having been created by Evan You in 2014. Even despite its comparatively late
emergence, due to the robust set of features offered by it, it has grown to give compe-
tition to similar frameworks like React and Angular.

Architecture
. VueJS is based on the MVVM (Model – View – ViewModel) architecture which
consists of the following three components:
• Model: Represents the data access and business logic of the application
• View: It represents the UI of the application that the user interacts with.
8

• View Model: It consists of the logic of the view layer, linking it to the model layer,
and processing the interactions between the two.
VueJS primarily focuses on implementing the functionality of the ViewModel layer.

Fig. 7. VueJS Architecture

VueJS follows a component-based structure similar to both React and Angular. Com-
ponents help split the user interface into simple, easy-to-understand, and reusable
pieces of code. This modularization process helps improve the development and
maintainability of web applications.
Since Vue was initially developed by Evan You to take the best features of Angu-
lar and make a lightweight custom tool for development, Vue contains some of the
primary functions and features of Angular such as templates, views, and directives, as
discussed previously.

Rendering Mechanisms.
Similar to React JS, Vue, too, uses the Virtual DOM to handle rendering and re-
rendering of the user interface, hence improving the performance and memory utiliza-
tion of the web applications.
VueJS templates are first compiled into render functions that return the VDOM
trees. Then, on runtime, the VDOM tree is mounted on the actual DOM, which ren-
ders the web application. The render functions are generated to track the dependen-
cies, and in case of any changes, an updated VDOM tree is created. The updated
VDOM tree is compared with the older version, and only the particular components
that were changed are updated in the actual DOM.
 9

Fig. 8. Rendering pipeline of VueJS using Virtual DOM (From [11])

Overall, the popularity of VueJS has grown over the last couple of years. Despite not
being backed by a large corporation like Meta for React and Google for Angular, it
has still been able to give them competition and is now widely adopted among devel-
opers. Vue JS is maintained primarily by its creator Evan You, and a large open-
source community, leading to many libraries such as Vuex, Element, and the Vue CLI
being developed. Vue has worked to combine the rich functionality of Angular with
the lightweight, fast and easy learning curve of ReactJS.

6 Case Studies.

In this section, we will analyze some of the large-scale applications built using the
frontend frameworks discussed previously and the advantages of using the particular
framework.

6.1 React: Facebook

As ReactJS was developed at Facebook and is maintained by developers at Facebook

and a large community of developers, it is no surprise that the Facebook website is
developed using ReactJS and the mobile app using React Native.
Facebook is a social networking platform founded in 2004, with over 2.9 billion
users now. It allows users to connect with other individuals, share updates and photos
of their lives, and direct messaging services. It has also grown to offer additional ser-
vices such as live streaming, a marketplace, and news feeds.
React is now among the most popular frameworks used among developers. Face-
book has been using React to develop their web application as it provides efficiency
and optimization with the Virtual DOM and easy SEO optimization, among other
features discussed in Section 5.1. Furthermore, since React is developed by Facebook
and then used for building their applications, it is easier to fix any issues or work on
additional functionality required in React or the Facebook Web Application.
10

6.2 Angular: Firebase

Since Angular is developed and maintained by Google, many of the internal products
used by Google and many public-facing services use Angular as part of their technol-
ogy; one of the most prominent services of Google built using Angular is Firebase.
Firebase is a Backend-as-a-Solution (BaaS), providing developers with the ability
to build and manage their applications' backend; it provides services such as a real-
time database, authentication, cloud messaging, and hosting, which developers can
easily integrate into their existing applications.
Most of the reasons for Angular’s adoption have been discussed in section 5.2; in
addition to its various features, such as in-built testing, two-way data binding, and
dependency injection, it offers high-end functionality to developers, as there is no
dependency on any third-party libraries and packages, as is with the case React and
Vue. Instead, all the functionality needed by developers comes covered within the
framework.

6.3 Vue: GitLab

VueJS which was created by Evan You and released in 2014, has fast risen to popu-
larity in the developer community, and has come to be adopted in the development of
many large-scale popular applications, such as GitLab.
GitLab is a DevOps software package that offers remote access to GitHub reposito-
ries, along with features that simplify the software development life cycle, such as
collaborative development, Continuous Integration- Continuous Deployment (CI/CD)
pipelines, bug-tracking, and code review.
The primary reason for adopting VueJS for the development of GitLab has been its
simplicity and ease of use. [12] Its easy-to-understand source code and documenta-
tion, coupled with the robust set of features provided by it, further help to simplify the
development process. Hence VueJS provides developers with a balance between the
structure and simplicity of the framework and enables them to implement the same
functionality and features required with less code. [12]

7 Results and Discussion

7.1 Comparison

After an elaborate discussion of the features offered by the various frameworks, this
section works on a side-by-side comparison of these frameworks.
Fig 10. Below depicts that over the last 5 years, the popularity of React, and hence
the number of its downloads, has been increasing at a rapid pace, while for Angular
and Vue, the number of downloads have been increasing, but at a much slower pace
compared to that of React. This correlates with the data in Table 1, pertaining to the
current popularity of the Framework.
 11

Fig. 9. Comparison of NPM Downloads of the 3 Frameworks over the last five years [13]

Table 2 below depicts the comparison of the GitHub repositories of the three frame-
works, which is the open-source popularity of these frameworks, as we have seen in
Fig 10 as well, the React GitHub repository has the most number of stars, forks and
watchers, followed by that of Angular and then Vue. The comparatively low number
of interactions on Vue’s repository can be due to its recent emergence in 2014, com-
pared to that other two frameworks.

Table 2. Comparison of GitHub Repositories of the 3 Frameworks

The tables Table 3-5 given below, draw a side-by-side comparison of the differ-
ences in the features of Angular, React and Vue, taking two of the frameworks at a
time, based on the discussions on these frameworks in Section 5.

Table 3. Comparison of Angular and React

Angular React

With a large core library, it reduces any It has a small core library with external
dependencies on external libraries. libraries to provide additional functionali-
ty.

It has a steeper learning curve. It provides an easy learning curve for

developers familiar with JS and HTML.
12

Based on Typescript. Based on ES6 Syntax and JSX

Table 4. Comparison of Vue and React

Vue React

Easier to work with for beginners not Easy to work with for developers famil-
familiar with JavaScript concepts. iar with functional JavaScript

It handles the mutation of data using It handles the mutation of data using
data objects. state objects.

Supports two-way data binding Supports one-way data binding

Table 5. Comparison of Angular and Vue

Angular Vue

It is a heavy framework suitable for Lightweight framework, suitable for

large enterprise-scale applications. small-scale applications

It has a steep learning curve. Easy to work with for beginners not fa-
miliar with JavaScript concepts.

7.2 Suggestions

Based on previous discussions, it is evident that for any developer starting work on
a project, the dilemma of choosing the suitable framework from a variety of options,
each with its own set of features and structures, is always present. Hence, to decide on
a framework based on a project's requirements and the developer's capabilities, the
following can be kept in mind.
Suppose the project is one of your first projects, or the developer is relatively inex-
perienced. In that case, it might be preferable to opt for Vue.js or React, as they are
much easier to grasp and start working with compared to Angular, which is more
challenging to learn.
If the application to be built is a large, enterprise-scale application, then it is pref-
erable to work with Angular as it is suited for such applications. In contrast, if the
application is meant to be a small-scale application with no plans of scaling up, VueJS
would be the preferred choice as it is lightweight and, at the same time, provides
many of the features that Angular provides.
Lastly, a developer’s familiarity with TypeScript can prove advantageous, as using
TypeScript helps debug code, resulting in cleaner, easier-to-understand code. Since
 13

Angular is based on TypeScript, a developer familiar with TypeScript can also take
advantage of the variety of functionality offered in the Angular framework. While
both React and Vue also support TypeScript, only HTML and JavaScript knowledge
are sufficient to get started with them.

7.3 Performance Comparison

The previous sections of this paper focused on comparing the different features and
structures of the frameworks, while this section will elaborate on the quantitative
performance comparison between the frameworks.
The tables below are taken from [14] in which a large, randomized table was creat-
ed using various frameworks on Chrome 104 Browser, and different operations were
performed on the table, the speed (in milliseconds) and memory usage (in MB) (with
95% confidence interval) for the frameworks.

Table 6. Memory Usage for different frameworks [14]

Table 6 above depicts the difference in memory usage of the three frameworks at
various stages, while Table 7 depicts the speed of different operations being conduct-
ed on a table. As is evident from Table 7, React is slightly slower in selecting rows
compared to Angular and Vue, whereas both Angular and React are considerably
14

slower than Vue when it comes to swapping rows, and Angular is at a slight disad-
vantage compared to React and Vue, at clearing table. When it comes to memory
usage, there is no major disparity among the three frameworks for this particular test,
but the values in Table 6 and 7, vary with operating systems, browser, browser ver-
sion and depending on the operations being tested.

Table 7. Speed of Operations done on large randomized table

 15

8 Conclusion

This paper has analyzed in depth the importance of frontend frameworks and the fea-
tures provided by three frontend frameworks: React, Angular, and Vue. It then goes
on to examine some of the large-scale applications built using these frameworks and
understand the reason for their use. Then a qualitative comparison is drawn between
the various frameworks based on various features that they offer, and guidelines are
provided to developers on selecting a particular framework for projects. Lastly, a
quantitative comparison is analyzed among the three frameworks.

References
1. "Jquery," [Online]. Available: https://jquery.com/.
2. "JetBrains," [Online]. Available: https://www.jetbrains.com/lp/devecosystem-
2021/javascript/. [Accessed 29 10 2022].
3. ReactJS, "React – A JavaScript library for building user interfaces," [Online]. Available:
https://reactjs.org/. [Accessed 29 10 2022].
4. "Introduction to the DOM - Web APIs - MDN Web Docs," [Online]. Available:
https://developer.mozilla.org/en-
US/docs/Web/API/Document_Object_Model/Introduction. [Accessed 29 10 2022].
5. "React Developer Tools," [Online]. Available:
https://chrome.google.com/webstore/detail/react-developer-
tools/fmkadmapgofadopljbjfkapdkoienihi/related?hl=en. [Accessed 31 October 2022].
6. Y. Xing, "Research and Analysis of the Front-end Frameworks and Libraries in E-
Business," 2019.
7. "AngularJS," [Online]. Available: https://docs.angularjs.org/. [Accessed 31 October 2022].
8. "Angular: Introduction to Angular Docs," [Online]. Available: https://angular.io/docs.
[Accessed 31 October 2022].
9. "Angular: Introduction to Angular Concepts," [Online]. Available:
https://angular.io/guide/architecture. [Accessed 1 November 2022].
10. "Jasmine Documentation," [Online]. Available: https://jasmine.github.io/. [Accessed 1
November 2022].
11. "Vue.js," [Online]. Available: https://vuejs.org/. [Accessed 1 November 2022].
12. "Why we chose Vue.js | GitLab," GitLab, [Online]. Available:
https://about.gitlab.com/blog/2016/10/20/why-we-chose-vue/. [Accessed 6 November
2022].
13. "NPM Trends," [Online]. Available: https://npmtrends.com/@angular/core-vs-react-vs-
vue. [Accessed 6 November 2022]
14. "Interactive Results," [Online]. Available: https://krausest.github.io/js-framework-
benchmark/2022/table_chrome_104_windows.html. [Accessed 6 November 2022].