• Angular vs. React vs. Vue: Which Framework is Best in 2021?
  • Source: Sourabh Nagar
  • Translation from: The Gold Project
  • This article is permalink: github.com/xitu/gold-m…
  • Translator: Zenblo, Hoarfroster
  • Proofreaders: zenblo, Hoarfroster, felixliao

2021 Angular vs. React vs. Vue front-end framework comparison

One is a UI library (React), the other is a mature front-end framework (Angular), and the youngest of them (Vue) is what you might call a progressive framework.

You might be a React developer, you might be a Vue developer, or you might be a technology-only Angular developer. Still, you can’t ignore the constant framework comparisons being made by the development community. For good reason: One is the UI library (React), the other is a mature front-end framework (Angular), and the youngest of them (Vue) can be called an incremental framework. Each framework has some unique advantages and performance metrics. It is these advantages and indicators that can not be ignored that we have to make a comparative analysis of these three frameworks.

All of these frameworks are component-based and have the ability to quickly create uIs. Most of the time, they can be used in place of each other to build front-end applications. But they are not 100% the same.

That’s why we decided to create a short guide for you, but most importantly, to give you a reference to help you make technology choices in the future.

Let’s get started!

license

Of course, always check the license thoroughly before using an open source framework or library. Fortunately, React, Angular, and Vue all use MIT licenses. It provides limited reuse limits, and we can even use it in proprietary software. Before you use any framework or software, be careful to understand the license.

Architecture design

Angular

The Angular framework belongs to the MEAN framework, which is the hottest technology stack for startups today. Angular is a complete TypeScript based Web application development framework for building single page Web applications (spAs).

Unlike the earlier AngularJS framework, Angular2 is component-based and has nothing to do with the MV* pattern. Angular is structured in modules, components, and services.

In the Angular framework, each component has a class or template that defines the application logic and MetaData (decorators). This metadata for a component provides guidance on where the artifacts are needed to create and render its views.

Another important element of the Angular architecture is that templates are written in HTML. They can also contain Angular template syntax, with special instructions to output responsive data, and can render multiple elements.

Service — a unique element in an Angular application that Components use to delegate business logic tasks, such as retrieving data or validating input. Although the use of services is not strictly enforced, it is sensible to treat the application structure as a set of different services that can be reused.

React

React is an open source front-end library for developing user interfaces. This flexible front-end solution does not enforce a specific project structure. A React developer might only need a few lines of code to start using it.

React is JavaScript based, but for the most part, it is combined with JSX (JavaScript XML). JSX is a syntax extension that allows developers to create elements that contain both HTML and JavaScript. In fact, anything a developer can create with JSX can also be created with the React JavaScript API. React elements are more powerful than DOM elements in that they are the smallest part of the React application, the component.

The React component is the building block that determines the use of separate and reusable components throughout a Web application.

Vue

For developing user interfaces and single-page Web applications, Vue is an open source Model-View-View-Model (MVVM) front-end JavaScript library. It is called a progressive framework and is used for front-end development along with other tools. Vue’s versatility, high performance, and best user experience in Web applications have contributed to its popularity.

With Vue, developers work primarily on the ViewModel layer to ensure that the application data is processed in such a way that the framework presents the latest view.

Vue’s template syntax combines recognizable HTML with special instructions and functions. This syntax allows developers to create View components.

The components in Vue are now compact, self-contained, and reusable. Single-file components (SFC) use the extension.vue and contain HTML, JavaScript, and CSS, so all related code is stored in the same file.

In large vue.js projects, we usually recommend using SFC to organize the code. To port SFC into working JavaScript code, you need a build tool like Webpack or Browserify.

Applicable goals and scope

Angular

Angular is best suited for large and advanced projects. These may include, but are not limited to:

  • Used to develop progressive Web applications (PWA).
  • Used to redesign web applications.
  • Used to build dynamic content-based web design.
  • Used to create large enterprise applications with complex infrastructures.

React

React comes from the MERN architecture, a technical architecture known for building complex business applications. When used in conjunction with Redux, MobX, or other flux mode state management libraries, React can be a powerful tool. React is best for:

  • For applications involving many components including navigation items, accordion sections that collapse or expand, available or unavailable states, dynamic input, available or unavailable buttons, user login, user access, and so on.
  • For projects with potential for extension and growth, the React component can easily handle such complex structures because of its declarative nature.
  • When the UI is central to a web application.

Vue

Because Vue has an acceptable and fast learning curve, Vue is best suited to solve short-term, small problems. It can be easily integrated with existing code blocks. Vue may be required in the following cases:

  • You need a Web application development project with animation or interactive elements.
  • No advanced skills are required to prototype.
  • An application that requires seamless integration with multiple other applications.
  • Launch MVP earlier.

Performance and development

Angular

Some of the performance highlights of Angular include:

  • There is seamless third-party integration to enhance the functionality of the product or application.
  • Provides a powerful set of components that simplify the process of writing, changing, and using code.
  • Its “advance compiler” gives applications faster load times and security.
  • The MVC model helps reduce backend queries by allowing view separation.
  • Promoting the use of external elements that inject dependencies to decouple components paves the way for reusability and simplified administration and testing.
  • Reduce the initial loading time of a web page by dividing tasks into logical blocks.
  • Fully customizable design.
  • Facilitates the compilation of HTML and TypeScript to JavaScript — greatly speeding up the compilation of your code and making it happen long before browsers start loading Web applications.

React

React is on par with Vue in terms of performance because both have the same architecture, namely interaction with the DOM. React Web development performance can be evaluated as follows:

  • Support for packaging and tree-shaking – this is critical to reducing the resource load on the end user.
  • With one-way data binding support, you have more control over the project.
  • Easy to test and monitor management.
  • Best suited for complex applications that require frequent change.

Vue

The phrase that best describes Vue is “incredibly fast”. Some of its performance indicators are:

  • A faster learning curve.
  • Single-page applications are efficient and sophisticated.
  • Advanced features give it versatility.

Advantages of each

Angular

Complete documentation of templates, forms, initiators or schemas, components, and interactions between components:

  • Smooth bidirectional data binding.
  • The MVC architecture.
  • Built-in module system.
  • Greatly reduces the initial loading time of web pages.

Popular Applications built with Angular:

Youtube TV | PayPal | Gmail | Forbes | Google Cloud

React

  • With a modular structure, it has flexible code, saving time and cost.
  • Facilitates the implementation of high performance for complex applications.
  • Using the React front-end development makes code maintenance much easier.
  • Support for mobile native apps for Android and iOS.

Popular apps built using React:

Tesla | AirBnB | CNN | Nike | Udemy | Linked-in

Vue

  • Its compact size makes it easy to install and download.
  • If we use it correctly, we can reuse Vue in multiple places.
  • Vue.js allows us to update elements in a web page without rendering the entire DOM, which is virtual.
  • Requires less optimization.
  • Speeds up Web application development and allows the bigwigs to separate templates to the virtual DOM from the compiler.
  • Proven compatibility and flexibility.
  • Regardless of the size of the application, the code base remains the same.

Popular applications built using Vue:

Gitlab | Spendesk | Behance | 9Gag | Wizzair | Nintendo

Community support and learning curve

The React JS library was created by Facebook and has a large number of contributors as well as a large community of developers contributing their solutions to various problems. Angular also has a large developer community with solutions for the most challenging and bizarre cases. Vue has a good ecosystem and all the features of the React and Angular frameworks. When it comes to learning curves, React is definitely the one that developers can learn and adapt to the fastest, followed by Vue and Angular.

This paper summarizes

From a front-end developer’s perspective, React will be the fastest framework to learn to use in 2021. Both Vue and React are lightweight, intuitive, and perform perfectly.

If you find any errors in the translation or other areas that need improvement, you are welcome to revise and PR the translation in the Gold Translation program, and you can also get corresponding bonus points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

Diggings translation project is a community for translating quality Internet technical articles from diggings English sharing articles. The content covers the fields of Android, iOS, front end, back end, blockchain, products, design, artificial intelligence and so on. For more high-quality translations, please keep paying attention to The Translation Project, official weibo and zhihu column.