Angular vs React vs Vue – The definitive guide to choosing the Right Framework [Updated]

Web Development

Angular vs React vs Vue – The definitive guide to choosing the Right Framework [Updated]

For a typical developer, the Javascript ecosystem is like a market, consists with many frameworks and libraries that are destined to do everything or anything. At the same time, it’s hard to choose the right framework in such hyper-dynamic landscape which sticks with you for a long time. 

How do you choose a suitable framework such as Angular, React or Vue for the next project? Which one would be most reliable for the changes and challenges you anticipate? This post is dedicated to choosing the right solution in 2019: Angular vs Vue vs React.

Angular vs Vue vs React: Why it’s important to choose the right framework?

A few years back, Rever Inc which is a well established Silicon Valley-based company developed an Idea Management Software named Rever Score. At that time, they have their product up and running with the Angular 2 Beta version 9. Unfortunately, for them, the release of Angular final version was delayed by Google and they realised that waiting more would be a waste of time and resources. Henceforth, it took them 8 more weeks to abandoned Angular and re-write the entire project with VueJS.

Imagine your 1000’s hour of hard work goes into vain just because of a unfortunate incident like this one.

From the words of Luis Elizondo (Director of Engineering at Rever),

“We started with Angular Beta because our line of thought was that the final Angular version will be ready by the time we finish the product and we will update every time there’s a new beta release”.

Considering the tight deadline for their project, too many product manager’s and CTO’s fall into a common trap: they choose a framework which give them an easy start without considering the impact of the framework over the time. However, they soon realise that it’s better to evaluate the use-case and choose a suitable framework beforehand so as to avoid any kind of problem. 

My goal with this blog post is help you walk through some use cases and factors that should decide on what framework to prefer and where. As you read the blog post, you would come across their quotes in context to what they think should be done.

I sincerely thank @KentCDodds, @TomGoldenberg for their valuable contribution to the blog post.

Before initiating an in-depth comparison, I want you to ask yourself all or some of these questions so as to make a complete sense about what we are going to discuss here.

In-depth Guide to choose between Angular, React and Vue

Table of Contents

Using these set of questions you can start your assessment of any framework as a chief tech fella of your company. I’ll start my self-assessment of Angular vs React vs Vue debate on the basis of these frameworks only.

Code Quality (How clean and intuitive the code is?)

Static Type Checking in Angular

Angular supports Typescript which brings an optional static type-checking to the table for developers. By static type checking, I meant to say that for each function you write, you would associate your type with variable or textual expression which are checked at compile-time.

Let’s say you have following Typescript function where it is explicitly stated that the addTwoNumbers() function takes two numeric values as arguments and that it returns a number.

public addTwoNumbers(num1: number, num2: number): number {
return num1 + num2;
}

Now, let’s say you specify the above code in following syntax:

addTwoNumbers("one", "two")

Here, your compiler won’t let you do that and you’ll get syntax error which is obvious as here you don’t have any logic which performs the addition.

One added advantage that comes with static-type checking is that it let you write clean code which results in delivering good results as you know what exactly are the parameters that goes into function and what type of value it is returning.

Every output you receive with static-type checking is intuitive and is more easier to understand as you are already eliminating any kind of code-redundancy that makes the code difficult to read.

This specially helps you with the development of larger and complex projects as the code you write will be cleaner and easier to refactor so that any iteration could be made without hassle.

However, it’s still a myth that static-type checking lessens the bugs in a code as if that would be the case then you definitely wouldn’t have things like Test-driven development at the first place. Eric Elliott did a very good job of busting this myth in this article.

Static-Type checking in React

React leverage the use of JavaScript ES6 fundamentals when it comes to code syntax.

You read about static type checking in above paragraph. But does React supports something like type checking at compile-time?

Well, yes it does!

You can do static-type checking in React with Flow which is developed by Facebook developers as an alternative to TypeScript.

[Note: If you like TypeScript and still want to use React, then you are good to go as TypeScript has good support for JSX which is likely the reason why Microsoft has used it in the latest version of Office]

Static Type-checking in Vue

Vue also leverages Javascript ES6 syntax for writing the code. However when it comes to static type-checking, it’s not that straightforward to use Typescript in Vue. There are some courses on how to use Typescript along with Vue but it’s still unclear if it would be worth to consider in complex projects.

Thankfully, you can integrate flow with Vue and enable static type-checking.

Modularity (Does the framework supports Modularity?)

According to the principle of Modularity, your application must be divided into separate modules with each module representing a single purpose or functionality. This principle is also known as the Single Responsibility principle.

“Do one thing and do it well“ — Unix philosophy

Let’s understand Modularity with a simple real-life use case:

Imagine your codebase contains a set of services specifically written for an API. Now if your client needs you to remove the entire API functionality from the app, it’s important for you to hold these services in a separate module so that it can be removed easily without disrupting the app. This is where you needs Modularity in a framework. Modularity makes it easy to plug-in new features in case your application is large with more complex features that are supposed to iterate with every change of the version.

Modularity in Angular

In Angular, each and every code is organised in modules. So even if you don’t know what exactly are these modules, you might be already using them in your application.

For an instance, let’s create a module in Angular which is even easier to read for a novice developer:

angular.module(‘moduleName’, [‘oneModule’, ‘otherModule’]);

While Angular does give you the ability to create modules in more easier way, it shouldn’t be ignored that the amount of manual wiring you need to do for creating modules make it trouble for novice Angular developers to modularize the code. Angular tried to make it easier by using the CLI but it has its own problems of complexity.

Modularity in React

In React, each and every part of your application deal with components.

An ideal way to support modularity in React is to ensure that every component of your application should ideally do one thing. Even if the component is growing, the better way would be to decompose it further into smaller sub-components.

By separating your code base into small, self-contained chunks, it makes React app development even more intuitive than Angular. You can develop and test modules individually, which makes it easier to add features and identify bugs.

Modularity in Vue

Vue leverages the concept of “single-file components”. This seems like a trade-off with regard to the separation of concerns  as your scripts,  templates, and styles will be in one file but in three different ordered sections.

Learning Curve (Will I and my colleagues be able to learn this tool with ease?

Learning curve with Angular

Angular, definitely has a steep learning curve. In Fact, it has an even better and comprehensive documentation than other JavaScript frameworks out there. However, with comprehensiveness comes the frustration of digging deep into the basic level aspects. It doesn’t matter if you are an expert in JavaScript, learning Angular will only makes sense when you understand what’s going under the hood.

 Learning curve with React

I have observed many developers claiming that the things they do in React would have been much better and easier with Vue. But all that claims doesn’t makes sense to me. To me, Vue looks like more of a plain JavaScript along with some new ideas, one-way data flow, components and an event-driven model.

Learning curve with Vue

When it comes to the learning Curve, Vue triumphed other Javascript frameworks. You simply needs some decent JS skills or good understanding of ES6 to play around Vue. Overall, it’s much easier to learn even with the documentation itself.

Developer Friendliness and Ease-of-use (How easy is to get-started with the framework? )

A framework should be easier to start when it comes to the development. One way of comparing Angular vs React vs Vue is to identify how easy they are to get started whenever there is a project requirement.

To choose the right framework for your project, you need to figure out whether you and your team want to work on JSX or HTML. To give you an initial overview, I would emphasise that frameworks based on standard HTML templates and components are generally easy to structure and code reuse. However, there are more chances that new developers would find it hard to deal with JSX.

Angular: Developer friendliness and Ease of use

Angular leverages the idea of supporting at least one folder per Module/Component where your Typescript, template and style files live. However, Templates and styles in Angular can be written inline in the component itself but the recommended practice is to have separate files. This is a good idea for large single page applications. That said, the Angular templates are more of an enhanced version of HTML but with only Angular specific syntax (Things like ngIf or ngFor).

As already mentioned, new designers or developers would find it more easier to work with HTML templates and hard to work on JSX. Angular would be the perfect choice in such case. Also, If you or your team have strong object-oriented background and are not well-versed with JavaScript then it makes a lot of sense for you to go with Angular rather than other JavaScript based frameworks.

React : Developer friendliness and Ease of use

React wants you to build components instead of templates since components are most reusable and unit-test friendly. It relies on JSX which let you intermix your UI templates and JavaScript. But at the end of the day, you will feel like you are working on Javascript. Working with JSX gives you a big development boost because it allows React to show more useful error and warning messages.

Since your UI and JS Code can’t be separated in React, there is only one question regarding the use of styles.

When it comes to styles, you have multiple ways to start with:

  • Use webpack to extract your import ‘my.css’ statements into a stylesheet
  • or Use “CSS in JS” libraries

When it comes to a React project, it is more like the wild-west where you have a huge ecosystem of libraries and tools to complement your application. Personally, I really like that but it’s not always that easier for developers to make the right choice given they have plenty of options to choose from. Moreover, there are no defined rules or regulations with React. You got to choose something different every-time your application’s architecture is bound to change. This makes the scope of things going wrong very easily.

Vue : Developer friendliness and Ease of use

There is a reason why Vue is called as “the progressive web framework” because there are different features which affects the size of the application being developed. Vue also offers a CLI and packages that integrate with build tools like webpack. The most preferred way to write components in this environment is the single-file component a file with a template, a script and a style tag.

I have worked with few companies in past and the reasons they give when being asked about the reason for the selection of Vue was only that their developers found it easier to learn. Vue lessens the gap between junior and senior developers thereby making them well collaborate over the projects. It’s even good for the project as it gets completed with fewer bugs and better time to market.

Testing and Debugging (How good are testing and debugging aspects of the framework?)

Testing and Debugging in Angular

Testing: You can unit test your applications in Angular by testing your Typescript component classes. Angular components can be also integrated and tested using Mocha and Karma. Jasmine is most widely used testing framework for Angular applications. Here is a great series of Video by Juri Strumpflohner about the testing strategies with Angular 4.

Debugging: Angular developers need to dig down deep into their Angular application’s source code for debugging. This often deals with debugging the internals of Angular to understand the underlying model. As a result of which it can be a major source of frustration, especially for the developers who have just started with the framework. However the bright side of it is that once the process of debugging is understandable, it’s more easier for developers to debug as the error messages have become more clearer and informative starting with Angular

Testing and Debugging in React

Testing: Facebook recommends Jest to test the React code. Here is a comparison between Jest and Mocha — and there is an article on how to use Enzyme with Mocha. Enzyme is a JavaScript testing utility used at Airbnb (in conjunction with Jest, Karma and other test runners). If you want to read more, there are some older articles on testing in React (here and here).

Testing and Debugging in Vue

Testing: At present, Vue lacks any significant guidance on testing, but Evan wrote in his 2017 preview that the team plans to work on this. They recommend using Karma. Vue works together with Jest, and there’s also Vue test Utils.

Debugging: Debugging in Vue is made easier in the same way you debug any other web application. You can leverage developer tools, breakpoints, debugger statements etc. to debug your application source code. There is also this Vue.js devtools so that you can debug Vue applications with ease.

Server-Side Rendering (Does the framework supports server-side rendering?)

Server-side Rendering is an essential requirement if high search engine optimisation is the goal for the web application. As any Multi-page Application can can be comprised of several smaller SPAs, it is an important criteria for the frameworks to have this option.

Here’s what development team at AirBnB has to say about Server-side rendering:

First and foremost, server-side rendering is a better user experience compared to just client-side rendering. The user gets the content faster, the webpage is more accessible when JS fails or is disabled, and search engines have an easier time indexing it.

Server-side Rendering in Angular

Angular has released an official guide for server-side rendering which is Angular Universal. This is the central part that connects Node.js13 with Angular by running the same application on both the server and in the browser. It generates static pages in the applications on the server through the Server-Side Rendering (SSR) process. It can generate and serve these pages in response to browser requests. Moreover, it can also pregenerate pages as HTML files that will be later served to users.

Server-side Rendering in React

At present, React lacks an official documentation on SSR. The React API supports an object called ReactDOMServer which comes handy when you want to display the components in the form of a HTML code. Moreover, it’s important to learn how to use libraries such as React Router and Redux in order for the server-side rendering to be performed without any problems. The React team announced that official support will soon be released. There is also a Framework that can be used to create a React SSR application, called Next.js. Accordingly, React enables SSR, but without official support, and with the use of additional third-party packages.

Server-side rendering in Vue

There is also an officially released Vue.js guide for building Vue application rendered on the server. The guide is placed on a special domain, separate from Vue documentation. It is very detailed and it assumes that the user is already familiar with Vue and that he has a decent knowledge of Node.js and Webpack. Also, the documentation refers to Nuxt.js, a framework issued by the community and which is presented as a higher degree solution for SSR in Vue. It offers certain additional features, however, it limits the developer’s direct control over the application structure.

Maintainability (Over the span of 5-10+ years counting from the start of the project, will the code cause me more trouble than it’s worth? )

Maintainability in Angular

As mentioned earlier, the road to Angular 2+ has been very long and bumpy, but it has been worth it in the end as the tooling support up-to each Angular version is very good. This helps in releasing the new features without any kinds of trouble as frequent improvements in the tooling lead to more optimised application builds without the developer having to do anything. Henceforth, breaking things in Angular is less scary as compared to its history as the framework is becoming more mature.

It is also worth pointing out that Google have continued to maintain Angular with bug fixes and improvements, and have committed to a three year support period from 2018 to cover critical issues. Not only this is good news if you happen to be maintaining your app, but it is also good for the future maintainability of Angular apps that are launched now.

Maintainability in React

Where React is concerned, whilst the road to the 0.14 series was also quite bumpy, Facebook began to focus on making breaking changes in a more responsible manner starting with React version 15. Upcoming breaking changes now issue deprecation warnings in your application and give you time to migrate to the newer APIs.

The current stable release (version 16) has changed some core lifecycle methods, but also officially stabilised some long-used ‘experimental’ APIs, meaning future updates should be easier after reaching this point.

Due to React being lighter on tooling, whilst some breaking updates can be automated, not everything always can be. This means some updates can be more painful than others, although the improvements in the core library are usually worth it.

One notable annoyance with React has been the removal of older release documentation, making maintenance of existing (and potentially future) projects harder unless you keep up to date.

Performance and Memory Consumption (How the framework stands out from others in terms of Performance?)

When it comes to performance, I would like to rest my case with this simple one-liner:

“Performance evaluation of a framework is required but it is definitely not an important prerequisite metric in evaluating a framework. “

However, if you still wants to know how these frameworks stands out in performance-related aspects, then you can go through this comprehensive study which was done to benchmark the performance and memory consumption of several javascript frameworks on the basis of DOM manipulation. The study was performed using a benchmark tool which measures the time for a number of DOM manipulation events to complete using these frameworks.

Benchmarking performance for Angular vs Vue vs React

The DOM manipulations included in the benchmarking study was based on studying the performance of these frameworks on manipulating the rows of a table. The manipulations done on the row are:

  • Adding 10 rows to the table,
  • Adding 1000 rows to the table,
  • Updating every 10th row in the table,
  • Selecting a row in the table, and
  • Deleting a row from the table

Dom manipulation Angular vs Vue vs React

When it comes to Memory evaluation of Angular vs Vue vs React, the study leverage the use of the Chrome Profiler which lets you take snapshots of the JavaScript heap of a web page.

Two snapshots were taken to demonstrate the memory usage at the time of:

  • Loading of the page before any action is performed
  • After performing  5 Add 10, 5 Add 1000 and 5 Update actions on the table

Given below are the results of the study:

Angular vs Vue vs React Memory consumption

Angular

Performance: As shown in Figure, Angular seemed to have a good performance with small DOM updates that take less than 50ms. When it comes to Add 10 metrics, it performs better than React and Vue. However, when it comes to updating every 10th row and selecting a row from the table, it shows comparable performance with React and Vue.

Memory Consumption: As shown in Figure, the initial memory footprint in the case of Angular when the webpage is loaded is 8.7 MB. After performing the DOM manipulation operations, the memory footprint increases to 15.4 which is obvious.

React

Performance: As shown in Figure, React’s Virtual DOM seemed to pay off when DOM updates gets larger and more data needs to be updated. That’s where most performance issues in React comes into the picture. React performs best at both the Delete and Add 1000 metrics.

Memory Consumption: The initial memory footprint in the case of React is quite similar to that of Angular. With 8.3 MB memory consumption at the initial state to the 15.1 MB consumption after the DOM operations, you can figure out that React DOM manipulation operations are quite computational expensive but they are still okay.

Vue

Performance: Vue performance is as good as React in most cases like Add 10, Update and Select metrics which is likely to be that way since Vue also leverages Virtual DOM for manipulating the operations.

The only difference where Vue lags behind React in terms of performance is Add 1000 metrics which is because of the increase in number of DOM manipulation operations.

Memory Consumption: Vue’s memory footprint at the time of initial state is 7.6 which is quite better than both React and Angular considering that it’s pure JavaScript based language. However once DOM manipulations operations are performed, the value increased to 16.1 which is more than both React and Angular.

Scalability (Is the framework mature enough to build scalable applications?)

When it comes to scalability, the only thing that matters is how your solution will deal with the cumulative number of requests and what will be its significant behaviour at the sudden peak of loads. Since most JavaScript based web apps are designed for large numbers of users, evaluating whether your chosen solution is scalable or not makes lots of sense.

Angular

Angular comes with scalability built in. I’m referring the the concept of feature modules which enable developers to organize related components together along with their dependencies (think like a product-module which might contain a product search page, product cards, product services, etc.). A module can be stored in a separate repository and even referenced from your main application.

React

React is simply a library for creating and rendering reusable components on a page – you’ll still need to gather a bunch of other libraries to bring it all together (routing, HTTP requests, etc.).

The scalability problem really comes down to how well organized the code is, the amount of technical debt, and how the solution is architected as a whole.

I’ve found that because Angular provides you with modules, developers tend to follow that design pattern right out of the gate. Don’t get me wrong, I love React, but if a react application is not well thought out from the start, it can get out of control quickly (e.g. lots of spaghetti code). I’ve had one client that actual wrote a custom module-like feature for React and their code has been a pleasure to navigate.

Vue

Vue being the light weighed JavaScript library is only good for smaller applications. It’s not well applicable in building scalable applications.

Angular vs Vue vs React : A Quick Comparison Table

Angular vs Vue vs React

Angular vs Vue vs React : Experts views on choosing a Solution

As mentioned earlier, my Team did a quick outreach to renowned Javascript experts and CTO’s for their views on Angular vs Vue vs React debate. We asked some questions to them and here is a quick review of what they think on the debate:

Thomas Goldenberg, CTO at Commandiv

Tom Goldenberg on Angular vs React vs Vue

What do you feel about the famous “React vs Angular vs Vue” debate?

I have used React and Angular, not Vue. But I wouldn’t invest heavily in it, as I feel like it doesn’t have as broad adoption as the other two. Out of React and Angular, I definitely feel like React is more intuitive to code in. That said, Angular has been making progress, and TypeScript has been getting a lot of support.

Given the opportunity to build a Social web app, which framework (or language) would you prefer?

Social implies lots of connections, which would make React – GraphQL a great combination. This would help prepare all of the connection data.

Given the opportunity to build an enterprise-based e-commerce web app (with possibilities of future iterations), which framework (or language) would you prefer? Any reasons for a particular preference?

I would go with Next.js for an e-commerce web app, because server-side rendering is important for a lot of e-commerce websites, where every listing has to be indexable and searchable. Next is awesome, and the team at Zeit is really impressive.

Given the opportunity to build a content-based platform where site structure is not supposed to change, which framework (or language) would you prefer?

I Would also go with Next.js here as content-based platforms require to have good SEO and indexing.

Kent C. Dodds, Software Engineer at PayPal, Javascript/ React Expert

Kent. C Dodds on Angular, React and Vue

What aspects would you consider while selecting a right framework (or language) among React, Angular or Vue (or several others)?

All these frameworks are very similar in terms of capabilities and performance. There’s a reason I prefer React over the others and that reason is I believe that it is conceptually simpler than the other frameworks which leads to applications that are more maintainable and easier to test. More than any other reason though, the most important consideration is how effective I would be with a given framework and React is definitely best one for me.

Given the opportunity to build a Social web app, which framework (or language) would you prefer?

If I had a bunch of time to learn, I would probably try ReasonML as the language and ReasonReact as the framework. If I needed to get it done quickly, then I would definitely go with JavaScript (plus Flow for static typing) and React for the framework.

Given the opportunity to build an enterprise-based e-commerce web app (with possibilities of future iterations), which framework (or language) would you prefer? Any reasons for a particular preference?

I would still prefer ReasonML as the language and ReasonReact as the framework if I had the bunch of time to learn. If the time of experimenting and learning is less, i would prefer Javascript (plus Flow for static type checking) and React as the framework.

If the situation prevails where you have a team of developers that are not well-versed with Javascript, which framework (or language) would you prefer?

 I would definitely go with React. The reason being that I believe a team of developers not well-versed with JavaScript but building a web application should definitely learn JavaScript and the framework that can teach them JavaScript the best is React. The other frameworks do a fairly good job of hiding JavaScript and you wind up writing more framework code than JavaScript which may seem like the right way to go at first, but in the long term the team will be better off learning JavaScript well.

Conclusion

Angular, React, Vue or any other Javascript based solutions all are pretty cool in terms of their own use-cases. There is no best solution I would say. It’d be better for you to determine your use-case and map it to the aspects of these frameworks.

In order to make things easier for you, I have boiled down the use-cases and the recommended (not always) solution between Angular, React and Vue:

  • If you are a fan of OOPs concept and not of JavascriptChoose Angular
  • If you like to develop things in the framework’s way in a strict mannerChoose Angular 
  • If you are someone who like to play around lots and lots of libraries, tools or ecosystemChoose React
  • If you are a big “JS fan” and hates separating your UI and codeChoose React
  • If you love writing clean and easier codeChoose Vue
  • If you want to get started on your project as soon as possibleChoose Vue
  • If you are a lone developer without any teamChoose Vue (or React)
  • If you want to develop scalable applications without any hassle for Testing and DebuggingChoose Angular (or React)
  • If you are well-versed with HTML and little JSChoose Angular
  • If you want to have better separations of concerns in your projectChoose Vue
  • If you are afraid that your app might break in futureChoose Angular
  • If you love playing with Javascript and embrace the concept of change in states of an appChoose React (or Vue)
  • If you are to build any complex app with better time-to-marketChoose React (or Angular)

So what’s your opinion on choosing between React vs Angular vs Vue, let me know in the comments?

Xamarin vs Ionic

Working from last 8 years into consumer and enterprise mobility, Hardik leads large scale mobility programs covering platforms, solutions, governance, standardization and best practices.

Leave a comment

Your email address will not be published. Required fields are marked *

Simform Blog

Get Exclusive Advice on Choosing the Right Tech Stack that Scales in Future

Do not go with a technology just because it sounds cool or looks fun. Choose a technology that will give you long time satisfaction. Subscribe and Join over 1700+ Subscibers.

You have Successfully Subscribed!