1

Research and Analysis of the Front-end Frameworks and Libraries in Web

Development

Arnav Awasthi1 ,Shubham More2 and Warren Viegas3

1
Xavier Institute Of Engineering, Department of Information Technology, Mumbai University, Mumbai, India
*
Corresponding author: [email protected]

Abstract

With the rapid expansion of online technology in recent years, there is a strong trend that Hypertext Markup
Language(HTML)5 will become a global web consortium and will lead the front-end. to take stage in the history
of the internet There are, however, a slew of front-end development frameworks to choose from., Angular, and
are examples of libraries. How to Choose appropriate framework or library to launch an e-business and expand
its react. It becomes a priority procedure to the user experience.in terms of web development This paper begins
with an introduction a list of the most popular frameworks and libraries in the field of front-end development
and web performance analysis services. This paper examines the research findings from a variety of
perspectives. The advantages and disadvantages of each framework will be described in this study., the study
concludes with a summary, the contributions, and finishes by speculating on the future of front-end development

Keywords: Front-end; JavaScript; Web Development; e-Business; HTML5.

1. Introduction

1.1 Preface

With the fast advancement of internet technology over the last decade, customers have become
increasingly reliant on e-Business to carry out daily tasks such as shopping, obtaining a mortgage, and
filing taxes. HTML5 technologies come and modify the entire internet development ecosphere as an
innovation, which is one of the most important causes for this result. HTML5 is a markup language that
is used to create layout and render information on global websites. In comparison to previous HTML
standards, HTML5 adds and improves several semantic components such as footer>, aside>, and nav>
to clearly define the web structure, and it aids web developers in building their websites under strict
guidelines. HTML5 also provides new components to application programming interfaces (APIs)
(APIs). The <canvas> element, for example, allows the website to access the canvas portion of the
mobile phone . Web programmers can create a website with more complex operations using HMTL5's
sophisticated access features. Although HTML5 introduces numerous advancements, it still has the
drawback that any published HTML version's rendering efficiency is extremely low, even when
compared to FLASH. Google created the Chrome V8 engine in 2008, which appropriately tackles the
issue of HTML5 bringing JavaScript to the forefront.
Prior to the release of Chrome V8, JavaScript's primary job in a website was to interact with Cascading
Style Sheets (CSS) to provide a better user interface and to handle routine script actions like for
m validation. Because Chrome V8's JavaScript engine is more than 56 times quicker than any version o
f Internet Explorer (IE) the Chrome V8 look redefines JavaScript.
Traditional web browsers often create JavaScript by parsing byte-
code and compiling the complete web project to generate the code, which is then executed from a file s
ystem.
As a result, its JavaScript execution time is significantly longer than that of compiled languages like Ja
va and C++.
The optimised solution for the V8 engine uses inline caching technology to boost speed without using t
raditional methods.
Following the release of the V8 engine, JavaScript may be able to operate in a similar manner
 2

as good as Java or C++ in terms of performance. As a result, a web project can match the speed of
classic desktop apps. Because of the superiority of the V8 JavaScript engine, several JavaScript
platforms based on the V8 engine have appeared. This has ushered in a new era in the history of
internet development. In the year 2009, Node.js was released, which works in conjunction with the V8
JavaScript engine. As a development environment Node.js is a programming language that allows
developers to enhance their capabilities. JavaScript's vision is that it can't only run a simple script in a
browser website, but also in the development of an event-driven server-side application that is easy to
use. Despite the fact that Node.js was released, Many new JavaScript frameworks appeared nine years
ago. and have an impact on the evolution of the internet. The following section discusses the trace on
the major front-end frameworks and libraries.

1.2 Front-end frameworks and libraries

Because of the V8 engine's innovation, there are various front-end frameworks and libraries based
on JavaScript. We collect usage data from Stack overflow and Github, the world's largest Git-
repository hosting service, in order to uncover prominent front -
end frameworks and libraries that meet industry standards. The usage statistics on Github and
Stack overflow can represent the preferences of worldwide front-end developers for various front-
end frameworks and tools.

Figure 1 Front-end framework usage data

The graph above shows that React remains in the dominant position. Angular 2 retains the second
position whereas Angular 1 and Vue rank relatively lower than the other two in terms of popularity.

1.2.1 Vue.js
Evan You created Vue.js, a prominent JavaScript ES6-based open source framework,
in 2014. The first goal of Vue's development is to enable responsive data binding and
UI components using a simple Application Programming Interface (API). Although
Vue is intended for use in single -
page applications, it is often regarded as having limited functions and being difficult t
o adopt in commercial applications. However, the open source community has create
d a strong third-party supporting library and packages to help Vue drive complex sing
le-page applications with routing, state management, and build tooling.
 3

Figure 2 Vue.js Data driven concepts

Vue.js features three components to process data, as shown in Fig. 2. These portions are View,
View Model, and Model. The website content is displayed in the View area, which is a display
ed DOM. DOM listeners and Data Bindings are found in the View Model section.
It acts as a data intermediary between the View and the Model.
When the data processing in View is triggered by the users.
Vue will monitor and update the Model section's data using DOM listeners.
Vue will use DOM binding to adjust the website content appearance when Model's data is upd
ated. In brief, Vue achieves two-way binding by using one-way binding with DOM listeners.

1.2.2 Angular 1 & 2

Angular is a well-known open source front-
end web application framework based on JavaScript ES5 that was created by Google in 2
010 .Angular's primary development goal is to make it easier for web designers to create a
persistent web form . As the front
end history progresses, Angular's position evolves to match more development criteria, all
owing web developers to create more complex apps using the Angular framework. Howe
ver, because of its basic design model, Angular has fallen significantly behind competing
front-end frameworks in recent years. In order to bring Angular up to date, Google publis
hed its second version, Angular 2, in 2016, which was totally redesigned by the Google d
evelopment team.

Figure 3 Angular 1 two-way data binding

The main concept of Angular 1 is two-way data binding in web browsers,

which significantly reduces the back-end data processing burden on web servers.
Figure 2 shows how Angular 1 handles data binding. The custom tag attributes have
been incorporated in JSON, and Angular 1 uses them as directives to link input or
output elements of the website page to a model represented by Scope. When users
take interactive activities on websites, the values of certain JavaScript variables are
updated from dynamic JSON resources, and the data is submitted to the server. The
two-way data binding of Angular allows whole interactions to be performed in web
browsers, avoiding the need for website changes to wait for data processing from the
back-end server and directly rendering the updated data in front-end by HTML.
Consequently, the HTML rendering speed can be faster without waiting for back-end
response due to Angular 1 technology
 4

Figure 4 Angular 2 one-way data binding

Angular 2 has completely redesigned its concept and optimized Angular 1's
binding process as compared to Angular 1. To begin with, Angular 2 removes the
template directive and controller. It combines the two pieces using a new module
called 'Component' . Angular 2 provides event binding as a one-way binding from
view to component, which was not available in Angular 1.Third, Angular 2 switches
from a JavaScript-based language to a TypeScript-based language , which is a strict
syntactical superset of JavaScript developed by Microsoft. Fourth, Angular 2
monitors interactive actions with zone.js rather than Scope . Last but not least,
Angular 1 was designed for desktop web apps with limited support for mobile
platforms, whereas Angular 2 favors mobile devices. By optimizing and integrating
different features, Angular 2 has smaller size and faster speed which is essential in
mobile development

1.2.3 React.js and React Native

In order to establish Facebook and Instagram website with better user experience,
Facebook developed the React JavaScript library . Due to React’s powerful features,
Facebook released React as an open source JavaScript ES6 based library to global
developers and companies in 2013 . Besides, Facebook also launches React Native to
develop a mobile application with React under major mobile platforms such as IOS and
Android in 2015.

Figure 4 Mounting components in React & Re-rendering

components in React.
Figure 5 shows how React technology can be used to render a page. The Document
Object Model is where React stores website content as distinct components (DOM).
JavaScript will be used to render the component in the browser. The JavaScript rendering
speed will be faster than that of traditional dynamic webpages with Chrome V8
technology. Another React’s core wisdom is creating a virtual DOM . When a user
refreshes the data or visits other subpages on a typical HTML website, the page is
completely re-rendered. The re-rendering procedure consumes more browser resources
and slows down the webpage. React, in contrast to the old method, takes a different
approach to the problem by creating a virtual DOM with one way data binding. React
initially produces an updated virtual DOM, then compares the virtual DOM to the visible
DOM. It will re-render the actual transform part after it summarises the differences in
each component, but other uniform parts will not be re-rendered. The virtual DOM's most
major benefit is that the website becomes faster when using the React framework.
Another advantage is that React encourages developers to design UIs according to
module standards. For example, there are two websites with a text form that perform the
 5

same function but have distinct features. Due to the changes in the text forms, when the
customer clicks a link and visits another page, the page will still re render the text form. If
the development team creates a UI module standard and then picks the text form from the
module to apply to various pages, the text form will not be re rendered since React will
identify that the two forms are identical and will not alter them. In short, React not only
revolutionises front end programming, but it also establishes a new standard in user
interface design and development.

2. Front-end solution analysis

React, Angular, and Vue are unquestionably prominent frontend development alternatives in
modern web development. They do, however, have distinct qualities and concepts. It means that
different commercial criteria must choose an appropriate framework or library to get the most out
of their applications.

2.1 Data Processing

Data processing is an important aspect of front-end development since the efficiency and
quality of data processing determine the user experience when accessing the application.

Angular 1 Angular 2 React Vue

Data Binding Two-way Two-way and One-way One-way /Two-

one-way way

Table 1 Data Binding in front-end frameworks

Table 1 shows how each framework and library handles data binding. Vue may achieve
two-way binding via DOM listeners or one-way binding without them. The choice of one-
way or two-way data binding is the most major difference between React and Angular 1.
React, as comparison to Angular 1, has a more sophisticated data flow to check the
difference between the virtual DOM and the shown DOM. However, using a two-way
method between a component and a view may cause the component to transition into
unexpected states as a result of conflicting data from multiple sources, whereas using a
one-way method can avoid conflict issues in multiple data sources, particularly in event-
based situations. As a result, the Angular 2 team has improved the concept of developers
being able to leverage both one-way and two-way binding.

2.2 Volume and Performance

A larger volume indicates that the framework or library has more features and functions,
but it will take longer to load a framework or a library.

Activity Angular 2 React Vue

Ready-memory 4.8 ± 0.0 (1.4) 4.5 ± 0.1 (1.3) 3.8 ± 0.0 (1.1)

Run-memory 10.9 ± 0.1 (2.7) 9.7 ± 0.1 (2.6) 7.5 ± 0.1 (1.9)

Table 2 Front-end frameworks and library memory allocation performance

Angular 2 has the largest volume, with 143 kilobytes (KB), Vue with 23 KB and React
with 43 KB. Because of its massive volume, Angular 2 includes more advanced and
extensive functions and capabilities. However, due to its complex structure, Angular 2's
 6

running speed may be inferior to that of React or Vue, particularly when it comes to
memory allocation. Table 3 demonstrates that Angular 2 takes longer to prepare and run
the memory, whereas Vue takes less time because of its flexibility and efficiency.

2.3 Language-based

Language-based considerations are also significant because different languages have

varied situations in terms of project development, such as a learning curve and efficiency.

Angular 1 Angular 2 React Vue

Language- JavaScript TypeScript JavaScript ES6 JavaScript ES6

based ES5

Table 3 Language-based in front-end frameworks and library

Table 3 depicts the present state of language-based frameworks and libraries. React and
Vue are built on JavaScript ES6, which is the most recent JavaScript industry standard
from 2015. The previous version of JavaScript, ES5, is used by Angular 1. TypeScript is
used by Angular 2 to deliver a better type inference experience and to decrease all
type problems in online apps. In addition, TypeScript helps developers get rid of the old
JavaScript programming format by streamlining the language structure. TypeScript, on
the other hand, has a small user base. There's a chance TypeScript will become obsolete if
a new syntactical tight superset of JavaScript emerges. Because it is the industry criterion
in producing JavaScript, JavaScript ES6 can be modified but not removed.

2.4 Technical Support

Technical assistance is also required since greater support may help build stronger
relationships with developer communities, which is critical for the framework's reputation
to grow. React has excellent technical support and a very reliable API.
The official scripts to aid developers in doing the related update make upgrading and
immigration relatively straightforward. In a nutshell, React provides long-term technical
support. Angular has similar functions, but its API isn't as robust as React's.
APIs from previous versions have been removed. Despite the fact that Vue includes an
easy migration and update system across versions, the official team has no plans to
improve it owing to funding constraints.

2.5 Online Business Solutions

Based on the preceding examination of many features of front-end frameworks and

libraries, it is reasonable to conclude that each framework or library has its own set of
strengths and weaknesses. In terms of data processing, Angular 2 offers the best one-way
and two-way binding solution. Furthermore, the Google development team's official
technical support is consistent and dependable. However, due to its numerous
functionalities, its volume is too large to play an adequate running performance, and its
based language has a small community. As a result, Angular 2 is well suited to large-scale
e-Business solutions that demand complex functionality and advanced data processing
methods.
React's exceptional efficiency in rendering updated DOM, as well as its rich technical
support and long-lasting API, allow developers to eliminate updating and immigration
concerns. Furthermore, after learning React, developers can construct React Native
mobile applications immediately. However, because React is a JavaScript library with a
smaller volume than Angular 2, it cannot provide comprehensive functionalities and
developers must deploy on their own. Typical requests for re-development of more
 7

customizable features and functionalities with quick rendering speed come from social
media and communication applications. As a result, they are React's potential
Clients.
In data processing, Vue offers both two-way and one-way binding options. Its minimal
volume happens in the most efficient rendering and processing as compared to Angular 2
and React. Although Vue has a major flexibility advantage in front-end development, its
technical support is unreliable due to its development team's scale limitations, as well as
unexpectedly changed official plans. Furthermore, because of its modest size, it only has
the most basic functionality. Vue is appropriate for small and medium web projects that
require flexibility and simplicity in development, as well as the fastest data processing
speed.

3. Conclusion

This paper discusses three possible front-end development frameworks and libraries for constructing
online apps, as well as prospective web application development solutions. By comparing React,
Angular 2, and Vue in many aspects such as data binding, language-based, technical support, volume,
and performance, we may draw some conclusions. It is feasible to conclude that Angular 2 has the most
extensive functions and features, making it ideal for large commercial projects, particularly in the
eBusiness sector. Live streaming, communication, blogging, and small to medium size applications are
all good candidates for React and Vue.
A UI framework must also be used when developing a whole front-end component to demonstrate
expert UI design. Our research field will be expanded in the future to include more front-end
development methodologies and an analysis of their functioning principles to develop web
applications.

4. References

[1] Stefankrause Developer Team., 2018, December. Results for js web frameworks benchmark. From
https://www.stefankrause.net/js-frameworksbenchmark6/webdriver-ts-results/table.html

[2] M. R. Solanki, A. Dongaonkar, A Journey of human comfort: web1.0 to web 4.0,

International Journal of Research and Scientific Innovation (IJRSI), Volume III,
Issue IX, pp. 75-78, 2016

[3] Angular Official Blog., 2018, July. AngularJS to Angular Concepts: Quick
Reference From https://angular.io/guide/ajs-quick-reference

[4] Vue Official Blog., 2018, July. Reactive Data Binding Research. In Science and
Information Conference From https://v1.vuejs.org/guide/overview.html

[5] MDN Web Docs. A re-introduction to JavaScript. Retrieved from

https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_reintroduction_to_Java
Script.

[6] React. Virtual DOM and Internals. Retrieved from https://reactjs.org/docs/faq-

internals.html.

[7] Web Technology Surveys. Historical trends in the usage statistics of client-side
programming languages for websites. Retrieved from
https://w3techs.com/technologies/history_overview/client_side_language/all.

[8] React. State and Lifecycle. Retrieved from https://reactjs.org/docs/state-and-

lifecycle.html
8