Angular Vs React Vs Vue: Which One To Choose

The process of selecting the right technology for developing any new web application is not always easy. We know that JavaScript is the top frontend programming language right now. It has around 83 distinct frameworks and libraries, which makes the selection even more difficult. Among the many options available today, Angular, React, and Vue have become three of the most widely discussed choices among software development companies. Each of these frameworks and libraries offers a different way to build modern, interactive user interfaces, and each has its own strengths.

Angular provides a complete framework with many built-in features, which makes it a strong choice for large and structured applications. React, the most popular library for SPA development, takes a more flexible approach by providing you with the freedom to select supporting tools and libraries as per your requirements. The position of Vue sits somewhere between these two JS technologies, as it provides a simple learning experience along with providing enough flexibility for growing projects. 

In this blog, we’ll help you choose the right technology for your software development project by comparing Angular vs React vs Vue on different parameters. We’ll also learn about each of them separately, with their features, benefits, and limitations.

What is Angular?

Angular is an open-source front-end JavaScript framework written in TypeScript. It is a component-based web framework developed by Google to build different types of scalable, dynamic, and interactive web applications. It’s a complete platform that provides Angular Development Companies with everything required for full-fledged application development, from state management and routing to client-server communication.

What Are the Key Features of Angular?

• Two-Way Data Binding: This data binding mechanism automatically synchronizes data between the component class, i.e., the model, and the HTML template, i.e., the View. This means that modifications made in the Model are reflected in the View in real time and vice versa. 
• Component-based Architecture: Angular is built up of reusable self-contained units known as components. Every component has its own logic handled by the TypeScript class, an HTML template, and CSS responsible for the styling.
• Dependency Injection: Angular implements this design pattern to share logic between components by creating a service that injects code into components. This promotes modular programming and facilitates dependency management. 
• Angular CLI: It’s a text-based command-line interface tool you can use to develop, test, deploy, scaffold, and maintain Angular applications directly from the terminal. It automates complex configuration tasks so that you can focus solely on writing application logic.
• Routing: Angular has a built-in, feature-rich routing library named @angular/router to deal with client-side navigation in Angular applications. It helps you map browser URL paths to specific components without performing full-page reloads. 
• TypeScript: Angular is written in TypeScript, which is a superset of JavaScript. The strongly typed nature of TypeScript helps catch errors during compile time instead of runtime, infers data contexts automatically, and assigns types to properties.

What Are the Benefits of Angular?

• Large Ecosystem: Angular offers a comprehensive array of tools and libraries for reactive programming, project scaffolding, and testing. It is a unified framework that enhances the developer experience.
• Increased Development Efficiency: The dependency injection system allows developers to write modular and testable code. It also streamlines the management of services and components, thereby increasing development efficiency. 
• Reduced Errors: Two-way data binding ensures that the View and Model remain in sync. This not only provides real-time interactivity but also reduces the possibility of errors by automatically updating the user interface when modifications occur. 
• Reusability: Angular adopts a modular approach to software development, building applications by assembling small, independent chunks of code. Each module is developed and deployed independently. This makes it easier to maintain and scale the application. These code modules are reusable.

What Are the Disadvantages of Angular?

• Learning Curve: The framework includes several complex topics that are fundamental for development. Its syntax is also more complex compared to other frameworks. resulting in a steep learning curve for Angular. 
• Migration Challenges: Migrating an existing app from a different technology framework to Angular is challenging. Even updating from an older version to the latest version can be difficult when using Angular.

What is ReactJS?

Facebook developed a comprehensive JavaScript-based UI library called React. It is open-source and enables you to build reusable UI components. By combining these reusable components, you can create a full-fledged user interface for your application.

Creating a dynamic UI is a complex process, but it can be easily streamlined using this frontend framework. 

What Are the Features of ReactJS?

• Component-Based Architecture: React uses a component-based architecture where each component is independent and has its own logic and structure. These components are reusable and help to create complex user interfaces. 
• Virtual DOM: React makes use of the virtual DOM, i.e., it stores a lightweight visual representation of the user interface in memory. All changes are first applied to the Virtual DOM. After comparing it with the previous version, only the necessary updates are then made to the actual DOM.
• JSX: JavaScript XML (JSX) is a syntax extension of JavaScript that enables you to write JavaScript and HTML-like code inside the React components. 
• One-Way Data Binding: As the name suggests, data flow in React is unidirectional. It’s from a component’s state to the user interface and from parent components to child components via props. 
• React Native: It is an open-source mobile application framework that allows you to create cross-platform native mobile apps using the React framework.

What Are the Advantages of ReactJS?

• Easy to Learn: With its simple syntax, React is easy to learn if you are familiar with HTML. You don’t even need to have a deep understanding of TypeScript. 
• Open-source: React is an open-source framework supported by a large and active community.
• Flexibility: React provides high-level flexibility, which allows you to build responsive applications. 
• Easy Migration: Facebook has included “codemods” in its React offerings, enabling you to automate most of the migration process between different versions.

What Are the Disadvantages of ReactJS?

• Frequent Updates: ReactJS is updated frequently, which leaves developers little time to document an organized approach. Until they do, their approach or functionality becomes outdated. 
• Unopinionated: React doesn’t offer specific procedures or guiding principles for developers to follow. This gives too many options, which ends up confusing them and delaying projects.

What is VueJS?

Deriving from his experience with Angular at Google, Evan You launched a new framework called Vue in 2014. It retains the best elements of Angular and is still considerably lightweight. 

This open-source, JavaScript-based framework offers pre-built directives and user-defined directives. In addition to that, it also allows you to extend those directives. Powered by an MVVM architecture design pattern, Vue helps you create high-quality SPAs and engaging UIs for web apps.

What Are the Features of VueJS?

• Vue Router: It is the official client-side routing library of Vue that intercepts browser navigation and dynamically updates the DOM without reloading the entire page.
• Virtual DOM: Vue also employs a JavaScript representation of the DOM, like React. Vue creates this Virtual DOM on detecting changes in a component’s state. It then compares it with the previous version and, on identifying the differences, applies the necessary changes to the actual DOM.
• Data Binding: Vue’s reactive data binding allows smooth synchronization between the data in the Vue instance and its presentation in the HTML markup. This improves the responsiveness of Vue.js applications.
• Components: Components in Vue.JS are independent elements that come with their own view, logic, and styles. Following a modular approach, VueJs enables you to create reusable code that can be used multiple times in your application. 
• Event Management: Using the v-on directive, you can respond to user actions like clicks, form submissions, and keyboard input directly in templates.

What Are the Advantages of VueJS?

• Lightweight: The Vue zip file is only 18 KB. Using less memory allows the framework to install quickly and operate faster. This also enhances the user experience and improves SEO. 
• Well-documented: Vue’s documentation is well-organized and can help you build a full-scale application even if you are only familiar with the basics of JavaScript and HTML. 
• Adaptability: Vue.JS shares many similarities with other frameworks such as React and Angular in terms of design and architecture. So, you can easily switch frameworks or migrate your app to another framework. 
• Flexibility: Developers can use Vue either as a full-fledged framework to build large-scale apps or use it as a simple library for specific features.

What Are the Disadvantages of VueJS?

• Learning Curve: Although Vue is popular for its simplicity, it can be difficult to learn when building large-scale applications. As project complexity increases, the codebase tends to become messy. 
• Limited Ecosystem: Vue lacks the necessary resources. Hence, it has a small ecosystem compared to frameworks like Angular and React. Consequently, it offers limited support and fewer third-party libraries.

Detailed Comparison between Angular, React and Vue

We’ll now compare Angular vs React vs Vue on the ten important parameters given below and understand how they differ from each other in terms of these parameters:

1. Popularity 

Angular was created by Google which automatically makes it popular amongst developers. It is often used to develop large-scale applications by experienced developers. According to data by BuiltWith, Angular powers more than 97k websites. It has 68k stars on Angular GitHub.

React is among the most popular JavaScript libraries, with around 160k stars on React GitHub. According to BuiltWith’s statistics, it is a product of Facebook and powers more than 11 million websites.

Vue holds 176k stars on Vue GitHub and has solid independence compared to Angular and React. It has an open-source community and is used by more than 2 million websites, as per BuiltWith.

Besides this, amongst all the popular web app frameworks, ReactJs stands 2nd with 35.9%, Angular at 3rd position with 25.1%, and VueJS in 7th position with 17.3% of usage by developers in the market.

2. Rendering: Angular vs Vue vs React

There are two types of rendering: client-side and server-side. Every framework has a mechanism in place to perform rendering. Let’s see how each of our contenders handles rendering.

Rendering in Angular 

By default, all web pages in Angular are rendered in the DOM, and apps execute in the browser as part of client-side rendering. This approach can lead to issues such as reduced visibility for search engine crawlers and poor app performance. 

However, Angular also allows you to choose server-side rendering using Angular Universal. With this solution, you can easily render apps on the server side and then return static HTML content to the browser on the client side. SSR improves page loading time, user experience, social media previews, and SEO performance. 

Hence, the overall performance of your Angular application can be enhanced using server-side rendering.

Rendering in React 

React delivers a basic HTML file to the client. This file includes a reference to the JavaScript bundle that contains the ReactJS code. The client can render the web page only after receiving this bundle, which contains the necessary logic and components. 

However, React faces the same problems as Angular regarding client-side rendering. To avoid them, you can opt for server-side rendering in React by using frameworks such as Gatsby and NextJS. 

Additionally, by utilizing React Server Components, you can write server-side code, such as data queries, directly within React components. Although this approach is not technically SSR, it reduces the amount of data transferred between the server and client-side. As a result, the web page loads faster, improving your app’s performance.

Rendering in Vue 

Vue supports both SSR and CSR, just like React and Angular. In Vue CSR, more computing power and memory are required as the complete rendering process occurs on the client side. This can slow down initial page load times and significantly impact the performance of the Vue application. 

Using frameworks like Express or NextJS, you can manually add custom SSR functionality to enable server-side rendering in Vue.

3. Architecture: Angular vs React vs Vue

The architecture of a framework determines how software applications can be structured and how well they will function.

Angular Architecture

Angular was initially based on an MVC architecture. However, its component-based approach in recent releases means it no longer strictly follows the MVC pattern. Every Angular project is structured around modules, components, and services.

Modules are collections of components bundled together to help organize your code more efficiently. They represent specific features or functionalities of your application. Every Angular component includes a template, a class that defines the application logic, and metadata that specifies how the component should be configured and where its view should be rendered.

Services consist of code required by various components across the application. They work alongside components to fetch necessary data and validate inputs. With such a well-organized architecture, Angular clearly enables developers to create large and complex web applications.

React Architecture

React is easy to use because you only need a few lines of code to get started. This simplicity comes from its component-based architecture. As a UI library, React provides different types of UI components that you can use to build websites and web applications.

These components are independent and reusable. They have their own logic and can control their own rendering. By using props as inputs, React components produce elements as outputs, which are then displayed to users.

React uses a Virtual DOM to improve an app’s performance and responsiveness. Whenever a component changes, the update is first reflected in the Virtual DOM, which helps determine the most efficient way to update the actual web page.

Moreover, React uses JSX, which allows developers to combine JavaScript and HTML-like syntax to create intuitive UI elements for their applications.

Vue Architecture

Vue.js has a simple architecture because its components are small, self-contained, and reusable. The architectural pattern of Vue is partly inspired by the MVVM model, but Vue does not strictly adhere to it.

With Vue, most of your work focuses on the ViewModel layer. The framework handles data in a way that supports rendering an updated view. All the relevant HTML, JavaScript, and CSS code for your app can be organized within Single-File Components (SFCs), which use the .vue file extension.

If you are working on a Vue project, especially a large one, using SFCs can help you organize your code effectively. Vue is also a reactive framework. Whenever the underlying data changes, the relevant components in your app automatically update because the application data is tied to those components.

This makes Vue relatively easy to use. Additionally, Vue uses a Virtual DOM, similar to React, which helps optimize updates and improve application performance.

4. Ecosystem: Angular vs React vs Vue

Angular offers the NgRx project for its state management, and this is inspired by Redux. Angular has started offering Angular Material, which guides developers in creating Angular applications with the use of the right Material Design. It enables developers to create cross-platform apps with the use of NativeScript. Angular is also a part of the well-known MEAN stack, which is a combination of Angular with ExpressJS, MongoDB, and NodeJS.

React’s popularity makes it easy for web app developers to find React-based components and elements for developing web interfaces. Besides, React’s ecosystem includes React Native, which enables developers to create native Android and iOS apps. React is a part of the MERN stack, which is a combination of React with Express.js, NodeJS, and MongoDB.

Vue can use Redux, but there are no official bindings between the two. Vuex is the official state management library for Vue. This framework enables developers to use a wide range of components offered components to create applications.

5. Tools Used in Angular React and Vue Development

Loads of tools are available in the market that developers can leverage to deliver peak performance and an elevated user experience. Some tools are framework-agnostic and can be used with any framework for similar purposes. Meanwhile, other tools are framework-specific and cater to the specific requirements of the framework. Let us take a look at the toolkit of our contenders.

Tools in Angular 

• Ng-Inspector: When it comes to developing and debugging cross-browser Angular applications, developers prefer to use Ng-Inspector. It adds an auditor sheet in the browser to track the app. 
• ng2-charts: This is a charting library that allows you to integrate Chart.js with your Angular app. It offers a variety of charts like bar, donut, line, and pie charts. The bundle size of ng2-charts is 18.2kb minified and 5.9kb gzipped. 
• Angular-GETTEXT: If you need a language translation tool, then Angular-gettext could come in handy. This open-source tool can help you translate everything that is in English. 
• ng-animate: It is an animation module providing some flexible animations and transitions to make the user interface of your Angular application more engaging and interactive. The bundle size of this tool is 27.9kb minified and 3.3kb gzipped. All the animations offered by ng-animate are completely reusable.
• Videoangular: It is a free-to-use and one-stop solution for all video-related requirements in your Angular application. Videoangular allows you to easily install an HTML5-based video player in your mobile and desktop apps.

Tools in React 

• Create React App: Setting up a project with React was very challenging. Therefore, Google developed this boilerplate project. Create React App is a tool that can help you set up everything you need for your React development project with a single command.
• Zustand: Although React offers powerful state management solutions such as MobX and Redux, they are heavyweight. As an alternative, React also provides a lightweight state management solution called Zustand. It uses a minimal API to eradicate all the complexities of state management. Zustand comes with a bundle size of 3kb minified and 1.1kb gzipped. 
• React Hook Form: Specifically designed to streamline the form development process for React applications, React Hook Form is a form management and validation library. This robust library is also lightweight, as its bundle size is 26.6kb minified and 9.6kb gzipped. 
• SWR: React provides remote data-fetching functionality thanks to this React Hook library. Features such as pagination, error handling, caching, prefetching, and revalidation are available in SWR. It also supports static site generation and server-side rendering. The bundle size of SWR is 10 KB minified and 4.4 KB gzipped. 
• React Belle: A React library that provides reusable components such as Card, Toggle, Button, Select, and more. Components in React Belle are easy to configure or customize. It adheres to ARIA accessibility standards as well. 

Tools in Vue 

• VueX: It is a one-stop solution for all your state management problems in Vue. Developers can also leverage it to ensure predictable state modifications. 
• Vue Router: This is a feature-rich tool from Vue for Routing. It enables Vue developers to create reusable components. Vue Router makes it easy for users to navigate between different web pages in the same application. 
• Vuelidate: Vue offers a lightweight library with a bundle size of 12.4kb minified and 3.7kb gzipped. Its small size is helpful as it doesn’t put much strain on the overall size of the application and leaves only a small footprint. Vuelidate simplifies the way to manage form validation. 
• ViteJS: It is a build tool used to ensure fast build times and rapid HMR. Using it helps maximize the potential of native browser APIs and ES modules. 
• Pinia: With a bundle size of 21.2kb minified and 7.6kb gzipped, Pinia is a state management solution for the Vue framework. 

6. Optimization Techniques: Angular vs React vs Vue

Let us now compare the optimization methods of these frameworks used to boost the efficiency of their code. 

Optimization Techniques in Angular Development 

• Ahead-of-time compilation: It reduces the browser’s workload during runtime, which helps enhance performance. 
• OnPush change detection strategy: It is an approach where you check the component only when its input or output changes. Preventing unnecessary component re-renderings boosts your app performance. 
• Unsubscribing Observables: You need Observables for asynchronous programming. Once your task is completed, make sure you unsubscribe from Observables properly because they continuously emit events that can harm your app’s performance.

Optimization Techniques in React Development 

• Use React Memoization: You can’t afford to re-render expensive function calls every time. So, use memoization through the useMemo Hook to cache the results of your expensive function call. Caching the results will help you ensure that the results are returned every time they are requested unless there are changes in the dependencies of the function. 
• Immutable data structures: Leverage immutable data structures to improve the efficiency of your state updates. This optimization technique is largely used to enhance the performance of large applications that have a complex state.

Optimization Techniques in Vue Development 

• Lazy loading: You can use lazy-loaded routes and their related dependencies using Vue Router. The defineAsyncComponent method also allows you to lazy-load specific components. 
• Optimize event handling: Events such as @mouseover and window. scroll can cause some serious performance hits. However, optimizing the event management mechanism allows you to improve performance. You can limit the number of times events are processed by using the debounce button.

7. Migrations: Angular vs React vs Vue

When it comes to migration, Angular is a framework that releases new major updates every six months. Angular also waits six months before releasing any major API changes. This schedule means that Angular developers have two release cycles per year to make the necessary changes according to the update timeline. 

In comparison with Angular, React is called a stable framework, and because of this, companies like Airbnb and Twitter use it. React comes with new upgrades accessible through react-codemod scripts, which makes migration a very easy process. 

Vue has released Vue 3 version but there is not much difference between Vue 2 and Vue 3, which means that almost 90% of the APIs are the same in these versions, and this makes migration very easy. Besides, Vue also offers a Vue 1 to Vue 2 migration tool, which helps developers to assess the app’s status effectively. 

8. Performance and Memory: Angular vs React vs Vue

Angular Performance

Angular is designed to handle large and complex applications where performance needs to remain stable as the project grows. It uses Ahead-of-Time (AOT) compilation to prepare code before the application runs, which can improve loading and execution. Its Ivy rendering engine and change detection system also help update the interface efficiently. However, Angular includes many built-in features, which can make applications heavier than those built with lighter frameworks. You may need to optimize bundles, lazy-load modules, and manage change detection carefully for the best results.

React Performance

React delivers strong performance by updating only the parts of the interface that need to change. Its virtual DOM helps reduce unnecessary direct interactions with the browser’s DOM, which can make frequent UI updates more efficient. You can further improve performance with techniques such as memoization, code splitting, lazy loading, and selective rendering. React’s flexible architecture also allows you to decide how much optimization your application needs. However, performance depends heavily on how components and state are structured. Poorly managed rendering can still create unnecessary updates.

Vue Performance

Vue is known for combining a lightweight structure with an efficient reactive system. This makes it capable of delivering fast and responsive interfaces. Its virtual DOM helps minimize unnecessary updates when application data changes, whereas its reactivity system tracks which parts of the interface actually need to be refreshed. This can make Vue particularly effective for small and medium-sized applications where simplicity and speed are important. Vue can also support larger applications, but you may need additional optimization as complexity increases. Features such as lazy loading and component-level optimization can help maintain performance.

9. Learning Curve

The learning curve determines how much time it takes for a beginner to learn the framework and become proficient in using it to build functional features and deploy the application code. If the framework has an easy-to-moderate learning curve, it takes less time and effort for an organization to train new members for an established project.

Angular’s Learning Curve

Angular generally takes more time to learn because it provides a complete framework with many concepts built into its structure. Beginners need to become comfortable with TypeScript, components, directives, services, dependency injection, modules, and other Angular-specific features. As your project progresses towards advancement, you need to learn complex concepts such as RxJS and change detection. This can feel overwhelming at first, particularly if you are new to front-end development. However, Angular’s structured approach can make development more consistent once the core concepts are understood. 

React’s Learning Curve

React has a moderate learning curve because its core concept is relatively simple, but building a complete application often requires learning additional tools. First of all, you need to understand components, JSX, props, state, and React’s rendering approach. As the application grows, you may also encounter routing, state management, data fetching, and frameworks such as Next.js. This flexibility gives you freedom to choose tools that suit your project, but if you’re a beginner, you may find the number of choices confusing. React can therefore be easy to start with but becomes difficult as you proceed in your learning journey. 

Vue’s Learning Curve

Vue is often considered the easiest framework for beginners because its syntax is simple and its basic concepts can be understood quickly. You can start by building small interface components without learning its large ecosystem of tools. Vue also supports gradual adoption, so it can be introduced into an existing project without requiring a complete rewrite. Its clear documentation and simple structure make the initial learning process comfortable if you’ve just started. However, its flexibility can sometimes leave teams with more architectural choices as applications grow.

Sample Application Development

Angular

Prerequisites: Install Node and Angular CLI in your system.

Step 1: Create an Angular app with the following command.

> ng new to-do-list

Move to the project directory using the following command

> cd to-do-list

Step 2: Create an interface for To-do Item

export interface ToDoItem { 
  task: string; 
  isCompleted: boolean; 
}

Step 3: Create 3 components in src folder using the following commands:

> ng generate component todo  
> ng generate component form 
> ng generate component todolist

1. Create a Todo Component which contains logic to list down the to-do items.
2. Create a Form component which contains logic to add a new task 
3. Create a TodoList component which contains logic for Listing, Mark as Complete, and Delete the task.

1. ToDo component:

This component is responsible for displaying an individual to-do item along with a delete button and a checkbox to mark an item as complete. 

Template file: We have used a <p> to display the title, a checkbox to mark the completion of the task, and a delete button.

<div class="center"> 
  <div class="col-9"> 
    <p 
      class="title" 
      [ngStyle]="{ 'text-decoration': isCompleted ? 'line-through' : 'none' }" 
    > 
      {{ title }} 
    </p> 
  </div> 
  <div class="col-1"> 
    <input 
      type="checkbox" 
      [checked]="isCompleted" 
      (change)="isCompleted = !isCompleted" 
    /> 
  </div> 
  <div class="col-2"> 
    <img 
      src="assets/delete.png" 
      alt="Delete" 
      class="delete-icon" 
      (click)="onDelete()" 
    /> 
  </div> 
</div>

TS file: The TS file contains a 2 input properties: title and isCompleted. Along with this there is a delete method which is emits the event to the parent component.

import { Component, EventEmitter, Input, Output } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
@Component({ 
  selector: 'app-to-do', 
  standalone: true, 
  imports: [CommonModule], 
  templateUrl: './to-do.component.html', 
  styleUrl: './to-do.component.css', 
}) 
export class ToDoComponent { 
  @Input() title: string = ''; 
  @Input() isCompleted: boolean = false; 
  @Output() deleteTodoItem = new EventEmitter<void>(); 
 
  onDelete(): void { 
    this.deleteTodoItem.emit(); 
  } 
}

2. to-do-list: display ToDo-list

Template file: use the *ngFor directive to iterate over each element in the toDoList.

<div *ngFor="let item of toDoList"> 
  <app-to-do 
    [title]="item.task" 
    [isCompleted]="item.isCompleted" 
    (deleteTodoItem)="deleteTodoItem(item)" 
  ></app-to-do> 
</div>

TS file: The TS file takes the to-do list as input and a delete method that emits the event to the parent component.

import { Component, EventEmitter, Input, Output } from '@angular/core'; 
import { ToDoComponent } from '../to-do/to-do.component'; 
import { CommonModule } from '@angular/common'; 
import { ToDoItem } from '../../ToDoItem'; 
@Component({ 
  selector: 'app-to-do-list', 
  standalone: true, 
  imports: [ToDoComponent, CommonModule], 
  templateUrl: './to-do-list.component.html', 
  styleUrl: './to-do-list.component.css', 
}) 
export class ToDoListComponent { 
  @Input() toDoList: ToDoItem[] = []; 
  @Output() deleteItem = new EventEmitter<ToDoItem>(); 
 
  deleteTodoItem(todoItem: any): void { 
    this.deleteItem.emit(todoItem); 
  } 
}

3. Form component

Template file: contains an input element to store the value of to-do task and an add button

<div class="row"> 
  <div class="col-9"> 
    <input type="text" [(ngModel)]="toDoItem.task" placeholder="Enter task" maxlength="100"/> 
  </div> 
  <div class="col-2"> 
    <img 
      src="assets/icons8-add-48.png" 
      alt="Add" 
      class="add-icon" 
      (click)="onAddTodoItem()" 
    /> 
  </div> 
</div>

TS file: There is a method to push an item to the parent component so that it can be added to the to-do list.

import { ToDoItem } from './../../ToDoItem'; 
import { Component, EventEmitter, Output  } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
@Component({ 
  selector: 'app-form', 
  standalone: true, 
  imports: [FormsModule], 
  templateUrl: './form.component.html', 
  styleUrl: './form.component.css', 
}) 
export class FormComponent { 
  @Output() addTodoItem = new EventEmitter<ToDoItem>(); 
 
  toDoItem: ToDoItem = { task: '', isCompleted: false }; 
 
  onAddTodoItem() { 
    this.addTodoItem.emit(this.toDoItem); 
    this.toDoItem = { task: '', isCompleted: false }; 
  } 
 
}

4. App component:

<main class="main"> 
  <div class="container"> 
    <h1>To-Do List</h1> 
    <app-form (addTodoItem)="addTodoItem($event)"></app-form><br> 
    <app-to-do-list [toDoList]="toDoList" (deleteItem)="deleteTodoItem($event)"></app-to-do-list> 
  </div> 
</main> 
<router-outlet />

TS file: implement logic to add and delete items from the to-do list.

import { Component } from '@angular/core'; 
import { RouterOutlet } from '@angular/router'; 
import { ToDoListComponent } from '../Components/to-do-list/to-do-list.component'; 
import { FormComponent } from '../Components/form/form.component'; 
import { ToDoItem } from '../ToDoItem'; 
import { CommonModule } from '@angular/common'; 
@Component({ 
  selector: 'app-root', 
  standalone: true, 
  imports: [RouterOutlet, ToDoListComponent, FormComponent, CommonModule], 
  templateUrl: './app.component.html', 
  styleUrl: './app.component.css', 
}) 
export class AppComponent { 
  title = 'todo-list-app'; 
  toDoList: ToDoItem[] = [ 
  ]; 
 
  addTodoItem(item: ToDoItem) { 
    this.toDoList.push(item); 
  } 
 
  deleteTodoItem(todoItem: any): void { 
    this.toDoList = this.toDoList.filter((item) => item !== todoItem); 
  } 
}

Step 4: Now Add some CSS. Create an App.css file in the src folder and write the code to include CSS.

Step 5: Run your application using the following command:

npm start

Step 6: Test your application in the browser by adding/deleting a task and marking the task as complete.

Folder Structure: 

ReactJS

Prerequisites: Presence of Node.js and React is required in the system.

Step 1: Create a React app with the following command.

npx create-react-app

Step 2: Now, we will create components for our Todo application.

• Create a Todo Component which contains logic to list down the to-do items. 
• Create a Form component which contains logic to add new task
• Create a TodoList component which contains logic for Listing, Mark as Complete, and Delete the task.

Create a Todo.js file in components and write the following code in the same. 

import React from "react";
 
const Todo = ({ text, todo, completeHandler, editHandler, deleteHandler }) => {
  return (
    <div className="todo">
      <li className={`todo-item ${todo.completed ? "completed" : ""}`}>
        {text}
      </li>
      <button className="complete-btn" onClick={() => completeHandler(todo.id)}>
        {todo.completed ? (
          <i className="fas fa-times"></i>
        ) : (
          <i className="fas fa-check"></i>
        )}
      </button>
      <button className="edit-btn" onClick={() => editHandler(todo.id)}>
        <i className="fas fa-edit"></i>
      </button>
      <button className="trash-btn" onClick={() => deleteHandler(todo.id)}>
        <i className="fas fa-trash"></i>
      </button>
    </div>
  );
};
 
export default Todo;

Create a Form.js file in components and write the following code in the same. 

import React, { useEffect, useState } from "react";
 
const Form = ({ todos, setTodos, editTodo, setEditTodo }) => {
  const [todoText, setTodoText] = useState("");
 
  useEffect(() => {
    if (editTodo) {
      setTodoText(editTodo.text);
    }
  }, [editTodo]);
 
  const handleSubmit = (e) => {
    e.preventDefault();
    if (editTodo) {
      setTodos(
        todos.map((item) => {
          if (item.id === editTodo.id) {
            return {
              ...item,
              text: todoText,
            };
          }
          return item;
        })
      );
      setTodoText("");
      setEditTodo(null);
    } else {
      setTodos([
        ...todos,
        { text: todoText, completed: false, id: Math.random() * 1000 },
      ]);
      setTodoText("");
    }
  };
 
  return (
    <form>
      <input
        type="text"
        className="todo-input"
        value={todoText}
        onChange={(e) => setTodoText(e.target.value)}
      />
      <button className="todo-button" type="submit" onClick={handleSubmit}>
        {editTodo ? (
          <i className="fas fa-pen"></i>
        ) : (
          <i className="fas fa-plus-square"></i>
        )}
      </button>
    </form>
  );
};
 
export default Form;

Create a TodoList.js file in components and write the following code in the same. 

import React from "react";
import Todo from "./ToDo";
 
const TodoList = ({ todos, setTodos, setEditTodo }) => {
  const deleteHandler = (id) => {
    setTodos(todos.filter((el) => el.id !== id));
  };
 
  const completeHandler = (id) => {
    setTodos(
      todos.map((item) => {
        if (item.id === id) {
          return {
            ...item,
            completed: !item.completed,
          };
        }
        return item;
      })
    );
  };
 
  const editHandler = (id) => {
    const editItem = todos.find((item) => item.id === id);
    setEditTodo(editItem);
  };
 
  return (
    <div className="todo-container">
      <ul className="todo-list">
        {todos.map((todo) => (
          <Todo
            key={todo.id}
            text={todo.text}
            todo={todo}
            deleteHandler={deleteHandler}
            editHandler={editHandler}
            completeHandler={completeHandler}
          />
        ))}
      </ul>
    </div>
  );
};
 
export default TodoList;

Step 3: Now, open the App.js file in the src folder and write the following code in the same.

import React, { useState } from "react";
import "./App.css";
import Form from "./components/Form";
import TodoList from "./components/TodoList";
 
const App = () => {
  const [todos, setTodos] = useState([]);
 
  return (
    <div>
      <header>To-do List</header>
      <Form todos={todos} setTodos={setTodos} />
      <TodoList todos={todos} setTodos={setTodos} />
    </div>
  );
};
 
export default App;

Step 4: Now Add some CSS. Create an App.css file in the src folder and write the code to include CSS. You can refer the same at:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body {
  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  color: white;
  font-family: "Poppins", sans-serif;
  min-height: 100vh;
}
 
header {
  font-size: 3rem;
  padding-top: 4rem;
  font-weight: 600;
}
 
header,
form {
  min-height: 15vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
form input,
form button {
  padding: 0.5rem;
  font-size: 2rem;
  border: none;
  background: white;
}
 
form input:focus {
  outline: none;
}
 
form button {
  color: #ff6f47;
  background: #f7fffe;
  cursor: pointer;
  transition: all 0.3s ease;
}
 
form button:hover {
  background: #ff6f47;
  color: white;
}
 
.todo-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.todo-list {
  min-width: 30%;
  list-style: none;
}
 
.todo {
  margin: 0.5rem;
  background: white;
  font-size: 1.5rem;
  color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 1s ease;
}
 
.todo li {
  flex: 1;
}
 
.trash-btn,
.complete-btn,
.edit-btn {
  background: rgb(212, 11, 14) ;
  color: white;
  border: none;
  padding: 1rem;
  cursor: pointer;
  font-size: 1rem;
  width: 48px;
}
 
.complete-btn {
  background: #ff6f47 ;
}
 
.edit-btn {
  background: rgb(11, 212, 162);
}
 
.todo-item {
  padding: 0rem 0.5rem;
}
 
.fa-trash,
.fa-check,
.fa-times {
  pointer-events: none;
}
 
.fall {
  transform: translateY(10rem) rotateZ(20deg);
  opacity: 0;
}
 
.completed {
  text-decoration: line-through;
  opacity: 0.5;
}
 
.fa-pen { 
  font-size: 25px;
}

Step 5: Update the index.js and index.css files as per the mentioned repository.

Step 6: Update the index.html file in the public folder as per the mentioned repository.

Add the scripts below before the title.

<link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
      integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk="
      crossorigin="anonymous" />

Step 7: Run the application using the following command.

npm start

Step 8: A new window in the browser will pop up. Add a few tasks here.

Folder Structure:

VueJS

Prerequisites: Presence of Node.js and Vue is required in the system. 

Step 1: Create a new Vue app with the following command. Also, select version 3 for our application.

vue create vuetify-todo

Step 2: Now install the Vuetify package for better UI so run the command below in the terminal.

npm install vuetify

Step 3: Install the router package with the help of the following command.

npm install vue-router

Step 4: Create a router folder within the src folder. Also, create an index.js file within the router folder and add the following code.

import { createRouter, createWebHashHistory } from 'vue-router'
import Todo from '../views/Todo.vue'
 
const routes = [
  {
    path: '/',
    name: 'Todo',
    component: Todo
  }
]
 
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
 
export default router

Step 5: Now we can edit the code in the App.vue file for the route. Remove all the preloaded code and replace it with the following.

 <router-view></router-view>

Step 6: Update the “main.js” file with the following code.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'
 
loadFonts()
 
createApp(App)
  .use(router)
  .use(vuetify)
  .mount('#app')

Step 7: Create a “Views” folder in the “src” folder. Create a “Todo.vue” file in this folder.

<template>
  <div class="home">
    <v-text-field
      clearable
      hide-details
      v-model="newTaskTitle"
      class="pa-3"
      variant="outlined"
      label="Add Task"
      @click:appendInner="addTask"
      @keyup.enter="addTask"
      :append-inner-icon="newTaskTitle ? 'mdi-plus' : ''"
 
    ></v-text-field>
    <v-list class="pt-0" flat>
      <div v-for="task in tasks" :key="task.id">
        <v-list-item
          @click="doneTask(task.id)"
          :class="{ 'bg-blue-lighten-5': task.done }"
        >
          <template v-slot:prepend>
            <v-list-item-action start>
              <v-checkbox-btn :model-value="task.done"></v-checkbox-btn>
            </v-list-item-action>
          </template>
          <v-list-item-title
            :class="{ 'text-decoration-line-through': task.done }"
          >
            {{ task.title }}
          </v-list-item-title>
          <template v-slot:append>
            <v-btn
              @click.stop="deleteTask(task.id)"
              color="primary lighten-1"
              icon="mdi-delete"
              variant="text"
            ></v-btn>
          </template>
        </v-list-item>
        <v-divider></v-divider>
      </div>
    </v-list>
  </div>
</template>
 
<script>
export default {
  name: "Home",
  data() {
    return {
      newTaskTitle: "",
      tasks: [
        {
          id: 1,
          title: "Wake up",
          done: false,
        },
        {
          id: 2,
          title: "Get bananas",
          done: true,
        },
        {
          id: 3,
          title: "Eat bananas",
          done: false,
        },
      ],
    };
  },
  methods: {
    addTask() {
      let newTask = {
        id: Date.now(),
        title: this.newTaskTitle,
        done: false,
      };
      this.tasks.push(newTask);
      this.newTaskTitle = "";
    },
    doneTask(id) {
      let task = this.tasks.filter((task) => task.id === id)[0];
      task.done = !task.done;
    },
    deleteTask(id) {
      this.tasks = this.tasks.filter((task) => task.id !== id);
    },
  },
};
</script>

Step 8: Run the application using the command below.

npm run serve

Step 9: Output:

Folder Structure:

Tabular Comparison: Angular vs React vs Vue

Let’s summarize all the differences we’ve learned above regarding Angular vs React vs Vue in the table below:

Conclusion

All three frameworks, Angular, React, and Vue, have their distinct advantages and best use cases. You cannot say which one is better than the other, as it completely depends on your project requirements. You can select the right framework only if you are clear on the fundamentals of the candidate frameworks for your application. The selection of the wrong technology may have irreversible repercussions and may not fulfill the established business objectives. Therefore, take time to understand and analyze your project requirements and the available frameworks to select the most appropriate one.

FAQS