React vs Angular vs Vue. Frontend Framework and a Project Fit

Almost 7.7million software developers use React, Angular, or Vue.js. Right now, they are all amongst the most popular frontend frameworks for web application development, but why? More importantly, why do some developers choose one over the others?

This article will answer the above questions and more, delving into the pros and cons of each JavaScript frameworks (as well as explaining what a frontend framework is) and give you the information that will allow you to find a framework that matches the needs of your next business project. Let’s get started.

Frontend frameworks / libraries background

The frontend of a website or application is the sum of elements visible to the end users which they can interact with. A frontend framework, therefore, is the development tool used to build the frontend and user interface features.

React, Angular and Vue are all frontend development tools with some similarities, but also key differences that mean which one you choose to use could affect the outcome of your own project. First, let’s go through a brief history and background for each.

React

React, developed by Facebook, was initially released in 2013 and is used in the development of Facebook, Instagram and WhatsApp platforms. At the time of writing, the current stable version is 17.02, released in March 2021.

React is a free and open-source frontend JavaScript library, which means it is free to use under the MIT license - for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. This tool can be used as a base in the development of single-page or mobile applications.

Angular

Angular, developed by Google, was first released in 2010, making it the oldest of the three frameworks. It is a TypeScript-based JavaScript framework.

A substantial shift occurred in 2016 on the release of Angular 2. Although AngularJS (version 1) still gets updates, we will focus on Angular since support for AngularJS will be discontinued on 31st December 2021. The latest stable version is v12.2.8, released in September 2021.

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. It’s free and open-source, led by the Angular Team at Google and, again, by a wide community of individuals and corporations.

Vue

Vue, also known as Vue.js, is the youngest member of the React vs Angular vs Vue debate. It was developed by ex-Google employee Evan You in 2014. Over the last three years, Vue has seen a substantial shift in popularity, even though it doesn’t have the backing of a large company. The current stable version is 3.2.1, released on 9 August 2021.

Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue.js is designed from the ground up to be incrementally adoptable.

Frontend framework - why do you need one?

Frontend development frameworks set the logic, structure, design, behavior, and animation of every element a user sees on screen when they visit and engage with a web app interface or mobile application. As techniques and technology advance, so too does frontend architecture. Think about how different the online shopping experience is now compared to ten years ago.

The literal answer to the question of whether you need a frontend framework is no. You can, if you wish, build the frontend for a simple application using only JavaScript, HTML and CSS. However, this will only serve the purposes of building a simple, rudimentary interface to respond to user requests, and features, functionality and interactivity will be limited.

Frontend frameworks are preferable because they enable building complex user interfaces that reflect the web and mobile browsing reality users expect now. Modular, standalone architecture they help to develop is simpler to maintain and makes it easier to build an application and collaborate with other developers.

The most popular development tools - such as React, Angular and Vue, have large, supportive communities of developers, as well as lots of documentation and tutorials to take advantage of. This makes a frontend framework extremely beneficial for finding solutions or support for challenges you may encounter during the web development process. The next added value are libraries of features and tools you can draft in to speed up the process.

Simply put, there are a lot of benefits to using a framework in your frontend development which is helpful in saving time and money, while making a more versatile and user-friendly application or interface.

React vs Angular vs Vue - finding a framework that aligns with your project

When you’re deciding which frontend framework to choose, there are generally seven major aspects to consider:

• Architecture
• Purpose/Scope
• Performance
• Migration
• Popularity
• Drawbacks
• Cross-platform (mobile app developments)

We’ll go through each of these individually so you can see where each framework excels against the others.

Architecture

As a way to organize a software system, software architecture describes fundamental components of such a system, methodology of their creation and relations (structures) between them.

Let’s take a look at the different architectures of React vs Angular vs Vue.

React

When it comes to architecture, React does not enforce a specific project structure, which means you can start using it with just a few simple lines of code. It can be used as a User Interface library to render different elements of the interface. The fact that it doesn’t require specific project structure means it isn’t technically a ‘framework’.

React elements are the base elements or building blocks of React-based apps. They are more powerful than DOM elements because the React DOM automatically updates these elements whenever something changes within the code.

React components are bigger elements or building blocks and they define independent, reusable pieces that can be used throughout the web app or mobile app.

Angular

Angular projects are structured into modules, components, and services. Angular applications have at least one root module and one root component. Angular also follows the Model-view-viewmodel pattern.

Model–view–viewmodel is a software architectural pattern that facilitates the separation of the development of the graphical user interface – be it via a markup language or GUI code – from the development of the business logic or back-end logic so that the view is not dependent on any specific model platform.

Each component in Angular contains a template, a class that defines the logic of the web app, and metadata. The component metadata informs Angular where to find the building blocks it needs to create and present its display.

Services in Angular are utilised by components to delegate business logic tasks such as verifying input or fetching data. Angular is built in TypeScript, so its use is recommended to get the most seamless experience, but plain JavaScript is also supported.

Vue

The core Vue.js library focuses only on the view layer. It’s known as a progressive framework because its functionality can be extended with official or third-party packages, such as Vue Router or Vuex, turning it into an actual framework.

Vue is not strictly associated with the MVVM (Model-View-View-Model) pattern, but its design was partly inspired by it. With Vue, you’ll work mostly in the ViewModel layer, to ensure that web app data is processed in a way that allows the framework to render an up-to-date view.

Performance

The JS framework benchmark shows how React, Angular and View perform for certain benchmarks, as follows:

Source: Resourcifi

As the table shows, Vue is slower than React and Angular at selecting rows. Meanwhile, Angular and React are less efficient at swapping rows.

These are the only substantial differences in rendering benchmarks. Since selecting rows is a more common functionality than swapping rows, this benchmark table could out Vue into third place behind both React and Angular.

However, when it comes to memory and booting time, React and Vue score better than Angular, which can take 150ms to boot a basic script and requires more memory to run. As with everything, the purposes and scope of your project will determine which framework works best for you.

Migration

Working with React, Angular or Vue, you won’t need to worry about migrations or issues from one update to another. Still, it’s important to stay on track with what updates involve as they may require certain tweaks to the code to keep things compatible.

Angular tends to plan major updates every six months, with an additional six month period before major APIs are deprecated, giving you the time of two release cycles (one year) to make any necessary changes.

With React, Facebook prioritises stability, as huge companies like Twitter and Airbnb use React. Upgrades through versions tend to be simpler in React, with scripts such as react-codemod assisting you with migration

In the migration section of the Vue 3 docs, Vue mentions that much is the same between Vue 2 and Vue 3 while 90% of the API is the same if you are migrating from 1.x to 2. There is a Vue 2 to Vue 1 migration helper tool that works on the console to assess the status of your app.

Popularity

Normally, to gauge the popularity of each framework, we’d look at Google search trends, but since both ‘React’ and ‘Angular’ are commonly used words in other contexts, it’s better in this case to look at the number of stars that each framework’s Github repository receives.

In mid-2016, there was a sudden spike in Vue’s number of Github stars, and it now ranks up there with React as one of the most popular ones. We can also divide popularity down into three subsections:

Community support

As we mentioned already, the breadth of the community for a framework can be a big advantage to your own project. Again, we can look at some of the Github stats and current trends to gauge the size of each framework’s community:

React

• Stars: 174,633
• Issues: 819
• Stacks: 108.1k
• Followers: 86.8k

Angular

• Stars: 59,595
• Issues: 466
• Stacks: 644
• Followers: 474

Vue

• Stars: 187,876
• Issues: 528
• Stacks: 37.6k
• Followers: 28.9k

These stats show that React and Vue are ahead of Angular when it comes to stars, stacks and followers. This is reflected in the number of downloads each tool has had both now and all time, with React continuing to trend upward and remaining the most popular download choice among developers.

Vue is also trending upwards, though at a slower pace, while downloads of Angular have remained mostly flat for the last couple of years. There are more insights into the popularity of each tool available.

The communities behind these statistics support the growth and development of the frameworks and can thus play a big role in your own project, so it’s important to keep an eye on what they’re doing.

Documentation/learning

As the most widely used frameworks, React and Vue, have vast amounts of documentation to learn from and use in software development. Meanwhile, Angular has a steep learning curve. Partially, because it’s a complete solution - and mastering it requires learning associated concepts like TypeScript and MVC.

Despite the timeit takes to learn Angular, the investment can pay dividends in terms of giving developers a deeper understanding of how frontend development works.

Talent availability

Obviously the availability of qualified talent will determine which framework to use in your own project. At the moment, while Vue might be easier to learn, there are significantly more React developers on the market, meaning it’ll take you less time to find an experienced developer if you’re using React.

However, Vue is on the rise, and 90% of developers and CTOs plan to use it in their upcoming projects. Angular has tended to spike and dip in recent months, and was a more popular job search term than both React and Vue in the last week of September 2021 before falling again.

Drawbacks

No technology is perfect, and each framework has its drawbacks too.

As mentioned, Angular has a steep learning curve and less community support on Github. It also has limited SEO options and poor accessibility for search engine crawlers. However, given that it is managed by Google, it’s likely that a solution will be found to this before long.

With React, the pace of development and the number of users can be a disadvantage as well as a benefit. Multiple updates mean a lot of work to keep up to speed and learn the new skills required by various updates. This pace of development also means there is little time to make proper documentation, so in some cases documentation can be poor.

With Vue, as a new framework, there are limitations in terms of scalability, plugins and highly experienced experts. The code is also extremely flexible, which can be a benefit, but can also lead to code irregularity and errors.

Cross-platform (mobile app development)

The React ecosystem also includes React Native, which can build native mobile apps on iOS and Android from a single codebase written in React. This means that React can be a great choice for building mobile applications as well as web apps.

Vue has an upcoming mobile development project called Weex. Weex is developed and used by Alibaba, but is not as mature or powerful as React Native. Also, since Weex is developed and used more in China, it’s harder to find documentation and solutions to issues in English language.

You can build cross-platform mobile applications in Angular using NativeScript. This supports Vue as well, but the Angular support is more mature.

Frontend frameworks comparison

This table provides a detailed comparison of the basic features of each JS asset:

Source: ValueCoders

The dominance of React in terms of number of weekly downloads and overall size of its developer community is clear, but the Vue JS framework shows advantages when it comes to coding speed and ease of learning.

Meanwhile, Angular has the edge in the arena of web application development as it can be used on a standalone basis, whereas the other tools require integrations or third party components.

Overall the table shows the different pros and cons for React, Angular and Vue, and is a good comparison tool for when you’re deciding which one of these to use for your development process.

When to choose React

React is old enough to be mature and has a huge amount of contributions from its community, gaining widespread acceptance among developers. In addition, there is high talent availability for React and it continues to grow in popularity.

In this context, React is a good choice for a person or company getting started with front-end JavaScript frameworks, including startups and developers who want some flexibility. The ability to integrate with other frameworks seamlessly makes it a great option for making changes or additions to your product further down the line.

When to choose Angular

Angular is the oldest and therefore most mature of the three. It has a good backing from contributors and comes as a complete package. Still, the learning curve is steep, which may put new developers off getting started. Angular is a good choice for application development companies with large teams and developers who already use TypeScript.

When to choose Vue

Vue is the newest to the arena, without the backing of a major company.

However, it has done really well in the last few years to come out as a strong competitor for Angular and React, especially so with the release of Vue 3.0. This is perhaps playing a role with a lot of Chinese giants like Alibaba and Baidu picking Vue as their primary front-end JavaScript framework. Vue should be your choice if you prefer simplicity, but also like flexibility.

So, who wins in the React vs Angular vs Vue dispute?

The bottom line is that there is no absolute right choice in the React vs Angular vs Vue debate. It depends on your own project scope and requirements, but you can use this article as a guide to work out the pros and cons of each of them as it relates to your own needs.

It’s always crucial to do your own research before choosing a frontend framework to use in your own development. Consulting a professional team of developers could help in choosing the right tech stack for your business needs - reach out to us today to start a conversation.