COMPARATIVE ANALYSIS OF DIFFERENT WEB

DEVELOPMENT FRAMEWORKS (REACT, ANGULAR,

VUE.JS)

UWHUMIAKPO HOPE
ICT/2252300637

A PROJECT SUBMITTED TO THE DEPARTMENT OF

COMPUTER SCIENCE, SCHOOL OF INFORMATION AND
COMMUNICATION TECHNOLOGY, AUCHI
POLYTECHNIC, AUCHI. EDO STATE

IN PARTIAL FULFILLMENT OF THE REQUIREMENT FOR

THE AWARD OF HIGHER NATIONAL DIPLOMA IN
COMPUTER SCIENCE

JULY, 2025

i
 CERTIFICATION

We the undersigned hereby certify that this project work titled: “Comparative

Analysis of Different Web Development Frameworks (React, Angular, Vue.js)” was written

by Uwhumiakpo Hope with Matriculation Number ICT/2252300637.

We also certify that this project is adequate in scope and quality and is submitted in

partial fulfillment of the requirements for the award of the Higher National Diploma (HND)

in Computer Science, School of Information and Communication Technology, Auchi

Polytechnic, Auchi, Edo State.

________________________ ________________________
MR. OKUMAGBE S.E DATE
(Project Supervisor)

__________________________ ________________________
MR. ABAS A. DATE
(Head of Department)

ii
 DEDICATION

This project is dedicated to the Almighty God for His boundless grace, guidance, and

mercy throughout my academic journey.

iii
 ACKNOWLEDGEMENT

First and foremost, I want to express my gratitude to Almighty God, the merciful and
most gracious father, for making it possible for me to complete this dissertation and for
giving me the strength, knowledge and opportunity to know that there is light at the end of
every tunnel, Him keeping me alive to see this day is the greatest of all blessings.
My sincere gratitude goes to my supervisor MR. OKUMAGBE S.E for his valuable
contribution to my success. He was more than a supervisor to me and your commitment is
inspiring. I would like to express my gratitude to Auchi polytechnic for his excellent staff and
conducive learning environment. My learning has been positively influenced by this during
my course.
My gratitude also goes TO MR. ALIU ABBAS, Head of the Department of
Computer Science, for providing a conducive academic environment and for his leadership
and support during the course of my study. I am equally thankful to the esteemed faculty
members and staffs of the department.
I would like to thank my parents, Mr. and Mrs Abraham uwhumiakpo , for always
believing in me. I am grateful to God for giving me such wonderful parents. To my siblings
near and far, I would like to thank you for your support and for the kind words you have
always given me, Ese uwhumiakpo, Destiny uwhumiakpo and Helena uwhumiakpo. you all
make a great family, and I hope this will motivate you all to achieve higher goals.
I can’t forget the many people who have supported me throughout this process: Mr.
Samuel Omotoye, and to my amazing friends: Enabulele Dorcas, Sarah chinaza Mmadu,
Efosa kelvin, Emmanuel Oshioke. you are all wonderful people. To all my friends who have
been helpful in any way I say thank you all and God Bless.
Lastly, I want to thank me for believing in me, I want to thank me for doing all the
hard work, I want to thank me for never quitting and I want to thank me for
being me at all time.

iv
 TABLE OF CONTENT

Tittle Page - - - - - - - - - - i
Certification - - - - - - - - - - ii
Dedication - - - - - - - - - - iii
Acknowledgment - - - - - - - - - iv
Table of Content - - - - - - - - - v
Abstract - - - - - - - - - vii

CHAPTER ONE: INTRODUCTION

1.1 Background of the Study - - - - - - - - 1

1.2 Statement of the Problem - - - - - - - - 2
1.3 Aim and Objectives of the Study - - - - - - - 2
1.4 Significance of the Study - - - - - - - - 3
1.5 Scope of the Study - - - - - - - - 3
1.6 Limitations of the Study - - - - - - - - 4
1.7 Definition of Terms - - - - - - - - 4

CHAPTER TWO: LITERATURE REVIEW

2.1 Overview of Security Surveillance Systems - - - - - 5

2.2 Closed-Circuit Television (CCTV) Technology - - - - - 6
2.3 Components of CCTV Systems - - - - - - - 8
2.4 Types of CCTV Cameras - - - - - - - - 10
2.5 Importance of CCTV in Educational Institutions - - - - - 11
2.6 Challenges Associated with CCTV Deployment - - - - - 12
2.7 CCTV Policy and Legal Considerations in Nigeria - - - - 14
2.8 Empirical Studies on CCTV Use in Schools - - - - - 15

CHAPTER THREE: SYSTEM ANALYSIS AND DESIGN

3.1 Introduction - - - - - - - - - 17
3.2 System Investigation Methodology - - - - - - 17
3.3 Existing System Analysis - - - - - - - - 17
3.4 Problem Definition - - - - - - - - 18

v
3.5 Objectives of the Proposed System - -- - - - - 18
3.6 Scope of the System - - - - - - - - 18
3.7 System Requirements - - - - - - - - 19
3.8 Functional Requirements - - - - - - - - 19
3.9 Non-Functional Requirements - - - - - - - 20
3.10 System Design - - - - - - - - - 20

CHAPTER FOUR: SYSTEM IMPLEMENTATION AND TESTING

4.1 Introduction - - - - - - - - - 22
4.2 System Development Environment - - - - - - 22
4.3 Implementation Process - - - - - - - - 22
4.4 System Testing Procedures - - - - - - - 24
4.5 Test Results and Evaluation - - - - - - - 24
4.6 Challenges Encountered During Implementation - - - - - 25
4.7 System Maintenance Strategy - - - - - - - 25
4.8 Summary - - - - - - - - - - 25

CHAPTER FIVE: SUMMARY, CONCLUSION AND RECOMMENDATIONS

5.1 Summary - - - - - - - - - - 26
5.2 Conclusion - - - - - - - - - 26
5.3 Recommendations- - - - - - - - - 27
References - - - - - - - - - 28
Appendices - - - - - - - - - 31

vi
 ABSTRACT

In the rapidly evolving field of web development, selecting the most appropriate front-end
framework is a crucial decision that significantly affects project performance,
maintainability, and developer productivity. This project presents a comparative analysis of
three leading JavaScript frameworks—React, Angular, and Vue.js—focusing on their design
philosophies, architectural patterns, learning curves, scalability, and suitability for various
project contexts. A single-page application (SPA) landing page was developed using each
framework under identical conditions to ensure fair and measurable comparisons.
Performance testing, usability evaluations, and developer feedback were used as
benchmarks.The study revealed that Vue.js offers the most accessible entry point for
beginners and delivers excellent performance for small to medium projects. React stands out
for its flexibility and vibrant ecosystem, making it well-suited for scalable applications.
Angular, with its comprehensive structure and built-in tools, excels in large-scale enterprise-
level systems but has a steeper learning curve. The findings provide actionable insights to
guide developers, organizations, and educators in making informed decisions when choosing
a front-end framework. Ultimately, the choice of framework should align with the project’s
complexity, team expertise, and long-term development goals.

vii
 CHAPTER ONE

INTRODUCTION

1.1 BACKGROUND OF THE STUDY

The web has become an integral platform for the delivery of information, services,

and digital experiences in virtually every domain—from education and healthcare to banking,

entertainment, and commerce. This increasing dependence on the internet has fueled the need

for high-performing, user-friendly, and scalable web applications that can meet the demands

of modern users who expect seamless experiences across various devices and platforms.

Consequently, web development has evolved significantly over the years, shifting from

traditional static websites to dynamic, interactive applications that rely heavily on client-side

logic and modern programming practices. JavaScript, being the cornerstone of front-end web

development, has seen a corresponding rise in tools, libraries, and frameworks that streamline

the development process and improve application efficiency (Brito et al., 2020).

In particular, the emergence of JavaScript frameworks has revolutionized how

developers build complex web applications. Frameworks such as React, Angular, and

Vue.js have introduced new architectural patterns and abstraction layers that simplify the

process of designing user interfaces, managing application state, and implementing

component reusability. These tools allow developers to focus on business logic while

leveraging pre-built structures that enhance maintainability and code quality. The shift

towards Single Page Applications (SPAs), where only parts of a web page are updated

dynamically without full-page reloads, has further driven the adoption of these frameworks.

As a result, the role of frameworks in shaping the efficiency, performance, and structure of

modern web applications cannot be overstated (Chung & Lin, 2021).

React, created by Meta (formerly Facebook) in 2013, is widely praised for

introducing the Virtual DOM, a lightweight in-memory representation of the actual DOM,

viii
which allows for efficient rendering and minimal direct manipulation of the browser’s DOM

tree. React’s component-based architecture encourages modular design, promotes code

reuse, and enables faster development cycles. Due to its flexibility and ecosystem of

supporting libraries, React has gained significant traction among both startups and large

enterprises. In contrast, Angular, which is maintained by Google, is a fully-fledged

framework that includes an integrated suite of tools such as form validation, routing, HTTP

client, and support for TypeScript—a statically typed superset of JavaScript. Angular’s

opinionated structure and robust tooling make it ideal for large-scale enterprise applications,

even though its complexity may present a steeper learning curve for new developers (Ahmad

& Basri, 2020).

Vue.js, developed by Evan You in 2014, presents a middle ground between React’s

flexibility and Angular’s comprehensiveness. Vue.js is designed to be progressively

adoptable, which means it can be introduced incrementally into existing projects. Its

template syntax is simple and intuitive, and it offers features like reactive data binding and

component-based design similar to its counterparts. Vue’s gentle learning curve and growing

community support have contributed to its rising popularity, especially among small and mid-

sized development teams. Despite their unique characteristics, these frameworks often

overlap in functionality, and developers may find it challenging to discern which is the most

suitable for a given context—particularly when balancing performance, scalability,

maintainability, learning requirements, and long-term project goals (You, 2022).

In an era marked by rapid technological change and increasing competition in

software delivery, making the right choice of framework is critical to a project's success.

Organizations and developers must evaluate various factors such as performance

benchmarks, ecosystem maturity, learning curve, documentation quality, community support,

and compatibility with other technologies. Failure to make an informed choice can result in

ix
 technical debt, delayed timelines, and poor application performance. Therefore, there is a

growing need for structured, comparative studies that analyze leading web frameworks based

on empirical and theoretical criteria. This study aims to fill that gap by conducting a

comprehensive analysis of React, Angular, and Vue.js, examining their design philosophies,

strengths, limitations, and real-world applications. Such an analysis will offer valuable

insights for students, educators, developers, and organizations striving to make data-driven

decisions in the realm of web development.

1.2 STATEMENT OF THE PROBLEM

i. Difficulty in Framework Selection:

In the current web development landscape, selecting the most appropriate JavaScript

framework—particularly among React, Angular, and Vue.js—has become a significant

challenge due to the varying features, structures, and use cases of each framework.

ii. Lack of Objective Evaluation Criteria

There is no widely accepted, standardized method for comparing these frameworks

based on essential factors such as performance, scalability, ease of use, learning curve,

and long-term maintainability. This makes it difficult for developers to make informed

decisions.

iii. Consequences of Poor Framework Choice

Frameworks are often chosen based on trends or personal preferences rather than

project-specific needs. This can result in increased development time, maintenance

challenges, and poor system scalability.

iv. Need for Comparative Analysis

A well-structured, practical comparison of React, Angular, and Vue.js is therefore

necessary to guide developers and organizations in making evidence-based, strategic

choices aligned with their project goals.

x
1.3 AIM AND OBJECTIVES OF THE STUDY

The aim of this study is to conduct a comparative analysis of React, Angular, and

Vue.js JavaScript frameworks, with a view to identifying their strengths and limitations

in relation to key development factors, and to provide developers with evidence-based

guidance for framework selection. The specific objectives of this study are to:

i. Examine the core features, architectural patterns, and design philosophies of

React, Angular, and Vue.js.

ii. Evaluate the three frameworks based on critical performance indicators such as

scalability, ease of use, learning curve, and long-term maintainability.

iii. Identify the practical advantages and challenges associated with each framework

in different project contexts.

iv. Provide comparative insights to support developers and organizations in making

informed and strategic framework choices.

1.4 RESEARCH QUESTIONS

Based on the stated objectives, the study seeks to answer the following research questions:

i. What are the core features, architectural structures, and development philosophies of

React, Angular, and Vue.js?

ii. How do these frameworks compare in terms of scalability, ease of use, learning curve,

performance, and long-term maintainability?

iii. What practical challenges and advantages does each framework present in various

web development scenarios?

iv. How can a comparative analysis of React, Angular, and Vue.js assist developers and

organizations in making more informed and strategic framework selections?

xi
1.5 SCOPE OF THE STUDY

This study focuses on conducting a comparative analysis of three widely used

JavaScript web development frameworks: React, Angular, and Vue.js. The analysis is limited

to the front-end development capabilities of these frameworks, specifically examining their

performance, learning curve, scalability, community support, flexibility, and ease of

integration with other tools. The study does not cover backend technologies or full-stack

frameworks. It is aimed at helping web developers, software engineers, and decision-makers

understand the strengths and weaknesses of each framework in a structured and practical

context.

The study will also involve testing simple web application scenarios using each

framework to evaluate their efficiency, usability, and overall developer experience. However,

the research will not extend to highly complex enterprise-level implementations or

frameworks outside the JavaScript ecosystem. The goal is to provide a practical comparison

based on commonly encountered project requirements in small to medium-scale web

development projects. The findings are expected to assist both beginners and experienced

developers in choosing the most suitable framework based on their project needs and

technical proficiency.

1.6 SIGNIFICANCE OF THE STUDY

This study is significant because it provides a clear and objective comparison of

React, Angular, and Vue.js, which are among the most popular web development frameworks

today. By highlighting their respective advantages and limitations, the research offers

valuable guidance for developers, project managers, and organizations faced with the critical

decision of framework selection. This can lead to more efficient development processes,

optimized application performance, and reduced project risks related to technology choices.

xii
 Moreover, the study contributes to the broader knowledge base in web development

by offering practical insights into how different frameworks perform under typical project

scenarios. It also serves as a useful resource for educators and learners seeking to understand

the evolving landscape of front-end technologies. Ultimately, the findings aim to foster

better-informed decisions that enhance the quality and maintainability of web applications,

thereby supporting the continuous growth and innovation in the digital ecosystem.

1.7 LIMITATIONS OF THE STUDY

The research is limited by time and resource constraints. Real-world performance

testing is simulated in controlled environments, which may not fully replicate large-scale

production scenarios. Additionally, due to the continuous evolution of frameworks, some

features or versions analyzed may change after the conclusion of the study.

1.8 DEFINITION OF TERMS

Framework: A software platform that provides a foundation and set of pre-written code to

support the development of applications, often including libraries, tools, and best practices.

React: A JavaScript library developed by Meta (Facebook) for building user interfaces,

characterized by its component-based architecture and use of a virtual DOM for efficient

rendering.

Angular: A comprehensive, TypeScript-based front-end web application framework

maintained by Google, known for its robust tooling and all-in-one development approach.

Vue.js: A progressive JavaScript framework designed for building user interfaces and single-

page applications, noted for its simplicity, flexibility, and gentle learning curve.

Single Page Application (SPA): A web application that dynamically updates a single web

page as the user interacts with the app, without requiring a full page reload.

Virtual DOM: An in-memory representation of the real DOM used by frameworks like

React to optimize rendering and update processes efficiently.

xiii
Scalability: The ability of a framework or application to handle increasing amounts of work

or to be expanded to accommodate growth.

Learning Curve: The rate at which a developer gains proficiency in using a framework or

technology.

xiv
 CHAPTER TWO

LITERATURE REVIEW

2.1 CONCEPTUAL FRAMEWORK

2.1 OVERVIEW OF WEB DEVELOPMENT

Web development refers to the process of creating, building, and maintaining

websites and web applications that are hosted through internet or intranet servers. Over the

years, the field has grown from building static web pages using HTML and CSS to

developing dynamic, interactive applications using advanced scripting languages and

frameworks. This evolution has been driven by the increasing demand for more sophisticated

user experiences and the widespread adoption of the internet across devices and industries.

Modern web development typically consists of two major domains: front-end (client-

side) and back-end (server-side) development. Front-end development focuses on the visual

and interactive aspects of a website—what users see and engage with in a browser. It

involves technologies such as HTML, CSS, and JavaScript, along with frameworks and

libraries that streamline the development of responsive and intuitive interfaces. On the other

hand, back-end development handles server-side operations, including data processing, user

authentication, and database management (Fitzgerald, 2017).

The emergence of single-page applications (SPAs) has also contributed significantly

to changes in the web development landscape. SPAs load a single HTML page and

dynamically update content without requiring a full page reload, offering smoother and more

efficient user experiences (Flanagan, 2020). To facilitate the building of SPAs, developers

now rely heavily on JavaScript frameworks such as React, Angular, and Vue.js. These tools

allow for better code organization, reusability, and faster development cycles, especially in

complex and large-scale web projects.

xv
 As web applications become increasingly central to business, education, health, and

social platforms, the demand for flexible, scalable, and maintainable development tools

continues to grow. Frameworks and libraries provide developers with structured approaches

to handle the rising complexity of web solutions, reducing development time and enhancing

performance. Understanding the evolution of web development and the tools that support it is

essential for making informed decisions when selecting the appropriate technology stack for a

project.

2.2 JavaScript Frameworks in Modern Web Architecture

JavaScript has become an essential technology in the development of interactive and

highly dynamic web applications. Originally introduced in the mid-1990s as a scripting

language to enable basic user interactions, it has grown into a powerful and versatile

language that now underpins most modern websites and web applications. Its significance in

web architecture lies not just in its capabilities as a scripting language, but in its vast

ecosystem of frameworks, libraries, and tools that collectively support the development of

complex front-end systems. With the shift towards responsive, mobile-friendly, and real-time

interfaces, JavaScript provides the foundation for building Single-Page Applications (SPAs),

which allow users to navigate through content seamlessly without triggering full page

reloads. This modern approach to front-end development has greatly enhanced user

experience, reduced server load, and improved performance metrics such as load time and

interactivity (Flanagan, 2020).

A JavaScript framework, in the context of modern web architecture, refers to a pre-

structured environment or set of tools that abstracts the complexities involved in creating

dynamic web applications. These frameworks facilitate a cleaner, more efficient coding

process by offering built-in solutions for common tasks such as rendering data, managing

user inputs, and handling asynchronous operations. More importantly, they provide

xvi
developers with a consistent architectural structure to follow, which improves

maintainability, scalability, and collaboration on large projects. As web applications have

grown in size and complexity, frameworks have become crucial for managing state, ensuring

code reusability, and maintaining clear separation of concerns. For example, React employs a

component-based architecture and a virtual DOM to optimize rendering performance;

Angular uses a declarative template system combined with dependency injection and strong

typing via TypeScript; and Vue.js offers a flexible, progressive model that allows developers

to incrementally adopt its core features or use it as a full-fledged framework depending on the

scope of the project (Fitzgerald, 2017).

These frameworks also play a crucial role in defining the presentation layer of web

architecture, which is the interface between users and the application logic. While the

traditional Model-View-Controller (MVC) pattern once dominated web application

architecture, modern frameworks often adopt variations or alternatives that better suit client-

side needs. For instance, React emphasizes unidirectional data flow and functional

programming principles, making it easier to manage application states and debug issues

across components. Angular, on the other hand, adheres to a more rigid structure that

facilitates enterprise-scale development with clearly defined services, modules, and routing

mechanisms. Vue.js strikes a balance by combining the simplicity of a library with the

capabilities of a full framework, allowing for cleaner code and quicker learning curves. All

three frameworks promote modularization through reusable components, which contributes to

cleaner architecture, easier testing, and more predictable performance outcomes (Freeman,

2019).

Furthermore, the impact of these frameworks extends beyond technical structure to

influence how development teams operate. The availability of robust ecosystems around each

framework—such as React's Redux for state management, Angular's CLI tools for

xvii
scaffolding and testing, and Vue's official packages like Vuex and Vue Router—simplifies

various aspects of the development lifecycle. These ecosystems enhance productivity, reduce

boilerplate code, and ensure that best practices are followed. Additionally, community

support plays a significant role in the adoption and continuous evolution of these frameworks.

React boasts one of the largest developer communities worldwide, Angular benefits from

Google’s long-term backing and enterprise orientation, while Vue has gained rapid popularity

due to its developer-friendly syntax and comprehensive documentation (Osmani, 2021).

The architectural integration of JavaScript frameworks has also led to significant

changes in how web applications are deployed and maintained. Many applications now adopt

micro-frontend architectures, allowing different teams to independently develop, test, and

deploy components of the UI using different frameworks if needed. Frameworks like React,

Angular, and Vue.js are compatible with this approach, making them suitable for scalable,

enterprise-grade applications. They also support integration with cloud services, API-based

backends, and CI/CD pipelines, further demonstrating their adaptability to modern software

engineering practices. Consequently, the choice of a JavaScript framework today is not only a

matter of syntax or performance but also a strategic decision that influences long-term

maintainability, team structure, and scalability (Griffiths, 2021; Hammad, 2020).

2.3 React Framework

React, also known as React.js or ReactJS, is an open-source JavaScript library

developed and maintained by Meta (formerly Facebook) for building user interfaces,

particularly for single-page applications where high interactivity and fast rendering are

essential. Since its public release in 2013, React has become one of the most popular front-

end libraries used globally due to its efficiency, scalability, and component-based

architecture. Its design philosophy focuses on building reusable UI components, allowing

developers to create complex applications with minimal code duplication and clearer logic

xviii
separation. React’s declarative approach to programming simplifies the development process

by enabling developers to describe how the user interface should look for any given

application state, and React automatically updates and renders the appropriate components

when the data changes (Banks & Porcello, 2020).

One of the most distinguishing technical features of React is the use of a Virtual

DOM (Document Object Model), a lightweight JavaScript representation of the actual

DOM. Instead of updating the entire web page whenever a change occurs, React compares

the virtual DOM with a snapshot of the previous one using a process called "diffing." It then

applies the minimal set of changes necessary to the actual DOM. This process drastically

reduces the performance overhead associated with direct DOM manipulation, thus improving

the responsiveness and speed of web applications. In contrast to traditional methods where

every DOM change triggered a re-render, React's selective rendering ensures a seamless user

experience even in applications with high-frequency data updates (Cherny, 2020).

React also introduced the concept of unidirectional data flow, a model where data

flows from parent to child components through "props," ensuring more predictable

application behavior and easier debugging. This data handling paradigm, combined with the

introduction of React Hooks in version 16.8, gives developers a cleaner and more functional

approach to managing component states and lifecycle methods without relying on class

components. Hooks like useState, useEffect, and useContext have made functional

components more powerful and readable, leading to cleaner and more modular codebases.

These improvements, along with the use of JSX (JavaScript XML) syntax for templating,

have contributed to React’s growing popularity and its adoption across companies such as

Netflix, Airbnb, and Uber (Grider, 2021).

The flexibility of React allows it to be integrated with various other technologies,

whether as part of a monolithic application or within a micro-frontend architecture. React

xix
does not impose strict architectural patterns, giving developers the freedom to design the

application logic, routing, and state management as needed. Tools like Redux, Recoil, and

Context API complement React by offering robust state management solutions for

applications with deeply nested components or complex workflows. Moreover, React Native,

a mobile development framework based on React, extends its use to cross-platform mobile

applications, promoting code reuse across web and mobile platforms and expanding its

ecosystem far beyond the browser (Bierman & Corrigan, 2022).

React's wide community support and active development by Meta ensure continuous

innovation and a reliable stream of updates, libraries, and documentation. The thriving

ecosystem includes development tools such as React Developer Tools (DevTools), Create

React App (CRA), and Next.js—a React framework for server-side rendering and static site

generation. These tools further simplify the setup and deployment of professional-grade

applications. As a result, React has become not just a front-end library but a central part of

many organizations’ front-end architecture, particularly in projects that require agility, high

performance, and long-term maintainability (Liu & Yu, 2021).

2.4 Angular Framework

Angular is a widely adopted open-source framework maintained by Google, designed

for the development of complex, client-side web applications. Unlike lightweight libraries

such as React, Angular offers a complete development platform built on TypeScript,

combining declarative templates, powerful dependency injection, and robust tooling into a

cohesive structure. Introduced as AngularJS in 2010 and re-engineered as Angular

(commonly referred to as Angular 2+) in 2016, the framework was redesigned to meet

modern web development demands such as modularity, maintainability, and scalability. It

adheres to the component-based architecture model, enabling developers to encapsulate

functionality and user interface elements into modular and reusable components. Angular’s

xx
structured approach makes it particularly well-suited for enterprise-grade applications, where

consistency, testability, and maintainability are essential (Saini & Aggarwal, 2021).

A significant feature of Angular is its two-way data binding mechanism, which allows

for automatic synchronization between the model and the view. This means that changes in

the UI are instantly reflected in the application logic and vice versa, without the need for

manual DOM manipulation. Additionally, Angular uses a virtualized DOM to enhance

rendering efficiency, although it is not as lightweight as React’s virtual DOM. Instead,

Angular relies heavily on Ahead-of-Time (AOT) compilation, which compiles HTML and

TypeScript code into efficient JavaScript before the browser loads the application. This

process improves load time and performance while providing early error detection.

Furthermore, Angular's use of observables via RxJS introduces a reactive programming

model that improves the handling of asynchronous data streams, allowing for more flexible

and scalable data flow management (Bose & Kumar, 2020).

Angular’s design is inherently modular, enabling developers to break an application into

smaller, cohesive blocks known as NgModules. These modules support features such as lazy

loading and hierarchical dependency injection, which are vital for optimizing large-scale

applications. Angular also includes built-in services for routing, HTTP communication, and

form handling, eliminating the need for numerous third-party tools. The Angular CLI

(Command Line Interface) further accelerates development by generating components,

services, and boilerplate code with predefined configurations, enforcing best practices across

projects. These features position Angular as an opinionated framework—one that provides a

structured and consistent workflow, reducing the cognitive load on developers and promoting

uniform coding standards (Mirzaei & Rezaei, 2022).

Security, testing, and maintainability are core pillars of Angular’s framework.

Angular includes automatic protections against cross-site scripting (XSS) by sanitizing all

xxi
untrusted input, ensuring that applications adhere to web security standards by default. It also

supports comprehensive unit and end-to-end testing through tools such as Jasmine, Karma,

and Protractor. With Angular’s extensive documentation and long-term support (LTS) policy

from Google, enterprises benefit from predictable updates and a stable environment for

mission-critical applications. This reliability has made Angular a preferred choice for

companies such as Forbes, Upwork, and Delta Airlines, which require scalable, maintainable

web applications that can support high traffic and complex workflows (Rahman & Ferdous,

2021).

Despite its steep learning curve, Angular’s robustness offers clear advantages in large,

team-based environments. Its use of TypeScript introduces strict typing and object-oriented

programming practices into JavaScript development, which reduces runtime errors and

improves code readability. In contrast to more flexible libraries like Vue.js, Angular enforces

architectural patterns, which can be a benefit when consistency and collaboration among

large teams are prioritized. This makes Angular ideal for enterprise-level projects,

educational platforms, and administrative dashboards where development guidelines, code

reuse, and lifecycle management are critical (Lee, Lee, & Kim, 2022).

2.5 Vue.js Framework

Vue.js is a progressive JavaScript framework designed for building user interfaces

and single-page applications (SPAs). Created by Evan You in 2014, Vue.js was developed to

combine the best features of Angular and React while maintaining simplicity and flexibility.

It adopts a model-view-viewmodel (MVVM) architectural pattern and focuses on the

declarative rendering of data and component-based development. Unlike Angular, Vue does

not come with a rigid structure, and unlike React, it does not require JSX. Instead, it offers a

highly intuitive templating syntax and two-way data binding using plain HTML and

xxii
JavaScript, making it beginner-friendly and accessible to developers from varying

backgrounds (You, 2022).

One of the core advantages of Vue.js lies in its progressive design. It can be used as a

library to enhance parts of an existing webpage or scaled up with official libraries (such as

Vue Router and Vuex) to build complex SPAs. Vue’s reactivity system is a standout feature

—its data-binding is powered by an observation mechanism that tracks changes and

automatically updates the DOM when data is modified. Unlike Angular's more complex

change detection strategies, Vue’s dependency tracking system is lightweight and efficient,

making it suitable for high-performance, interactive interfaces. This makes Vue especially

popular in situations where gradual adoption is needed, such as legacy systems integration or

enhancement of server-rendered apps (Gong & Zhang, 2021).

Vue’s component-based architecture facilitates encapsulation and reusability,

allowing developers to break down large applications into smaller, manageable units. Its

Single File Components (SFCs), which encapsulate HTML, CSS, and JavaScript logic in one

.vue file, promote maintainable and modular development. Vue also supports scoped CSS

and custom directives, giving developers precise control over styling and DOM behavior.

Additionally, Vue 3, released in 2020, introduced the Composition API, which allows better

logic reuse and improved TypeScript support. This API complements the Options API,

offering developers more flexibility and cleaner code organization in large projects (Xu et al.,

2022).

In terms of tooling and ecosystem, Vue has matured significantly. The Vue CLI

simplifies project scaffolding and configuration, while Vue DevTools provide advanced

debugging capabilities. Nuxt.js, a meta-framework built on Vue, supports server-side

rendering, static site generation, and SEO-friendly features—making Vue a competitive

choice even for content-heavy or e-commerce websites. Though Vue lacks the backing of a

xxiii
major tech corporation like Angular (Google) or React (Meta), it benefits from strong

community involvement and active open-source contributions. Several large-scale

applications and companies—such as Alibaba, Xiaomi, and GitLab—have adopted Vue for

both internal tools and public platforms (Kramer & Duhaney, 2021).

Despite its advantages, Vue has certain limitations. Its flexibility, while a strength,

may lead to inconsistencies in team-based projects without proper architectural guidance.

Additionally, compared to React’s vast ecosystem and Angular’s comprehensive structure,

Vue may require third-party tools for advanced functionalities such as state management and

testing. However, its learning curve is notably lower, and its documentation is widely

regarded as one of the best in the JavaScript ecosystem. For startups, small to mid-sized

projects, and developers seeking a gentle entry into modern front-end development, Vue

offers an elegant and balanced solution (Huang & Wang, 2023).

2.6 Comparative Analysis of React, Angular, and Vue.js

A comparative evaluation of React, Angular, and Vue.js provides a deeper

understanding of their relative strengths, limitations, and best use cases. These frameworks

represent three distinct philosophies of front-end development, each offering unique

approaches to application architecture, component design, performance optimization, and

community support. While all three frameworks are based on JavaScript and support

component-based development, they differ in terms of structure, complexity, scalability, and

the nature of their ecosystems. An in-depth comparison can help developers and

organizations make informed decisions when selecting a front-end technology for a project

(Alghamdi & Tawanese, 2022).

xxiv
2.6.1 Performance and Speed

Performance is one of the most critical factors when evaluating a front-end

framework. React, powered by a virtual DOM and unidirectional data flow, offers fast

rendering and is particularly effective for applications with frequent UI updates. Its diffing

algorithm minimizes unnecessary DOM manipulations, leading to high runtime efficiency.

Vue also uses a virtual DOM and provides excellent rendering performance with its reactive

system and fine-grained change detection. Angular, on the other hand, uses a real DOM with

change detection mechanisms, which may incur additional processing overhead. However,

Angular’s Ahead-of-Time (AOT) compilation significantly improves the initial load time and

runtime speed in production builds, making it a strong contender for large-scale enterprise

applications (Tsigkanos et al., 2021).

2.6.2 Ease of Learning and Documentation

In terms of learning curve, Vue is often considered the most beginner-friendly among

the three. Its clear separation of concerns using HTML, CSS, and JavaScript in single-file

components (SFCs), combined with well-structured documentation, makes it ideal for

newcomers. React, though slightly more complex due to JSX and its functional programming

orientation, benefits from a vast array of tutorials, guides, and community support. Angular,

while powerful, has a steeper learning curve due to its comprehensive and opinionated

structure, reliance on TypeScript, and extensive use of decorators and modules. The

complexity of Angular is often justified in enterprise environments, but it can pose challenges

for smaller teams or independent developers (Amalia & Constantin, 2022).

xxv
2.6.3 Community and Ecosystem

React boasts the largest developer community and ecosystem among the three, largely

due to Meta’s backing and widespread adoption. Its extensive repository of third-party

libraries, tools, and plugins gives developers a high degree of flexibility, although it also

requires careful management of dependencies. Angular, supported by Google, has a stable

ecosystem with integrated solutions for routing, form handling, and testing. Vue, while not

backed by a major tech giant, has cultivated a vibrant and passionate open-source

community. Its ecosystem continues to grow rapidly, with popular tools like Vue Router,

Vuex, and Nuxt.js contributing to its robustness (Goyal et al., 2023).

2.6.4 Use Cases and Real-World Adoption

React is preferred for building interactive user interfaces and high-performance SPAs.

It is widely adopted by large companies like Facebook, Airbnb, and Netflix for its flexibility

and performance in complex front-end architectures. Angular is ideal for large-scale

enterprise applications that require a full-fledged framework with strong support for scalable

architecture, such as enterprise dashboards and internal portals. Major corporations like

Microsoft and Deutsche Bank rely on Angular for its structure and maintainability. Vue, with

its balance of simplicity and power, is commonly used in startups, personal projects, and

smaller business platforms. Companies like Xiaomi, Alibaba, and GitLab use Vue for its ease

of integration and progressive development capabilities (Nwokoro & Thomas, 2022).

xxvi
2.6.5 Benchmark Summary Table

The table below provides a summary of the comparative attributes of React, Angular,

and Vue.js based on core development considerations:

Criteria React Angular Vue.js

Language Base JavaScript + JSX TypeScript JavaScript + HTML

templates

Architecture Library (view Full-fledged MVC Progressive framework

layer only) framework

Data Binding One-way Two-way Two-way

Learning Curve Moderate Steep Easy

Performance High (Virtual High (AOT + RxJS) High (Efficient reactivity)

DOM)

Community Very Large Large Growing

Support

Best For Dynamic UIs and Enterprise-scale apps Flexible projects and quick

SPAs prototyping

This comparative analysis confirms that no single framework is objectively superior;

the choice depends on the specific needs of the project, team expertise, and scalability

requirements. While React excels in speed and flexibility, Angular provides a complete and

secure development environment, and Vue offers a lightweight, approachable solution that

balances power with simplicity (Rani & Kumar, 2022).

xxvii
2.7 Review of Related Works

2.7.1 Empirical Reviews

Over the years, several empirical studies have explored the comparative performance,

usability, and adoption trends of modern JavaScript frameworks such as React, Angular, and

Vue.js. A study by Ahmad et al. (2021) conducted a performance evaluation using

benchmarks on rendering speed, load time, and memory consumption. The findings revealed

that React demonstrated superior performance in rendering dynamic user interfaces, while

Vue showed faster load times due to its lightweight core. Angular, though heavier, performed

best in form validation and component-based architecture, particularly in enterprise-level

applications.

Another empirical investigation by Malhotra and Suri (2022) focused on developer

productivity and user satisfaction. Through a survey-based methodology, they analyzed how

different frameworks impacted development timelines and maintainability. The results

indicated that Vue.js was preferred for its intuitive syntax and ease of use, especially among

novice developers. Conversely, React’s vast ecosystem and reusable components made it the

top choice among large-scale teams. Angular scored highest in structured application

development, though developers reported a longer adaptation phase due to its steep learning

curve and reliance on TypeScript.

In the domain of real-world deployment, Osei and Asiedu (2023) analyzed case

studies of companies adopting different front-end frameworks. Their research showed that

React had the most widespread industrial adoption, particularly in consumer-facing

applications where responsiveness and component reuse are critical. Vue was more

prominent in startups and open-source projects due to its simplicity and adaptability. Angular,

backed by Google, remained the framework of choice for enterprise solutions requiring

scalability, internal tools integration, and long-term support. These trends suggest a clear

xxviii
segmentation in how organizations adopt frameworks based on project scale, complexity, and

development resources.

Further empirical work by Karki and Bista (2021) investigated testing capabilities and

ease of debugging across frameworks. React’s integration with testing libraries such as Jest

and Enzyme was found to enhance unit testing efficiency, while Angular’s built-in testing

tools (e.g., Jasmine and Karma) provided better end-to-end test automation. Vue’s testing

ecosystem, though smaller, was appreciated for its simplicity and compatibility with tools

like Mocha and Vue Test Utils. Their study emphasized the importance of aligning

framework selection not just with development speed but also with quality assurance

practices in professional settings.

2.7.2 Summary of Gaps in Existing Literature

Despite the growing number of studies, existing literature often lacks longitudinal

analyses that track framework performance and adoption over time. Most comparative studies

offer snapshots of performance metrics without examining long-term maintainability,

developer turnover, or security implications. For instance, while performance benchmarks are

widely discussed, few works consider how frameworks evolve with changing web standards

and practices. This creates a gap in understanding how maintainable or extensible these

frameworks are in evolving technological environments (Singh & Agarwal, 2020).

Additionally, a significant portion of the existing research is focused on Western and

Asian technology markets, leaving gaps in the contextual adoption and challenges of front-

end frameworks in emerging markets like Africa or South America. There is also limited

academic exploration into the pedagogical aspects—how easily these frameworks can be

taught in formal educational settings, and their impact on shaping curriculum in software

development programs. These underexplored areas highlight the need for broader and more

xxix
inclusive research that considers global, educational, and long-term implications of using

JavaScript frameworks in modern web development (Chen & Eze, 2023).

Moreover, few studies incorporate user-centered design principles when evaluating

frameworks. Most comparisons prioritize developer experience and technical performance,

but rarely consider end-user satisfaction, accessibility outcomes, or UX efficiency post-

deployment. As web development increasingly aligns with user-centric design, future

research should integrate metrics such as usability testing results and accessibility compliance

to present a more holistic evaluation of frameworks in real-world applications (Barker &

Joshi, 2021).

2.8 THEORETICAL FRAMEWORK

The theoretical framework for this study is grounded in well-established models that

explain technology adoption and innovation in digital systems. The frameworks chosen

provide insight into how developers, organizations, and users interact with evolving web

technologies such as React, Angular, and Vue.js. Two prominent theories applicable to this

study are the Technology Acceptance Model (TAM) and the Diffusion of Innovations

Theory. These theories offer a basis for understanding how various factors—such as ease of

use, perceived usefulness, social influence, and innovation characteristics—affect the

selection and adoption of front-end frameworks.

2.8.1 Technology Acceptance Model (TAM)

The Technology Acceptance Model (TAM), originally developed by Davis (1989),

posits that two primary factors—perceived usefulness and perceived ease of use—

determine an individual's intention to use a specific technology. In the context of front-end

development, these constructs can be directly applied to assess why developers prefer one

framework over another. For instance, if a developer perceives Vue.js as easy to learn and

xxx
productive, they are more likely to adopt it. Similarly, if React is seen as useful for building

scalable and performant applications, its adoption increases within development teams.

TAM is particularly relevant in analyzing the adoption of front-end frameworks

because it emphasizes user perception, which includes both technical factors (such as

performance and maintainability) and subjective experiences (such as learning curve and

satisfaction). Furthermore, extensions of TAM have incorporated variables like social

influence and facilitating conditions, making it more adaptable to collaborative and

organizational settings where development decisions are often made collectively. Thus, TAM

provides a robust lens through which the decision-making process behind framework

selection can be understood (Venkatesh & Bala, 2008; Mohammadi, 2015).

2.8.2 Diffusion of Innovations Theory

The Diffusion of Innovations Theory, proposed by Everett Rogers (2003), explains

how new ideas and technologies spread within a population or social system. According to

Rogers, innovation adoption is influenced by several factors: relative advantage,

compatibility, complexity, trialability, and observability. Each of these dimensions aligns

well with the assessment of web development frameworks. For instance, React's relative

advantage lies in its performance and flexibility, while Angular's compatibility with

TypeScript and full-stack capabilities may appeal to organizations accustomed to structured

environments.

The theory further categorizes adopters into five groups: innovators, early adopters,

early majority, late majority, and laggards. Vue.js, known for its approachable design and

growing community, is particularly attractive to early adopters and developers in small or

medium enterprises looking to innovate quickly. Angular’s structured and enterprise-focused

approach tends to attract late majority adopters within large organizations that prioritize

stability and support.

xxxi
 The relevance of this theory in front-end development lies in understanding how

innovation decisions are influenced not only by technical merit but also by peer influence,

communication channels, and organizational readiness. As digital platforms continue to

evolve, this theory offers a comprehensive model for understanding the socio-technical

dynamics behind framework selection (Rogers, 2003; Straub, 2009).

2.9 EMPIRICAL REVIEW

Empirical investigations into modern JavaScript frameworks such as React, Angular,

and Vue.js have largely focused on performance benchmarks, developer usability,

productivity, and real-world adoption trends. Ahmad, Kaleem, and Waseem (2021)

conducted a quantitative performance evaluation that measured rendering speed, memory

usage, and load time across the three frameworks. Their results revealed that React

outperformed others in rendering dynamic user interfaces, while Vue.js demonstrated faster

initial load times. Angular, though slightly heavier, excelled in handling form validation and

offered superior architectural support for enterprise-level projects.

Similarly, Malhotra and Suri (2022) employed a survey-based empirical approach to

assess developer productivity and framework usability. Their findings showed that Vue.js

was particularly favored by novice developers due to its simplicity and intuitive syntax. On

the other hand, React was most preferred by experienced teams, especially for projects

requiring scalable and modular architectures. Angular received recognition for its structured

workflow and integrated tools but was noted to require a longer learning period.

In a case-based empirical study, Osei and Asiedu (2023) analyzed the framework

adoption strategies of various organizations. They found that React was most dominant in

consumer-facing applications such as e-commerce platforms and media services, largely due

to its performance and component reusability. Vue.js was widely adopted by startups and

open-source contributors owing to its low learning curve and flexibility, while Angular

xxxii
maintained strong traction in enterprise settings that valued TypeScript integration, in-built

tooling, and long-term maintainability.

Additionally, Karki and Bista (2021) evaluated the testing and debugging efficiency

across frameworks. Their results indicated that React’s testing ecosystem particularly with

Jest and Enzyme—offered robust unit testing support. Angular provided integrated testing

tools like Jasmine and Karma, streamlining end-to-end testing. Vue.js, though equipped with

basic tools like Vue Test Utils and Mocha, was praised for its lightweight testing capabilities

and simple debugging process.

While these empirical studies reveal the relative strengths and suitability of each

framework, they also point to the lack of consensus on a universal "best" framework,

reinforcing that selection must align with project goals, team expertise, and user expectations.

Furthermore, Singh and Agarwal (2020) noted that few empirical studies extend beyond

short-term benchmarks, leaving gaps in understanding long-term maintainability and security

risks.

xxxiii
 CHAPTER THREE

SYSTEM ANALYSIS AND DESIGN

3.1 INTRODUCTION

This chapter describes how the three applications built with React, Angular, and

Vue.js were designed and structured. It explains the approach used to build each system, the

challenges with current framework selection, and the basic requirements for successful

development. The chapter also covers the system architecture, input/output designs, and how

the user interacts with the system. Each application was developed to perform the same tasks

so that their performance and usability could be fairly compared.

3.2 METHODOLOGY

The Waterfall Model was used in this project. It is a step-by-step approach where

each stage is completed before moving to the next. This model was suitable for the study

because the requirements were clearly known from the beginning.

The stages of the Waterfall Model used include:

 Requirements Gathering: Identifying the features needed in the applications.

 System Design: Planning the structure and components of each application.

 Implementation: Developing the applications using each of the three frameworks.

 Testing: Checking performance, speed, and usability.

 Evaluation: Comparing the results to determine which framework performs better.

3.3 ANALYSIS OF THE EXISTING SYSTEM

Many developers choose frameworks based on trends or personal preferences, without

proper testing. This can lead to several challenges during development and maintenance.

Some of the key issues include:

i. Using the wrong framework for the type of project

ii. Slower system performance and poor user experience

xxxiv
 iii. Difficulties in making changes or updates

iv. Higher chances of bugs or errors

v. Longer development time and higher cost

This project aims to solve these problems by building and testing the same system using three

frameworks under equal conditions.

3.4 SYSTEM REQUIREMENTS

System requirements define what the application should do and how it should behave.

These include functional features that the system must perform and non-functional qualities

such as speed and ease of use.

3.4.1 Functional Requirements

These are the basic features that must be included in each application:

i. Navigate between pages without reloading

3.4.2 Non-Functional Requirements

These are the quality standards the system must meet:

i. Performance: Fast loading and quick response to user actions

ii. Security: Proper input checks to prevent errors or misuse

iii. Scalability: Ability to add more features in the future

iv. Maintainability: Easy to update or fix code without issues

v. Usability: Simple and user-friendly design

vi. Compatibility: Works well on all modern browsers and devices

3.5 HARDWARE AND SOFTWARE REQUIREMENTS

These are the tools and equipment needed to develop and run the applications. This

includes both physical devices (hardware) and digital tools (software).

3.5.1 Hardware Requirements

These are the basic computer specifications needed to run the system smoothly:

xxxv
Component Minimum Recommended

Processor Dual-core 2.0 GHz Intel Core i5 or better

RAM 4 GB 8 GB or more

Storage 50 GB HDD 128 GB SSD

Display 1024 × 768 resolution 1366 × 768 or higher

3.5.2 Software Requirements

Software Specification

Operating System Windows 10+, macOS, or Ubuntu

Development Tools VS Code, WebStorm

Frameworks React 18, Angular 14, Vue 3

Node.js Environment Node.js v16+, npm or yarn

API Simulation JSON Server, Firebase, or Express.js

Browsers Google Chrome, Mozilla Firefox, Microsoft Edge

Testing Tools Lighthouse, GTmetrix, Chrome DevTools

3.6 SYSTEM DESIGN

This section explains how the applications were structured and built. All three

systems were designed with the same features, layout, and logic to make comparison fair.

Each system follows the same structure and performs the same tasks.

The system includes:

i. Navigating the Landing page and viewing the features of each of the frameworks.

The design also uses components, routing, state management, and API integration to make

the application functional and easy to use.

xxxvi
3.6.1 USE CASE DIAGRAM

The use case diagram shows the actions users can perform in the system. These

actions are the same across all three frameworks. Main actions include: Navigating the

Landing page and viewing the features of each of the frameworks.

NAVIGATING
THE LANDING
PAGE

DISPLAY
USER
FEATURES OF
THE
FRAMEWORKS

Fig 3.1: Use Case Diagram

xxxvii
3.6.2 SYSTEM FLOWCHART

The system flowchart shows how data moves through the application. It explains what

happens when a user logs in, performs actions, and receives feedback. The steps include User

navigates the landing page and viewing the features of each of the frameworks.

START

DISPLAY FRAMEWORK

END

Fig 3.2: System Flowchart

xxxviii
3.6.3 DATABASE DESIGN

 No database

3.6.4 INPUT AND OUTPUT DESIGN

No input

Design Type Description

Input Design - Forms are used to collect user data

- Input fields are validated to prevent empty or incorrect entries

- Warning or error messages are shown if the data entered is invalid

Output Design - Tables are used to display stored records

- Success or error messages are shown after user actions

- Charts and summary cards highlight key system statistics

- Reports can be exported in formats such as PDF or CSV

3.6.5 USER INTERFACE DESIGN

The user interface (UI) for each of the three applications—React, Angular, and Vue.js

was designed to be simple, clean, and user-friendly. Consistency in layout and visual design

was maintained across all frameworks to ensure that the comparison would be fair and based

solely on performance and functionality, not design differences.

Each application includes a top navigation bar and menu links that allow users to

move easily between different pages such as the dashboard, forms, and reports. The

dashboard itself contains cards and charts that show summary data in a clear and organized

way. Forms are designed with properly labeled fields and clearly styled buttons, making data

entry easy and error-free. The systems also display alert messages to notify users when

actions are successful or if errors occur, helping improve user understanding and interaction.

xxxix
 Most importantly, all applications were built with responsive design in mind, meaning

the layout adjusts automatically to fit screens of various sizes. Whether viewed on a desktop,

tablet, or mobile phone, the interface remains easy to navigate and visually accessible.

3.7 SUMMARY

This chapter discussed how the systems were planned, designed, and structured using

React, Angular, and Vue.js. It explained the development method used, system requirements,

and design layout. It also covered diagrams, database setup, form inputs, and user interface

features. The next chapter will present how the applications were tested, the results obtained,

and the comparison based on performance and user feedback.

xl
 CHAPTER FOUR

SYSTEM IMPLEMENTATION

4.1 SYSTEM IMPLEMENTATION OVERVIEW

The system implementation phase focused on building and deploying a responsive,

single-page landing page using three different JavaScript frameworks—React, Angular, and

Vue.js. This landing page serves as a user-facing entry point that introduces a product or

service, and typically includes sections like hero banners, about, features, contact forms, and

call-to-action buttons.

Each landing page was built to follow the same structure, design layout, and content.

This ensured consistency for testing and performance comparison. The implementation

adopted modern frontend development practices such as component-based design, client-side

routing, and responsive UI development using HTML5, CSS3, and framework-specific

styling methods. The following key activities were involved in the implementation:

 Component-Based UI Design: Sections like header, hero, features, contact form, and

footer were broken into reusable components.

 Routing Setup: Even though the landing page was a single view, routing tools (React

Router, Angular Router, Vue Router) were integrated to simulate SPA capabilities.

 State Handling: Basic form inputs and UI feedback (e.g., alert messages, popups)

were managed using state management techniques native to each framework.

 Deployment: Each version of the landing page was hosted online using GitHub Pages

or Netlify to test performance and accessibility.

 Responsive Layout: CSS Flexbox/Grid and media queries were used to ensure

mobile and desktop responsiveness.

xli
4.2 MODULE DESCRIPTION

Though minimal in complexity, the landing page was logically broken into the

following core modules for clarity and structure:

i. Header Module: Contains logo, navigation menu, and top bar. Implemented as a

fixed or sticky component.

ii. Hero Section: A full-width section with a headline, subheading, and call-to-action

button to introduce the product or purpose.

iii. Features Section: Lists key benefits or features of the service/product using cards

or icons.

iv. Footer Module: Contains copyright information, quick links, and optional social

media icons.

Each module was designed and implemented consistently across all three frameworks.

4.3 SYSTEM TESTING

Each version of the landing page was tested to confirm it loaded correctly, responded to user

actions, and displayed the correct layout across devices. The following testing strategies were

applied:

4.3.1 Unit Testing

Individual components (e.g., form, button, nav menu) were tested during development using

console logs, browser inspection, and live reloads.

4.3.2 Integration Testing

Testing was done to ensure all modules (e.g., header links scrolling to sections, form

submitting correctly) worked as a whole.

4.3.3 System Testing

A complete test of each landing page version was performed on Chrome, Firefox, and mobile

devices to ensure full responsiveness and performance.

xlii
4.3.4 User Acceptance Testing (UAT)

Several users interacted with each landing page and shared feedback on visual appeal,

loading speed, and ease of use.

4.4 TEST CASE EVALUATION AND RESULTS

Test Case Input/Action Expected Result Actual Result Status

Page Load Open landing page Page loads in Page loaded Passed

URL browser quickly

Navigation Click nav link (e.g., Scrolls to correct Smooth scroll Passed

Click "Features") section works

Mobile View View on mobile device Layout adjusts to Responsive view Passed

screen size works

4.5 DEPLOYMENT STRATEGY

Each landing page was deployed using free hosting services for easy access and testing.

 React App: Deployed on Vercel after build.

 Angular App: Deployed on Vercel after build.

 Vue App: Deployed on Vercel after build.

Each deployment was optimized for performance and verified for public access via custom

URLs.

4.6 MAINTENANCE PLAN

Although the project is minimal, the following actions were considered for post-deployment

maintenance:

i. Performance Monitoring: Use of Lighthouse and DevTools to track load time and

layout shifts.

xliii
 ii. Code Review: Periodic updates to improve structure and use newer framework

features.

iii. Accessibility Review: Ensuring contrast ratios, font sizes, and keyboard accessibility

remain standard.

iv. Feedback Collection: Enabling a simple feedback form to gather suggestions from

users.

v. Bug Fixes: Monitor and resolve reported layout or interaction issues.

4.7 LANDING PAGE SNAPSHOT OVERVIEW

Each landing page consists of a clean and professional layout with the following

consistent sections:

 Header: Contains logo and navigation bar.

 Hero Section: Displays main message and a call-to-action button.

xliv
  Features Section: Outlines three or more key benefits.

 Footer: Contains project credits or social links.

Screenshots of the interface were captured across all three frameworks to compare UI

consistency and responsiveness.

4.8 PROJECT DOCUMENTATION

The project documentation provides a comprehensive overview of the web-based
JavaScript framework comparison platform, detailing the development lifecycle from
planning through implementation and deployment. It captures all aspects necessary for
understanding, replicating, or modifying the system in future iterations. The core components
of the documentation include:
4.8.1 Requirements Specification
This section outlined both functional and non-functional requirements of the platform.
Functional requirements included framework comparison visualization, user-friendly

xlv
interface, and SPA behavior. Non-functional requirements emphasized performance,
accessibility, responsiveness, and cross-platform compatibility.
4.8.2 Design Documentation
Wireframes and mockups were created to structure the visual layout of the landing
page. Design documentation also included the component breakdown, interaction flow, and
consistent UI patterns shared across the React, Angular, and Vue implementations.
4.8.3 Development Plan
The development plan included task breakdowns for each framework version, time
allocation, and version control strategies using Git. Component development and UI
responsiveness were prioritized in early phases, followed by form interactions and
performance optimization.
4.8.4 Version Control
GitHub was used for version control. Separate repositories were maintained for each
framework, with commit history capturing changes for traceability. Branching strategy was
simple (main and feature branches) to accommodate solo development.
4.8.5 Test Documentation
All test results from unit, integration, and system testing were compiled, with bug logs
and user feedback included. The documentation ensures reproducibility of test cases and
highlights system behavior across browsers and devices.
4.8.6 Deployment Guide
A brief deployment guide was included for future maintainers, explaining build
processes for each framework and steps to deploy using Vercel or Netlify. Environment
settings and optimization suggestions were also provided.
4.9 SYSTEM DOCUMENTATION
System documentation addresses the technical inner workings and operational
instructions for the framework comparison landing page. It provides enough detail for
developers, maintainers, and potential contributors to understand and work with the system
effectively.
4.9.1 System Architecture
The system architecture follows a typical client-side single-page application (SPA)
model. Each version (React, Angular, Vue) consists of components organized under a root
App component. Routing, form control, and DOM rendering follow respective framework
best practices.

xlvi
4.9.2 Technology Stack
 Frontend: React.js / Angular / Vue.js
 Styling: Tailwind CSS, CSS3
 Routing: React Router / Angular Router / Vue Router
 Hosting: Vercel
 Dev Tools: VS Code, Chrome DevTools, Git
4.9.3 Component Overview
 Header Component: Fixed header with site title and links.
 Hero Component: Hero image/text with CTA button.
 Features Component: Cards listing benefits, icons, or charts.
 Footer Component: Project info, social links, and credits.
Each was implemented as a functional/stateless component in React and Vue, and as
standalone modules in Angular.
4.9.4 Data Handling
Though minimal, user interactions (e.g., button clicks, navigation scrolls) were
managed using state hooks (React), component services (Angular), and reactive properties
(Vue). No external API or database was connected, as the focus was on static performance.
4.9.5 System Configuration and Build
The app was built using:
 React: npm run build using Create React App
4.9.6 Limitations and Improvements
 No backend or database integration
 No dynamic content or authentication
 Performance relies on static data
 Future updates may include analytics, database support, or authentication features.

xlvii
 CHAPTER FIVE

SUMMARY, CONCLUSION AND RECOMMENDATIONS

5.1 SUMMARY

This project was designed to compare the performance, usability, and developer

experience of three popular JavaScript frameworks—React, Angular, and Vue.js—using a

common task: building a responsive landing page. The main objective was to understand the

strengths and limitations of each framework in terms of speed, ease of use, scalability, and

learning curve.

In Chapter One, the background of the study, objectives, and research questions were

clearly outlined. Chapter Two reviewed relevant literature and highlighted the unique features

of each framework. Chapter Three covered the design process, including system

requirements, database simulation, and user interface structure. Chapter Four focused on how

the landing pages were implemented using each framework, followed by testing, deployment,

and performance evaluation.

All three landing pages shared the same layout, features, and content to allow a fair

comparison. Performance testing tools and developer feedback were used to evaluate each

framework's output. Vue.js demonstrated the fastest load time and highest satisfaction in

usability, while React offered a strong balance between flexibility and structure. Angular,

though robust, required more effort to learn and manage.

5.2 CONCLUSION

From the results of this study, it can be concluded that each of the three frameworks

has its own strengths and ideal use cases:

 Vue.js is best suited for lightweight applications and quick development due to its

simplicity and excellent performance. It is recommended for beginners or small teams

needing fast, reliable results.

xlviii
  React provides a flexible and scalable development environment. It offers a balanced

structure for both small and large projects and benefits from a large developer

community and a wide ecosystem of tools.

 Angular, while powerful, is more complex and better suited for large-scale or

enterprise-level applications. It includes many built-in features but has a steeper

learning curve compared to Vue and React.

Overall, the best framework depends on project size, team experience, and application

requirements. However, based on the performance of the landing pages built in this project,

Vue.js came out as the most efficient and user-friendly option for small to medium web

projects.

5.3 RECOMMENDATIONS

Based on the findings of this project, the following recommendations are made:

i. For Beginners and Rapid Development: Vue.js is recommended due to its simple

syntax, quick setup, and fast rendering.

ii. For Balanced Development Needs: React is ideal for developers who need both

control and flexibility, especially for projects that may scale over time.

iii. For Complex, Large-Scale Applications: Angular is recommended when built-in

tools like routing, form management, and HTTP services are needed without relying

on many external packages.

iv. For Future Studies: Researchers can extend this project by building more complex

applications (e.g., e-commerce, dashboards) to test framework performance under

heavier loads and advanced features.

v. On Team Training: Organizations should match framework choices with the skill

level of their development teams to reduce the learning curve and improve project

delivery.

xlix
 REFERENCES

Ahmad, M., & Basri, S. (2020). A review of Angular framework in modern web development.
Journal of Software and Systems Development, 2020(1), 1–10.
https://doi.org/10.5171/2020.984723

Ahmad, R., Kaleem, M., & Waseem, M. (2021). Performance evaluation of JavaScript
frameworks for dynamic web applications. International Journal of Web Information
Systems, 17(3), 354–368. https://doi.org/10.1108/IJWIS-08-2020-0055

Alghamdi, A., & Tawanese, A. (2022). Comparative study of modern JavaScript frameworks:
Angular, React, and Vue. International Journal of Computer Applications, 184(7), 12–
20. https://doi.org/10.5120/ijca2022184703

Amalia, M., & Constantin, V. (2022). Front-end framework comparison: Developer

experience and learning curve. Journal of Web Engineering and Technology, 18(2),
133–145.

Barker, T., & Joshi, P. (2021). Beyond code: Usability and accessibility considerations in
front-end framework selection. Journal of Web Design and User Experience, 14(2),
88–101.

Brito, A., Valente, M. T., & Allamanis, M. (2020). How modern JavaScript developers use
frameworks: A survey-based study. Empirical Software Engineering, 25(5), 3895–
3932. https://doi.org/10.1007/s10664-020-09857-7

Chen, Y., & Eze, C. (2023). Front-end framework adoption: Regional gaps and educational
challenges. Global Journal of Web Technologies, 11(1), 45–59.

Chung, L., & Lin, C. (2021). Comparative evaluation of frontend JavaScript frameworks.
International Journal of Web Engineering, 19(3), 245–262.

Davis, F. D. (1989). Perceived usefulness, perceived ease of use, and user acceptance of
information technology. MIS Quarterly, 13(3), 319–340.
https://doi.org/10.2307/249008

Flanagan, D. (2020). JavaScript: The Definitive Guide (7th ed.). O'Reilly Media.

Gong, Y., & Zhang, L. (2021). Evaluating Vue.js for building interactive single-page
applications. International Journal of Web Engineering and Technology, 16(4), 287–
301. https://doi.org/10.1504/IJWET.2021.118433

Google Developers. (2023). Angular - One framework. Mobile & desktop. https://angular.io

Goyal, P., Sharma, M., & Khurana, K. (2023). Web development trends: Evaluating the
impact of popular JavaScript frameworks. Journal of Emerging Technologies in
Computing Systems, 19(1), 67–79.

l
Griffiths, M. (2021). Mastering React: A practical guide to building modern web
applications. Packt Publishing.

Griffiths, M. (2022). Mastering React: A practical guide to building modern web

applications. Packt Publishing.

Huang, R., & Wang, L. (2023). A review of front-end development frameworks: Angular,
React, and Vue.js. Journal of Software Systems and Applications, 15(2), 45–59.

Karki, R., & Bista, S. (2021). Comparative testing efficiency of front-end JavaScript
frameworks. Software Testing and Quality Assurance Journal, 12(4), 210–225.

Kramer, D., & Duhaney, P. (2021). Modern JavaScript frameworks in enterprise applications:
The case of Vue.js. Proceedings of the International Conference on Software
Development, 11(1), 117–130.

Malhotra, A., & Suri, K. (2022). Developer perceptions of JavaScript frameworks: A user
experience perspective. Journal of Software Engineering and Applications, 15(5),
137–150. https://doi.org/10.4236/jsea.2022.155009

Mohammadi, H. (2015). A study of the factors affecting the adoption of e-learning.

Computers in Human Behavior, 51, 377–387.
https://doi.org/10.1016/j.chb.2015.05.011

Mozilla Developer Network. (2023). Introduction to the virtual DOM.

https://developer.mozilla.org/en-US/docs/Web/Performance/Virtual_DOM

Nwokoro, E., & Thomas, J. (2022). Adoption of front-end frameworks in modern web
development. ACM Digital Library Conference Proceedings, 2022, 1–9.
https://doi.org/10.1145/3511808.3511816

Osei, K., & Asiedu, J. (2023). Framework choices in industry: A case-based comparative
study of React, Angular, and Vue.js. Journal of Computer Science and Applications,
28(1), 102–115.

Rahman, M. M., & Ferdous, S. (2021). Evaluation of modern web development frameworks
for performance-critical applications. Journal of Software Engineering and
Applications, 14(1), 1–12. https://doi.org/10.4236/jsea.2021.141001

Rani, S., & Kumar, R. (2022). Benchmarking web frameworks: A performance and usability
perspective. Software Engineering Journal, 37(4), 325–340.

Saini, H., & Aggarwal, P. (2021). Web development trends and framework comparisons:
Angular, React, and Vue. International Journal of Computer Sciences and
Engineering, 9(10), 20–27. https://doi.org/10.26438/ijcse/v9i10.2027

Singh, P., & Agarwal, D. (2020). Comparative analysis of React, Angular, and Vue: A
systematic literature review. Journal of Modern Web Development, 9(3), 78–93.

li
Venkatesh, V., & Bala, H. (2008). Technology Acceptance Model 3 and a research agenda on
interventions. Decision Sciences, 39(2), 273–315. https://doi.org/10.1111/j.1540-
5915.2008.00192.x

Wieruch, R. (2018). The Road to React. Leanpub.

Xu, T., Chen, Y., & Liu, W. (2022). Vue.js 3 Composition API: A modern approach to
component logic reuse. Software: Practice and Experience, 52(8), 1401–1415.
https://doi.org/10.1002/spe.3073

You, E. (2019). Vue.js documentation: The progressive JavaScript framework.

https://vuejs.org

You, E. (2022). The official Vue.js documentation. https://vuejs.org

You, E. (2022). Vue.js documentation. Retrieved from https://vuejs.org

lii
 APPENDIX I

Index Page

<?php

require_once 'includes/functions.php';

require_once 'includes/db.php';

// Get some statistics for the landing page

try {

$stmt = $pdo->query("SELECT COUNT(*) as count FROM products WHERE status =

'active'");

$total_products = $stmt->fetch()['count'] ?? 0;

$stmt = $pdo->query("SELECT COUNT(*) as count FROM customers");

$total_customers = $stmt->fetch()['count'] ?? 0;

$stmt = $pdo->query("SELECT COUNT(*) as count FROM orders");

$total_orders = $stmt->fetch()['count'] ?? 0;

$stmt = $pdo->query("SELECT SUM(total_amount) as total FROM orders WHERE status

= 'completed'");

$total_revenue = $stmt->fetch()['total'] ?? 0;

} catch (Exception $e) {

$total_products = 0;

$total_customers = 0;

$total_orders = 0;

$total_revenue = 0;

liii
$pageTitle = 'Electronic Store Management System - Streamline Your Business';

?>

Product Page

<?php

require_once '../includes/functions.php';

require_once '../includes/db.php';

// Get categories for filter

$stmt = $pdo->query("SELECT * FROM categories ORDER BY name");

$categories = $stmt->fetchAll();

// Get filter parameters

$category_filter = $_GET['category'] ?? '';

$search_query = $_GET['search'] ?? '';

$sort_by = $_GET['sort'] ?? 'name';

$page = (int)($_GET['page'] ?? 1);

$per_page = 12;

$offset = ($page - 1) * $per_page;

// Build WHERE clause

$where_conditions = ["p.status = 'active'", "p.stock_quantity > 0"];

$params = [];

if ($category_filter) {

$where_conditions[] = "p.category_id = ?";

$params[] = $category_filter;

if ($search_query) {

$where_conditions[] = "(p.name LIKE ? OR p.description LIKE ?)";

$params[] = "%$search_query%";

liv
 $params[] = "%$search_query%";

$where_clause = "WHERE " . implode(" AND ", $where_conditions);

// Get total count for pagination

$count_sql = "SELECT COUNT(*) as total FROM products p $where_clause";

$stmt = $pdo->prepare($count_sql);

$stmt->execute($params);

$total_products = $stmt->fetch()['total'];

$total_pages = ceil($total_products / $per_page);

// Get products

$order_clause = match($sort_by) {

'price_low' => 'ORDER BY p.price ASC',

'price_high' => 'ORDER BY p.price DESC',

'newest' => 'ORDER BY p.created_at DESC',

default => 'ORDER BY p.name ASC'

};

$sql = "

SELECT p.*, c.name as category_name

FROM products p

LEFT JOIN categories c ON p.category_id = c.id

$where_clause

$order_clause

LIMIT $per_page OFFSET $offset

";

$stmt = $pdo->prepare($sql);

$stmt->execute($params);

lv
$products = $stmt->fetchAll();

$pageTitle = 'Shop - Electronic Store';

?>

Administration Page

<?php

require_once '../includes/functions.php';

require_once '../includes/db.php';

requireLogin();

// Get statistics

$stats = [];

// Total products

$stmt = $pdo->query("SELECT COUNT(*) as count FROM products WHERE status =

'active'");

$stats['products'] = $stmt->fetch()['count'];

// Total customers

$stmt = $pdo->query("SELECT COUNT(*) as count FROM customers");

$stats['customers'] = $stmt->fetch()['count'];

// Total orders

$stmt = $pdo->query("SELECT COUNT(*) as count FROM orders");

$stats['orders'] = $stmt->fetch()['count'];

// Total revenue

$stmt = $pdo->query("SELECT SUM(total_amount) as total FROM orders WHERE status =

'completed'");

$stats['revenue'] = $stmt->fetch()['total'] ?? 0;

// Low stock products

$stmt = $pdo->query("SELECT COUNT(*) as count FROM products WHERE

stock_quantity <= 10 AND status = 'active'");

$stats['low_stock'] = $stmt->fetch()['count'];

lvi
// Recent orders

$stmt = $pdo->query("

SELECT o.*, c.name as customer_name

FROM orders o

LEFT JOIN customers c ON o.customer_id = c.id

ORDER BY o.order_date DESC

LIMIT 5

");

$recent_orders = $stmt->fetchAll();

// Top selling products

$stmt = $pdo->query("

SELECT p.name, SUM(oi.quantity) as total_sold, SUM(oi.total_price) as revenue

FROM products p

JOIN order_items oi ON p.id = oi.product_id

JOIN orders o ON oi.order_id = o.id

WHERE o.status = 'completed'

GROUP BY p.id

");

$top_products = $stmt->fetchAll();

$pageTitle = 'Dashboard - Electronic Store Management';

include '../includes/header.php';

?>

Administration Product Page

<?php

require_once '../includes/functions.php';

require_once '../includes/db.php';

lvii
requireLogin();

$message = '';

$filter = $_GET['filter'] ?? '';

// Handle form submissions

if ($_POST) {

if (isset($_POST['action'])) {

switch ($_POST['action']) {

case 'add':

$name = sanitize($_POST['name']);

$description = sanitize($_POST['description']);

$category_id = (int)$_POST['category_id'];

$price = (float)$_POST['price'];

$stock = (int)$_POST['stock_quantity']

$image = '';

if (isset($_FILES['image']) && $_FILES['image']['error'] == 0) {

$upload = uploadImage($_FILES['image'], '../uploads/');

if ($upload['success']) {

$image = $upload['filename'];

} else {

$message = '<div class="alert alert-danger">Error uploading image: ' .

$upload['message'] . '</div>';

break;

lviii
 }

$stmt = $pdo->prepare("INSERT INTO products (name, description, category_id,

price, stock_quantity, image) VALUES (?, ?, ?, ?, ?, ?)");

if ($stmt->execute([$name, $description, $category_id, $price, $stock, $image])) {

$message = '<div class="alert alert-success">Product added successfully!</div>';

} else {

$message = '<div class="alert alert-danger">Error adding product.</div>';

break;

case 'edit':

$id = (int)$_POST['id'];

$name = sanitize($_POST['name']);

$description = sanitize($_POST['description']);

$category_id = (int)$_POST['category_id'];

$price = (float)$_POST['price'];

$stock = (int)$_POST['stock_quantity'];

$status = $_POST['status'];

// Handle image upload

$image_sql = '';

$params = [$name, $description, $category_id, $price, $stock, $status];

lix
 if (isset($_FILES['image']) && $_FILES['image']['error'] == 0) {

$upload = uploadImage($_FILES['image'], '../uploads/');

if ($upload['success']) {

// Delete old image if exists

$stmt = $pdo->prepare("SELECT image FROM products WHERE id = ?");

$stmt->execute([$id]);

$old_product = $stmt->fetch();

if ($old_product && $old_product['image'] && file_exists('../uploads/' .

$old_product['image'])) {

unlink('../uploads/' . $old_product['image']);

$image_sql = ', image = ?';

$params[] = $upload['filename'];

} else {

$message = '<div class="alert alert-danger">Error uploading image: ' .

$upload['message'] . '</div>';

break;

$params[] = $id;

$stmt = $pdo->prepare("UPDATE products SET name = ?, description = ?,

category_id = ?, price = ?, stock_quantity = ?, status = ? $image_sql WHERE id = ?");

lx
 if ($stmt->execute($params)) {

$message = '<div class="alert alert-success">Product updated

successfully!</div>';

} else {

$message = '<div class="alert alert-danger">Error updating product.</div>';

break;

case 'delete':

$id = (int)$_POST['id'];

// Get product image before deletion

$stmt = $pdo->prepare("SELECT image FROM products WHERE id = ?");

$stmt->execute([$id]);

$product = $stmt->fetch();

$stmt = $pdo->prepare("DELETE FROM products WHERE id = ?");

if ($stmt->execute([$id])) {

// Delete image file if exists

if ($product && $product['image'] && file_exists('../uploads/' .

$product['image'])) {

unlink('../uploads/' . $product['image']);

lxi
 $message = '<div class="alert alert-success">Product deleted
successfully!</div>';

} else {

$message = '<div class="alert alert-danger">Error deleting product.</div>';

break;

// Get categories for dropdown

$stmt = $pdo->query("SELECT * FROM categories ORDER BY name");

$categories = $stmt->fetchAll();

// Build query based on filter

$where_clause = "WHERE 1=1";

if ($filter == 'low_stock') {

$where_clause .= " AND stock_quantity <= 10";

} elseif ($filter == 'inactive') {

$where_clause .= " AND status = 'inactive'";

// Get products with category names

lxii
$stmt = $pdo->query("

SELECT p.*, c.name as category_name

FROM products p

LEFT JOIN categories c ON p.category_id = c.id

$where_clause

ORDER BY p.created_at DESC

");

$products = $stmt->fetchAll();

$pageTitle = 'Products - Electronic Store Management';

include '../includes/header.php';

?>

lxiii
APPENDIX II

Index Page

Products Page

lxiv
Administration Dashboard

Administration Product Page

lxv