Authors: Rishi Vyas
Certificate: View Certificate
Web applications today play a significant role in everyone's lives. Apps are undoubtedly taking over the corporate sector, from online ticket booking to meal ordering and cab booking to online purchasing. Client behavior has significantly changed as a result of technology innovation and mobility. Businesses are excitedly anticipating establishing an online presence in 2022 as the impact of mobility continues to grow and transform industries globally. Every frontend developer has heard about three frameworks for building web applications: React, Vue.js, and Angular. The principles and best - practice for project development are defined by frameworks, which also simplify many aspects for us, such as code structure and maintenance, by acting as a skeleton for our applications. Technically, all three frontend components are nothing more than lines of code that the browser subsequently renders to produce an attractive web page. A software framework (frontend or backend) contains standardized pre-written code, which facilitates and speeds up the development of specific functionality.
Angular is a fully-fledged front-end framework, React is a UI library, and Vue.js is a progressive framework. They can be used interchangeably to build front-end applications, but they’re not 100 percent the same, so it makes sense to compare them and understand their differences. Each framework is component-based and allows the rapid creation of UI features. However, they all have different structures and architecture.
Since thousands of apps are available, developing an application is not just a complex job; you need a particular strategy, considerable preparation, and access to leading technology to design an enterprise-level app. The paper aims to demonstrate how well-suited the frameworks are for creating web applications and identifying essential qualities that allow for more individualized web application development.
II. ASSOCIATED CONCEPTS
React is used to develop web and mobile applications, and single-page applications utilize Angular; we can also set the hybrid applications using the stack, mainly because it is purely based on HTML, CSS, JS, and jQuery. Vue is also used to develop single-page applications and user interfaces. SPA is a modern approach to creating web applications used primarily by applications with less content. A single-page app only reloads the information the user needs. In a multi-page app, all the pages the user has requested and the whole web page content are updated. The server loads the complete page when the user runs a SPA. Later, just the essential data is transferred in the form of JSON files in response to the request.
III. POSSIBLE COMPARISON DIMENSION
A. Trends And Popularity
React, Angular, and Vue being the most popular frameworks, were analyzed considering the survey report of Stack Overflow. React leads the market, with 35.9% of developers using it. However, Angular is surpassing the popularity of Vue.js. Angular is being chosen by 25.1% of developers, while Vue is utilized by 17.3% of developers.
The chart shows a slight variation in the quantity of React and Angular inquiries from 2015 to 2016. Then, we observe that their difference grew over a bit time. The demand was balanced by the middle of 2017, at which point React started to grow and approach Angular's requirements. Although the Vue.js framework was still not well-known, it gradually gained its market share among frameworks, indicating the potential for future expansion. In the last years, React has surpassed Angular and presented evident popularity among developers, meaning that React is the most usable front-end framework on the market, followed by Angular.
Overall, React, and Angular develop organically with relatively the same dynamics. If we attempt to predict how popular these front-end frameworks will be, React shows a good trend, whereas Angular shows a minor fall. The demand for Vue.js development services is still unclear, but according to its specific convenient structure, it will grow as well, maybe just a bit less than the main frameworks.
B. Architecture Involved
Angular has the full-fledged Model-View-Controller (MVC) architecture. Angular is based on MVC, making it super easy to modify and upgrade personal views without completely rewriting the other ideas. In Angular, we do not need to go through packages and then select from those. Instead, one can start working directly without worrying about adding functionalities via different packages.
MVC is an object-oriented design principle that mandates the separation of control, meaning one thing can do only one thing. It is the traditional way of separating even the most complex UIs into three views – Business Logic, UI Logic, and Input Logic. The execution is simple. 
So, the model deals with entity classes, the data, and business logic. In contrast, the view deals with the representation and UI logic of the application where the user interacts with the web application. By interpreting user input as an event, the controller serves as a bridge between the View and Model and drives the functionality of the two. Any changes can be easily factored in and isolated, making testing much more accessible.
React represents the MVC framework's View component. React is incredibly versatile and can be integrated with several packages that have been created for it, which aids in the development of a whole application. It is thus a benefit in this situation. At the same time, Vue is focused primarily on the view and model layer of the MVC framework. Still, the packages developed for Vue are lesser than that of React due to its lower popularity, making it challenging to select packages that provide functionality relevant to a particular scenario.
Angular is the "biggest" framework of the three. It is sometimes even called a "platform" rather than a framework. Because Angular comes with support for a variety of features. It helps
The best thing about Angular is its constant updates. Angular launches an update every six months, and the new versions build upon the older ones. Take the Angular 11 update, for example, eliminating all the previous version's bugs. We must monitor updates because a significant update may impact the code. However, Google waits another six months after an update before pulling the previous tools, providing a whole year to change code if the need arises.
All frameworks aim to make it easier for developers to build reactive, complex user interfaces. Nevertheless, Angular gives us the complete set of tools for that. It provides DOM manipulation support, and In addition, there is an official CLI that helps create and manage Angular projects, keep them up-to-date, add dependencies, and even deployments!
At its core, Angular is about building reusable user interface components. We can then control it with Angular and combine it with other members to create an entire user interface from those Angular-controlled components.
However, It does not have built-in functionality for form validation. It does not ship an HTTP client or come with a router (for rendering various components in response to URL changes). Although not for all circumstances, it has some state management support built-in. Additionally, it lacks any additional unique features and is unquestionably "slimmer" than Angular. We must rely on the (arguably quite active) React community for those features.
Vue is a systematic framework which kind of sits between React and Angular. It is not as "big" as Angular but includes more features than React.
The foundation of Vue is all about creating user interfaces by integrating reusable components, just like Angular and React. Nevertheless, beyond that, it gives a bit more than React and a bit less than Angular.
Performance is a very crucial feature. The moment we build an HTML view and render it into the browser, this view to the user is just HTML tags. However, the code is converted into a balanced tree structure if we look at the internal working. This representation of code in the form of a tree data structure is called DOM.
This B-Tree algorithm is high-speed, so when the user makes any changes to the UI, the changes are reflected immediately. This is facilitated by the B Tree algorithm, so as a result, the performance is improved. Thus, updating the tree here is not a costly operation; indeed, we have many algorithms on trees to make the updates fast. What is proving to be expensive is that the changed element and its children must be rendered anew to refresh the UI of our page every time the DOM is updated. This way, the DOM and UI components must be updated whenever a member is altered. 
Thus, DOM manipulation plays a vital role in the performance analysis of the frameworks. There are two different kinds of performance on which the frameworks are assessed:
At any given moment, React maintains two Virtual DOMs, one of which is the updated Virtual DOM and the other simply the pre-update version of the updated Virtual DOM. Now it analyses the Virtual DOM before and after the update to determine the changes, such as which components are in the DOM. "Diffing" is the process of contrasting the current Virtual DOM tree with the previous one. React only updates those items on the real DOM once it determines that. The real DOM is updated by React using batch updates. It simply means that batches of changes to the actual DOM are transmitted rather than single update every time a component’s state changes. React accomplishes this most effectively by guaranteeing that the Real DOM receives batch updates to re-render the UI, which is the most expensive component of the process. Reconciliation is the term used to describe the entire process of converting changes to the actual DOM. The performance is greatly enhanced as a result.
Angular, on the other hand, uses real DOM. When rendering the web application, Angular is slower than React and Vue because it uses Real DOM rather than a Virtual DOM. This means that Angular updates the entire DOM tree structure whenever an object changes.
Virtual DOM (VDOM) is a React concept that Vue has incorporated. The rendering time is faster than Angular and comparable to React since Vue updates only those objects modified in the "actual" DOM.
Since no time is spent making unnecessary changes to the entire tree React is extremely fast. On the other hand, accurate DOM updating is time-consuming, risky, and error-prone. Vue also ensures quicker and bug-free performance.
E. Data Binding
The process that links the application's user interface (UI) to the models is called data binding. Using Data Binding, the user can manipulate the elements present on the website using the browser. Therefore, whenever some variable changes, that particular change must be reflected in the Document Object Model or the DOM. The incremental display of a webpage makes data binding convenient when pages contain an extensive amount of data.
The relationship between the components and the DOM is specified via data binding in Angular. Data binding is a feature of all Angular versions, from AngularJS to the most recent Angular 9 version. Two-way data binding, which Angular supports, enables the application to transfer data in both directions—from the components to the templates and vice versa. By doing this, the application's models and views are guaranteed to be constantly synced. Setting the element property and listening to element change events are two actions that two-way data binding will carry out. 
AngularJS templates work differently. The template is first compiled on the browser using the uncompiled HTML and any extra markup or directives—the process of compilation results in a live view. Any modifications to the view are promptly updated in the model, and model modifications are transmitted to the view. The model serves as the sole source of truth for the application's state, substantially streamlining the developer's programming interface. The view can be assumed simply as an instant projection of the model. This ensures that the framework can connect the DOM to the Model data with the help of the controller. Hence, in Angular, any changes made to the view are immediately visible in the model part of the architecture, and this approach adversely affects the performance.
ReactJS renders components to the user interface, and the component's logic contains the data seen in the view. (UI). The connection between the data displayed in the view and the component's logic is called data binding in ReactJS.
One-way Data Binding: One-way data binding is used in ReactJS. One of the requirements listed below can be met in one-way data-binding:
The data can be taken from the view and push it to the model. The view adjusts whenever the model state is updated. Thus, it makes react modular and fast and improves its performance.
Vue uses reactive two-way data binding. It automatically selects the proper update mechanism for the element based on the input type.
F. Code syntax
This is how a typical Angular code sample would seem:
This is a reasonably trivial component (UserListComponent) that uses property binding (@Input ()) to expose data to be set "from outside" (i.e., from inside the component, this component will be used in), event binding (@Output ()) to emit events and a directive - ngFor - to render a list of data. We can see that Angular uses a Typescript feature called "Decorators" (@Component) to attach extra data to standard classes (UserListComponent). We can write code like this, and Angular, behind the scenes, takes care of manipulating and "connecting" the real DOM.
So a developer never has to write any code that directly creates or removes elements to/ from the DOM. We can instead create Angular components with the syntax shown above to let Angular do the heavy lifting. We can define inputs (properties) and outputs (events) of components and also can manage some component-specific or app-wide states with the help of Angular (not visible in the above snippet).
To run various tests, Angular uses Jasmine. The Jasmine framework enables several functions to create multiple test scenarios.
For testing the code, React utilizes Jest. Facebook uses Jest to run tests on React, is embedded in every React library, and requires zero configurations.
HTML, JS, and CSS are used individually by VueJS. Because VueJS uses a template-based approach, novice developers can quickly use this programming paradigm.
This paper examined the appropriateness of front-end technologies for creating Web applications. The front-end frameworks Angular, Vue.js, and React were described. React, Angular 2, and Vue are compared in a variety of ways, including data binding, DOM manipulation, features, popularity, code syntax, and performance, among other things. The criteria for the selection of a specific framework were identified. It is safe to say that all three have their perks- Angular is robust and time-tested, React is flexible and quick, and Vue is simple and high-performing. The development of Angular, React, and Vue is all highly active. They maintain the current versions while routinely releasing new ones. It is crucial to note that Vue while having started more recently appears to be growing significantly, whereas Angular is not expanding as quickly as it formerly did. The three frameworks can be used for web development, depending on the viability and goals of the application.
Copyright © 2022 Rishi Vyas. This is an open access article distributed under the Creative Commons Attribution License, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.