React, Angular or Vue: Choosing the Right Framework for Your Project

We have to confess we have massively unequal experience with those frameworks. Yet, we will try to stay unbiased and figure out when React might not be the best choice, but first, the short intro:

• React is the most popular framework maintained by Facebook. All the cool kids, as well as experienced engineers, love it.
• We have Angular thanks to Google. It’s the oldest and famous among enterprises.
• Evan You created lightweight Vue by extracting the part he liked about AngularJS from his previous working experience on Google. It’s the most popular framework in Asia.

Frameworks Design

Vue and Angular share a similar design, although Angular is a sophisticated platform and not just a small library. React, on the other hand, has a unique design with one-way data-binding and virtual DOM.

React Design Principles

React is built around the idea of composable components. They are isolated and, in most cases, only expose the props interface. It makes team collaboration a lot easier as different people can create various components that work well together. Making changes to components is also a breeze, and that would rarely cause the chain of changes through the whole codebase.

In React, the components aren’t rendered directly to the Dom. The render method returns a description of what needs to be rendered, and React has a fast and smart way to apply that to the DOM.

This framework is all about one-way data flow down the component hierarchy. Child components have no idea about their parents and only receive props from them. Passing functions as props is a common practice to modify the state of the parent component. It makes everything loosely-coupled, modular, and fast.

Angular for the Enterprise

Angular is more of a platform for building applications using HTML and TypeScript. It consists of different TypeScript libraries that you can import into your project, such as routing or ajax calls.

An Angular app always has a root module that enables bootstrapping and typically has a bunch of feature modules. NgModules are the basic building blocks that collect related code into functional components.

Components define views for screen elements and use services with specific functionality not directly related to the views. It leverages dependency injection to make everything loosely-coupled and modular.

The application code extensively uses decorators to provide Angular with additional metadata.

For Views, it has its own template language with directives and binding markup to render HTML dynamically based on data. There’s also event binding that lets your app respond to the user input. Unlike react, the data flow is two-way.

Vue, the Better of Both Worlds

Vue tries to provide the benefits of composable view components and reactive data binding with the simplest possible API. Vue has an article comparing it to other frameworks from their point of view that worth reading, especially if you’re already familiar with one of the other two frameworks.

Vue is not a platform like Angular, rather an interface framework like React. Like Angular, it supports two-way data binding, but one-way parent-child data flow between components is the default. It also has a unique template language and doesn’t use the virtual DOM like React.

Components in Vue are very similar to Custom Elements from the Web Components specification. They deliberately modeled the syntax after the spec. However, Vue components are supported in every browser, have cross-component data flow, custom events communication, and other essential features.

Strengths of the Frameworks

Each framework has its best parts. React makes development a breeze, Angular is heavily focused on enterprises, while Vue is the most lightweight.

React Pros

If you’ve asked us what we like the most about React, it would be JSX (and TSX for TypeScript). It’s a syntax extension to JavaScript that enables writing HTML-like rendering code for the components:

function Hello({ name }) {
  return <div>Hello {name}</div>;
}

Without JSX, it would be a real pain to write React code:

function Hello({ name }) {
  return React.createElement("div", null, `Hello ${name}`);
}

The JSX above gets translated to pretty similar JavaScript under the hood. Just imagine writing complex components hierarchy with that. You can play around with the online Babel compiler to get the idea.

React team has a strong focus on API stability. It’s vital for huge companies like Facebook, Twitter, and Airbnb that use React in production. The APIs haven’t changed that much from the initial release. When they decide to remove something, they first mark it as deprecated, which would trigger linters and debug-build warnings.

Being a view library, react archives great results with interoperability. You can quickly drop it into an existing project and only use it for a subset of the components.

For performance, it uses the “pull” approach. Unlike other frameworks where computations are performed when new data is available, React can schedule lifecycle methods to delay applying changes.

Development experience is a high priority for the React team. They maintain useful React DevTools and try to make warnings thrown by the framework truly helpful.

Introduction of React Hooks in React 16.8 made it possible to use short functional components for almost the whole application. Functional style makes code easier to write, read, and understand.

Besides HTML, React also supports Web Components and rendering SVG. It’s renderer-agnostic and can work inside the browser and work with DOM, in node.js process and output HTML stream, and even on mobile with React Native.

You can read more about their benefits in their “Design Principles” article.

Angular Platform Strengths

Being a platform, Angular has all the basics covered out of the box. Thanks to that, applications often have better consistency, higher code quality, and improved security. You don’t have to deal with unfamiliar third-party packages for common tasks.

Angular comes with TypeScript by-default. Strongly typed language has many advantages, like fewer chances of bugs, better tooling, robust refactoring capabilities, and better maintainability in general. We recommend it for React projects as well.

Unlike other frameworks that encourage freedom, Angular often has one suggested way of doing things. It’s more natural for new developers to onboard the unfamiliar project as every app’s structure is pretty much the same. It also makes maintaining large codebases cheaper and more efficient.

Modules, similarly to components in other frameworks, enable code reuse and parallel development by different people or even teams. The Angular community also has pre-made modules with reusable components.

Vue Flexibility

Being lightweight and simple is one of the core principles of Vue design. It has the smallest bundle size among all three frameworks. Vue code is pretty straightforward and easy to understand. It might be the main reason for its popularity.

Like with React, you can easily add Vue to an existing project and start using it for some parts. Unlike React, where you should provide the support for JSX, Vue template syntax is similar to HTML, so converting existing code is much more comfortable. By the way, it also supports JSX syntax.

Vue has a public CDN for its core and the most popular libraries. You don’t have to set up a complex build process to use it, adding head script like with jQuery should get you a quick start.

Vue covers the ViewModel layer of the MVVM architectural pattern. Besides rendering HTML views, it also has two-way data binding to synchronize changes in the UI with the data and vice-versa. It’s much more intuitive than React’s one-way binding, making it an easier drop-in to add dynamic functionality to a static website.

It was inspired by the other two frameworks and tried to take the best parts from both of them. Components came from React. Directives, along with two-way data binding, were borrowed from Angular. It’s not just a UI library, like React, and not a full-blown platform like Angular. Vue has an excellent balance of features that come out of the box and still aren’t opinionated and provide extensive freedom of choice.

Drawbacks of Each Framework

All frameworks covered in this article are robust, tested in production by many companies, and don’t have significant drawbacks. However, there are some things to keep in mind when choosing the framework for your next project.

React Drawbacks

React doesn’t like when third-party code messing up with it’s DOM. It’s easy to provide an external library with root DOM element in React and only handle its lifecycle. That’s how the popular react-leaflet library wrapped pure JavaScript Leaflet library with the React interface.

The one-way dataflow, being a great benefit, can do a lot of harm in inexperienced hands. A clear understanding is critical to use it properly. We would argue that React is so different from the other frameworks that it requires its own way of thinking.

Angular Drawbacks

Angular is a sophisticated platform with a steep learning curve. The application code is tedious and complicated, making it unsuitable for many agile projects where the speed of development is critical. It was created for enterprise-scale applications, so maintainability was their biggest priority.

The bundle size is usually much more substantial than for the other two, although it depends on the libraries included. Combined with lacking support for the server-side rendering, it makes angular applications far from being SEO-friendly. A bit strange, considering its creator, Google is the largest search company.

Angular popularity is slowly declining, and the community churns to other frameworks. Many developers consider this ten-year-old framework a legacy technology and won’t be happy to work on a project built on it.

Vue Drawbacks

Vue relies on quite complex mechanisms to implement its two-way reactivity. Every developer should be aware of these situations that Vue can’t detect:

• Property addition and deletion on an object
• Array length modifications using the corresponding property
• Direct assignment of an array element by index

The limitations of JavaScript itself cause those, and the Vue team can’t do anything about them. They are fully documented in their Reactivity Guide.

Being the youngest framework, Vue lacks experienced developers and has limited learning resources. The ecosystem itself is pretty broad, though.

Although its popularity has a strong uptrend, few large projects are built on Vue at the time of writing. There are not many best practices and proven libraries for the rest of the application. It introduces a few risk factors to consider when picking Vue for more substantial projects.

Performance

All the benchmarks come from the comprehensive JS framework benchmarks by Stefan Krause. You can check the source code for each framework’s test and even run these benchmarks on your local machine. All the instructions, along with the detailed explanation of each test, are in the repository.

Dom Manipulation

DOM manipulation tests measure UI performance after the application is fully loaded and warmed up.

We don’t have a clear winner here. Vue probably uses unique performance optimization to make swapping rows that fast. On the other hand, both Angular and React thoroughly outperform it on the highlighting rows test.

Startup Time

These tests represent the “Web Vitals” metrics the Google recommends for quality user experience when visiting your application.

Vue beats everyone here thanks to its lightweight design and the smallest bundle size. React comes second, losing just a few points. Angular, thank’s to its bundle size and complex bootstrapping is last with a noticeable difference.

Memory Allocation

The results strongly correlate with the startup time test. Vue comes first, React not far behind, and Angular eats the most memory thanks to its size and abstractions.

Popularity

According to Google Trends, React is still the most popular framework. It has an active community and the most extensive collection of additional third-party npm packages.

On the number of stars that their repositories got, however, Vue has overcome it.

If we look at China, the situation is different. China is a home country for Vue, and it’s also popular in nearby Asian countries. Due to the Great Firewall, Chinese developers don’t have access to Google and most resources on other frameworks. The language barrier also plays a significant role.

Learning Curve

Vue is the easiest to learn, hands down. Its template syntax is pretty similar to plan HTML. You can write templates however you like: in HTML, Javascript, or JSX. Two-way responsiveness is pretty straightforward.

The whole framework is small, with the simplicity baked into the design.

React comes second. JSX is also similar to HTML with some differences like className and camelCase naming convention. One-way data flow and immutable state are the hardest parts to understand. But once you get it, everything else is easy.

The learning curve is much steeper for Angular, as it’s the most sophisticated framework of all three. TypeScript and RxJS are mandatory for Angular development, so the developer would have to know them too. While TypeScript is built on top of JavaScript and pretty easy to learn, RxJS does require some effort to master.

Summary

Honorable Mention of Preact

Preact is a fast API-compatible alternative to React with mind-blowing 3Kb bundle size. It uses thinnest possible Virtual DOM abstraction that still has one of the quickest diff implementations.

It’s mostly ecosystem compatible with React, meaning components from third-party npm packages designed for React should also work in Preact. In the guide on switching from React, they cover many common migration issues.

Being one of the smallest UI frameworks, it’s ideal for embeddable widgets and other code where the bundle size is critical. The developers with React experience don’t even have to sacrifice productivity as it’s that close to its big brother.

Conclusion

You can’t go completely wrong with any of these three frameworks for a new project. It would be wise to base your decision mostly on existing expertise in your team.

Preact is best when it comes to widgets and other embeddable UI components.

React is a good all-rounder. Thanks to one-way data flow, the logic of an application always remains evident. Components provide a high level of code reuse and low cost of changes. It has no problems with small projects, and, when paired with TypeScript, also great for medium to large projects.

Vue is the best replacement for jQuery for web designers. It’s much more capable than that, and we would also suggest it for anything besides enterprise projects. Due to simplicity and productivity, it’s must be great for an MVP development, although we haven’t tried that yet.

Angular is losing its dominance even in the enterprise niche as more and more companies are migrating to Vue and React. We wouldn’t advocate learning it from scratch these days, but starting a new Angular project isn’t a big mistake if you have valid reasons. However, it’s extensive verbosity hurt development productivity a lot.

At LeanyLabs, we value the benefits of the React design decisions together with its extensive ecosystem. We don’t have much experience with Vue but would consider using it if it makes more sense for the project. Today, we can’t recommend the good-old Angular to our clients as it continues to lose popularity, and we afraid it would be hard to find good Angular developers soon.