Angular vs. React vs. Vue.js: Comparing performance

If there’s one thing we developers don’t lack, it’s an array of great frontend development tools to work with. If anything, like a kid in a candy store, we are spoiled for choice.

In particular, we have an abundance of frontend frameworks and UI libraries. The frontend framework landscape is saturated with so many options that, as of this writing, there are over 20 frameworks available. However, one problem with having so many tools to choose from is that this makes it difficult to narrow down the options and choose the best one for the job.

Are you currently trying to figure out which frontend technology to work with? This article will provide an in-depth comparison of Angular, React, and Vue.js — three of the most popular options out there. It will explore how these tools stand against each other in terms of ease of build, performance, rendering options, and more.

At the end of this post, you will be able to make an informed decision when selecting a framework for your future projects.

Jump ahead:

• What is Angular?
• What is React?
• What is Vue?
• Comparing ease of build
• Server-side rendering vs. client-side rendering
• Community and ecosystem support
• Integration with other tools
• Impact of architecture on performance
• Performance comparison for a sample app built with the framework
• Optimization techniques for Angular, React, and Vue
• Comparing the framework migration experience
• The future of these frameworks

What is Angular?

Angular is an open source frontend JavaScript framework developed by Google. It is commonly used for building large-scale enterprise applications.

Angular provides a comprehensive set of web development tools, including routing, form handling, HTTP requests, and unit testing. It also has a vibrant community and a large ecosystem of third-party libraries and extensions that can be used to enhance and extend the framework.

At its core, Angular is based on TypeScript. However, it also supports building applications with JavaScript. Overall, Angular is a great choice for building dynamic and interactive websites.

What is React?

React is a popular JavaScript framework for building applications, including websites and small to large-scale enterprise application user interfaces. It was created by Facebook in 2011 and is used by several organizations, including GitHub, Facebook, Airbnb, and Reddit.

One of the key features of React is its use of a virtual DOM. The virtual DOM is a lightweight representation of the actual DOM, which allows React to efficiently update and render components.

When a component’s state changes, React only updates the necessary parts of the virtual DOM and then efficiently applies those changes to the actual DOM. This approach significantly improves performance and makes React applications fast and responsive.

What is Vue?

Vue is a progressive framework for building user interfaces and single-page web applications. It was created by Evan You, and it offers a simple and intuitive approach to web development, making it an excellent choice for beginners and experienced developers alike.

Vue allows us to build interactive web interfaces by combining declarative templates with reactive data binding. This means that we can easily create dynamic and responsive applications without needing complex code or extensive configuration.

With Vue, you can build a project from scratch or incrementally add it to existing projects. It is also lightweight and has a low learning curve, which makes it a great choice for building small to medium-sized applications, like forums, blogs, and personal websites.

Comparing ease of build

Angular’s app-building experience

Angular and Batman’s toolbelt have one thing in common: they come with all the tools needed to get the job done. The toolbelt gives Batman all he needs to fight crime, and Angular provides several built-in tools that cover various use cases, like testing and routing.

Angular is a very opinionated framework that works with technologies like Observables, RxJS, piping, TypeScript (though optional), and asynchronous programming. Its standardized approach to web development is one reason why organizations use it for large-scale applications.

However, it also gives Angular a steep learning curve. With most frameworks, all we need to learn is HTML, CSS, and JavaScript, and sometimes the basic knowledge is enough. However, with Angular, we have to learn the major three and other technologies to properly utilize it.

Building apps with React

React’s flexibility, performance, and ease of use have made it a go-to choice for developers worldwide. Also, while some developers have mixed feelings about JSX, those that love it enjoy being able to mix their HTML, CSS, and JavaScript logic into a single file or component.

Another benefit of React is its Context API, which is its built-in state management solution. While other state management solutions are a better fit for large-scale applications, the Context API is still a great tool for managing state in React applications.

React provides a DevTools browser extension that further simplifies the development experience. React DevTools provides useful insight into component hierarchies, state changes, and performance metrics, helping developers identify and fix issues more efficiently.

Vue’s app-building experience

While some frameworks require us to build an application from scratch, Vue does not. Instead, we can progressively add Vue to specific parts of our application as required.

Besides that, Vue also has a low learning curve, which makes the development experience seamless. Beginner and expert developers can get started with Vue in minutes because it is built on top of basic HTML, CSS, and JavaScript. This makes it easier to learn than other JavaScript frameworks that require the knowledge of additional markup syntax and languages, like JSX and Typescript.

Server-side rendering vs. client-side rendering

Rendering in Angular

Angular executes applications in the browser and renders pages in the DOM by default. This default method of rendering in the client comes with disadvantages like poor performance and lack of visibility for search engine crawlers. Luckily, Angular allows us to opt-in for server-side rendering (SSR) through Angular Universal, its official SSR solution.

Angular Universal allows us to render applications on the server (i.e., Node.js) and return static HTML contents to the browser. It helps applications render faster and allows web visitors to see the application layout before it is fully interactive instead of seeing a blank page.

Rendering on the server improves SEO performance, social media previews, and user experience. It also boosts security and the overall performance of applications.

Rendering in React

Similar to Angular, React also supports client-side rendering. The server sends a bare-bones HTML file to the client that includes a reference to a JavaScript bundle containing the React.js code. The client then fetches this bundle, which includes the necessary components and logic to render the page.

React’s client-side rendering suffers the same pitfalls as Angular. However, we can address them by working with server-side rendering. We can also opt in for SSR by using frameworks like Next.js and Gatsby, which provide out-of-the-box SSR capabilities.

While it is not technically SSR, we can also take advantage of servers by working with React Server Components. They allow us to write server-side code like database queries directly in React components. This approach reduces the amount of data that must be transferred between the client and server, resulting in improved performance and faster loading times.

Rendering in Vue

Like Angular and React, Vue also supports client-side rendering and server-side rendering. With client-side rendering, the entire rendering process is done on the client, which requires more processing power and memory compared to server-side rendering. This can lead to slower initial page load times and affect performance, especially for larger applications.

We can enable SSR in Vue applications by manually adding custom SSR functionality with Express or by working with Nuxt.js, which provides out-of-the-box SSR support.

Community and ecosystem support

Angular’s ecosystem

One of the key factors contributing to Angular’s success is the strong community and ecosystem support it offers. Its ecosystem provides troubleshooting assistance and support in the form of blog posts, videos, sample projects, templates, and other learning materials. And as of this writing, Angular has nearly 90k GitHub stars.

Angular’s community also boasts a wide range of third-party libraries and tools that enhance the development experience. These libraries provide additional functionalities, components, and utilities that we can integrate into our applications.

Some great third-party libraries that the community has produced include Angular Material for UI components, NgRx for state management, and ngx-translate for internationalization.

React’s ecosystem

One thing that stands out from React’s history and creation is the power of open source projects and an active community. React’s ecosystem provides a vast array of third-party libraries and tools that extend its functionality and make it easier to create performant applications.

This ecosystem includes Redux and MobX for state management, React Router for routing, Formik for form validation, and styled-components, and CSS Modules for styling. As of this writing, React has over 200k GitHub stars.

An interesting thing about React’s ecosystem is the number of libraries and frameworks that are built on top of it. React is not just a great tool itself, but it is also the foundation of performant frameworks like Next.js, Gatsby, Preact, React Native, and Remix, all of which are highly performant. In fact, the React team officially recommends React-powered frameworks as the starting point for building applications.

Vue’s ecosystem

Vue has a thriving ecosystem with a wide range of third-party libraries and plugins available for extending its functionality. These libraries cover everything from state management to routing, making it easy for developers to find solutions to common problems and enhance their development workflow. As of this writing, Vue has 200k GitHub stars.

Vue’s community provides several custom solutions and packages for Vue 2 and Vue 3. Some great third-party libraries from the Vue ecosystem include Pinia for state management and vee-validate for form validation.

Integration with other tools

A great thing about the tech ecosystem is that there is a myriad of tools we can work with to further improve the performance of frontend frameworks and provide a more seamless development experience. Let’s explore some performant tools available for each framework and for generic usage.

Angular-based tools

• ng-animate: An animation module for Angular applications that provides a collection of reusable and flexible animations and transitions. Its bundle size is 27.9kb minified and 3.3kb gzipped
• ng2-charts: A library for integrating Chart.js into Angular applications. It covers several chart types, including line, bar, pie, and donut charts. Its bundle size is 18.2kb minified and 5.9kb gzipped

React-based tools

• SWR: A React Hooks library for remote data fetching. It supports features like caching, revalidation, error handling, prefetching, pagination, and support for SSG and SSR. Its bundle size is 10kb minified and 4.4kb gzipped
• React Hook Form: A powerful and lightweight form management and validation library designed to make form development more efficient. Its bundle size is 26.6kb minified and 9.6kb gzipped
• Zustand: A lightweight alternative to popular state management solutions like Redux and MobX. It eliminates the complexities of state management by providing a minimal API that doesn’t require tons of boilerplate code. Its bundle size is 3kb minified and 1.1kb gzipped

Vue-based tools

• Pinia: A Vue state management solution. Its bundle size is 21.2kb minified and 7.6kb gzipped
• Vuelidate: A lightweight library that provides a simple and intuitive way to handle form validation. It has a small footprint and minimal impact on an application’s overall size and performance. Its bundle size is 12.4kb minified and 3.7kb gzipped

Framework-agnostic tools

• Valibot: A lightweight schema declaration and validation library. Its bundle size is less than 1kb
• Vite: A build tool that provides a faster and smoother workflow for developing web applications. It supports code splitting and breaks down codebases into smaller chunks, leading to more efficient loading and execution of JavaScript. It also supports lazy loading and ensures modules are only loaded when required, which reduces initial load times and improves performance. Its bundle size is 18.2kb minified and 5.9kb gzipped

Impact of architecture on performance

Architecture patterns play a crucial role when it comes to performance. Let’s explore the impact popular architecture patterns have on these frameworks and how the patterns help enhance performance and efficiency.

Flux

Flux is an architecture pattern that focuses on unidirectional data flow. It separates the application into four main components: actions, stores, views, and the dispatcher. This pattern ensures that data flows in a single direction, making it easier to understand and manage an application’s state. When implemented correctly, Flux can provide enhanced performance.

One of the major advantages of Flux is its ability to efficiently handle complex data flows. By using a central dispatcher, data changes are propagated throughout the application in a predictable manner. This eliminates the need for complex data synchronization and reduces the chances of data inconsistencies. As a result, the application becomes more responsive and performs better.

Flux’s unidirectional data flow also simplifies debugging and testing. Because data changes occur in a predictable manner, it becomes easier to identify and fix any issues or bugs that may occur.

Model-View-Controller (MVC)

The MVC pattern separates the application into three components: the model (data and business logic), the view (presentation layer or user interface), and the controller (manages the interaction between Model and View).

MVC can also enhance the performance of frontend frameworks by providing a clear separation of concerns. Each component has its own responsibility, making the codebase more modular and maintainable. This allows us to easily update or modify specific components without affecting the entire application, making our applications more scalable and efficient.

MVC also promotes code reusability. By separating the application into different components, we can reuse existing models, views, and controllers across different parts of the application. This reduces the amount of redundant code and improves performance.

Model-View-ViewModel (MVVM)

MVVM is a pattern that separates the application’s data (Model) from the UI logic (View) using an intermediary component called ViewModel. The ViewModel acts as a bridge between the View and the Model, allowing for seamless data binding and synchronization. This pattern helps in decoupling the UI from the underlying data, making it easier to manage and test the code.

One of the key advantages of the MVVM architecture pattern is its two-way data binding feature. It ensures that any changes made in the View will automatically update the underlying data in the Model, and any changes in the Model will be reflected in the View. This eliminates the need for manual data synchronization, reduces the chances of bugs, and improves performance by reducing the amount of code needed for data manipulation.

Performance comparison for a sample app built with the framework

Let’s use PageSpeed Insights to analyze the Core Web Vitals (CWVs) of landing pages built with the three frameworks to understand their performance differences. Grab the source code for the landing pages from their respective GitHub repositories; Angular, React, and Vue. We will work with Angular v13, React v18, and Vue 3.

Here are the links to the live versions of the landing pages:

• Angular landing page
• React landing page
• Vue landing page

Here’s an image of the landing page:

And here is an audit of Angular’s landing page performance:

 

Here’s an audit of React’s landing page performance:

 

Finally, here is an audit of Vue’s landing page performance:

 

Even though the code for the landing pages is exactly the same, the results from their performance audits are different. Let’s explore the performance data in detail:

• First Contentful Paint: React takes first place with 0.8s, with Angular coming second at 1.1s, and Vue coming last at 1.2s
• Total Blocking Time: React and Vue had no TBT, while Angular had a TBT of 200ms
• Speed Index: React has the fastest Speed Index at 0.8s, with Angular taking second place at 1.2s and Vue coming last at 1.7s
• Largest Contentful Paint: Angular and React had the same LCP of 2.3s, while Vue’s LCP was 2.4s
• Cumulative Layout Shift: They all had the same cumulative layout shift since the shift occurred because of the image and not the frameworks themselves
• Overall performance: PageSpeed Insight gives the React landing page the highest performance rating of 82, with Vue coming next at 81 and Angular coming last at 79
• Bundle size: While we’re at it, let’s explore the bundle size of the frameworks because that is another factor that affects performance. Angular’s gzipped size is 62.3kb. React and React DOM’s gzipped size is 44.5kb. Vue’s gzipped size is 34.7kb

Optimization techniques for Angular, React, and Vue

Let’s explore some optimization techniques we can utilize when developing applications with these frameworks.

Angular optimization techniques

• Use Ahead-of-Time (AOT) compilation to improve performance by reducing the amount of work that the browser has to do at runtime
• Reduce the number of times that Angular has to re-render a component with the OnPush change detection strategy. It only checks for changes when the component’s inputs or outputs change, which can improve performance by avoiding unnecessary re-renderings
• Unsubscribe from Observables because while they are powerful for asynchronous programming, they can also negatively impact performance if we do not properly unsubscribe from them. When you are finished with an Observable, be sure to unsubscribe from it to prevent it from continuing to emit events

React optimization techniques

• Use React Memoization via the useMemo Hook to cache the results of expensive function calls. This avoids unnecessary re-renders and ensures that the cached result will be returned except if the function’s dependencies change
• Make state updates more efficient by working with immutable data structures. This strategy can lead to significant performance improvements, especially for large applications with complex state

Vue optimization techniques

• Lazyload routes and their associated dependencies with Vue Router. We can also lazyload specific components with the defineAsyncComponent method
• Optimize event handling for events like window.scroll and @mouseover to avoid performance lags. We can perform the optimization by using the debounce function, which limits the number of times events are processed

Comparing the framework migration experience

While these three frameworks are great, there are different scenarios and reasons why development teams may want to migrate from one to another. Let’s briefly explore some steps to work with when migrating.

Reasons for migrating from Angular

Low or lack of Angular expertise in development teams

While Angular is a mature framework, it is not as popular as before. React and Vue are more popular in comparison, making it harder to get a hold of expert Angular developers. Development teams that have built projects with Angular may need to migrate to the more in-demand frameworks when Angular developers become scarce.

Future-proofing tech stack

These days, React and Vue are in greater demand than Angular, meaning that these libraries will enjoy more innovation in terms of ecosystem support and third party solutions. For example, you are more likely to see a React- or Vue-based component library than you are to see an Angular-based library. This means that developers who want to future-proof their tech stack and benefit from the latest innovations may need to migrate from Angular.

Mobile app development

React and Vue provide a native approach to developing mobile applications, React Native and Vue Native. While developing mobile applications with Angular is possible, it is not as straightforward. Developers who want to take advantage of native mobile development may consider migrating their codebase.

Reasons for migrating from React

Opinionated development

One major double-edged sword of React is that it has so many options. From state management to data fetching and form management, many solutions are available. However, this can be a nightmare for teams that prefer frameworks like Angular that are very opinionated.

Feature compatibility

React is a great framework, but it doesn’t have all the features that every project needs. For example, if a project requires two-way data binding, Angular might be a better choice.

Reasons for migrating from Vue

Larger ecosystem

React has a larger and more active ecosystem than Vue, and React provides more third-party libraries, tools, and support. Developers that find Vue’s current ecosystem lacking libraries or integrations may switch to React to take advantage of its more extensive ecosystem.

Mobile app development

While Vue has its solution for developing mobile applications — Vue Native — it is not as popular or battle tested as React Native. Also, Vue Native has been deprecated and is no longer being maintained. On the other hand, React Native is actively maintained, has 111k GitHub stars, and is used in building several Android ad iOS applications like Coinbase, Discord, Pinterest, and Bolt Food.

The future of these frameworks

Some major changes and performance improvements that have come to Angular include the introduction of Signals — a new state management solution inspired by Solid.js, making inputs required, and automatic route params mapping.

Likewise, React 18 has many new features and performance improvements, like concurrent mode, server components, automatic batching, and a new start transition API that make our applications more responsive. All of these new features provide improved performance and scalability.

The Vue team also made some major updates with the release of Vue 3, making it faster, smaller, and more maintainable. The updates include reducing the size of the Vue core from 20kb to 10kb, improving rendering performance, adding the composition API, and introducing simpler state management with Pinia, which is now the official state management solution.

What can we expect from these frameworks going forward? While there is no public roadmap of what’s to come, we can expect to see more improvements targeted at providing a richer developer experience and greater performance.

Conclusion

Two things are certain about the web development industry. First, change is constant. Once upon a time, JQuery was one of the most in-demand tools for developing websites and applications. However, the industry has changed since then. This shows that frameworks and libraries will come and go.

Secondly, there is no one-size-fits-all answer to the question, “Should I use Angular, React, or Vue?” The right answer will always be, “It depends.” It depends on factors like the type of application we are building, the developers in our team, and their preferred tech stack. Ultimately, make sure you choose a framework that provides the best performance based on your specific needs and requirements.