There are three frameworks for building web applications that every frontend developer has heard about: React, Vue.js, and Angular.
React is a UI library, Angular is a fully-fledged front-end framework, while Vue.js is a progressive framework. They can be used almost interchangeably to build front-end applications, but they’re not 100 percent the same, so it makes sense to compare them and understand their differences.
Each framework is component-based and allows the rapid creation of UI features. However, they all have a different structure and architecture — so first, we’ll look into their architectural differences to understand the philosophy behind them.
React doesn’t enforce a specific project structure, and as you can see from the official “Hello World” example below, you can start using React with just a few lines of code. React can be used as a UI library to render elements, without enforcing a specific project structure, and that’s why it’s not strictly a framework.
React Elements are the smallest building blocks of React apps. They are more powerful than DOM elements because the React DOM makes sure to update them efficiently whenever something changes.
Components are larger building blocks that define independent and reusable pieces to be used throughout the application.
- The Vue.js core library focuses on the View layer only. It’s called a progressive framework because you can extend its functionality with official and third-party packages, such as Vue Router or Vuex, to turn it into an actual framework.
With Vue, you’ll be working mostly on the ViewModel layer, to make sure that the application data is processed in a way that allows the framework to render an up-to-date View.
Difference Between Angular, React and Vue Frameworks
In this article, I’m discussing Angular 2, and not the first version of the framework which is now known as AngularJS. AngularJS, the original framework, is an MVC (Model-View-Controller)) framework.
Pros and Cons of Vue.js. When to Use It?
But in Angular 2, there’s no strict association with MV*-patterns as it is also component-based. Projects in Angular are structured into Modules, Components, and Services. Each Angular application has at least one root component and one root module.
Each component in Angular contains a Template, a Class that defines the application logic, and MetaData (Decorators). The metadata for a component tells Angular where to find the building blocks that it needs to create and present its view.
Angular templates are written in HTML but can also include Angular template syntax with special directives to output reactive data and render multiple elements, among other things. Services in Angular are used by Components to delegate business-logic tasks such as fetching data or validating input.
Out of the three frameworks, Vue has the most stars on GitHub, with 176k stars. The project is developed and led by ex-Googler Evan You. It’s a very strong, independent project in the open-source community and is used by over 1 million websites, according to BuiltWith.
Which One Is Better?
Angular is developed by Google, but surprisingly it’s not used in some of their flagship products such as Search or Youtube. It’s often used in enterprise projects, and it powers over 97,000 websites based on BuiltWith‘s data.
It’s the least starred among the three frameworks, with 68k stars on GitHub.
However, when switching from Angular 1 to Angular 2, they created an entirely new repository instead of continuing the AngularJS project, which also has 59k stars. Open-source packages save you precious time when developing applications. Not just that, but they are often better than custom-made components and packages because they’re battle-tested. It’s important to look at the availability of ready-to-use components, themes, and other tools that can help you create new features more easily.
The React ecosystem also includes React Native that allows you to build native iOS and Android applications from a single codebase written in React.
Even though Redux can be used in Vue, there are no official bindings. But that should not worry you because Vuex is the official state management library made specifically for Vue applications.
|Used by||Google, Wix||Facebook, Uber||Alibaba, GitLab|
Aside from integrating very well with Vue, it’s easy to debug using Vue’s developer tools.
In the early days of Vue, it was harder to find ready-to-use components. Since the community has grown, there’s a wide range of input components and advanced elements that you can use to speed up your development. For mobile app development, there’s an up and coming project called Weex.
Weex is developed and used by Alibaba, but it’s not as mature and powerful as React Native.
What’s more, since the project is developed and used more in China, it’s harder to find documentation and solutions to issues in English.
How To Choose?
As in the case of Vue and React, there are many ready-to-use components that you can import into your projects.
What’s slightly different about Angular is that there are many official components in the Angular Material project.
This is an official project by Google that offers Material Design components for Angular applications.
You can build cross-platform mobile applications in Angular using NativeScript.
It supports Vue as well, but the Angular support is more mature. Angular is part of the well-known MEAN stack that combines Angular with MongoDB, ExpressJS, and NodeJS.
PWAs are not mobile applications but web applications that smartphone users can add as shortcuts to their home screen and offer a look and feel similar to native mobile apps.
You can also find premium templates and pre-made applications for each framework, but Angular and React have more premium options available than Vue. When choosing a framework or library, you need to think about performance as well. In many cases, you won’t have to worry about performance, especially if you’re building a small project.
However, the more a project grows in scope and complexity, performance can (and will) become a concern. It’s important to note that the quality of development and following best practices when it comes to web performance is more important than the choice of framework. But since there are some performance metrics and differences, I’ll look into them and explain how each could affect your development efforts.
The results of the JS Framework Benchmark show that they all perform quite well at most benchmarks, such as creating or appending rows in a table.
As you can see above, Vue is considerably slower than Angular and React at selecting rows. On the other hand, Angular and React are not very efficient at swapping rows. These are the only substantial differences in rendering benchmarks — and in most cases, won’t produce noticeable results.
Since selecting rows is a more common functionality than swapping rows, I’d say that this benchmark puts Vue into third place behind Angular and React that share the top position.
When it comes to memory and booting time, React and Vue score very well, but Angular is a bit slower. Angular can take 150ms to boot a basic script and requires more memory to run.
Perf Track by Google Chrome Labs shows production data from thousands of websites. These stats are affected by many other things and not only the framework of choice, but let’s look at the numbers. Vue and React websites rank higher for this metric compared to Angular that can take more time to boot and present content to the user. Angular is also the slowest among the three frameworks in rendering a complete page, with only 27 percent of Angular websites scoring in the acceptable range.
On the other hand, Angular and React applications tend to have a larger code size. You can see a trend from these figures, but you shouldn’t be too quick to draw conclusions. For the last figure, for example, an explanation could be that Vue is used to develop more lightweight applications while Angular is used for larger projects.
The statistics can help in guiding you into making a good decision, but you cannot use them to prove that one framework is faster or better than the other. For more advanced applications, the front-end framework in use should be able to perform some tasks that improve performance and can scale better.
Two technologies that are key are server-side rendering (SSR) and virtualization. React supports server-side rendering with the official ReactDOMServer package. For virtualization, you can use a popular third-party tool called React Virtualized.
Key Differences Between Angular.js, React.js and Vue.js
Server-side rendering is supported in Vue as well with the official SSR package. In addition, you can also use the Nuxt.js framework which is built on top of Vue and supports SSR.
The virtualization options in Vue are not that strong, unfortunately.
React vs Angular vs Vue 2021 – Which One to Choose?
In my opinion, Vue Virtual Scroll List is the best solution for virtual scrolling, but it’s a bit buggy and not as stable as the options for React and Angular. Angular has the official Angular Universal package for SSR, and an official component for virtual scrolling and efficient rendering of large lists. How easy is it to learn each of these frameworks? To answer this question, we need to look at the complexity of each framework and the concepts they introduce.
In its most basic use case, React is the least complex of the three frameworks.
Pros and Cons of React. When to Use It?
That is because you only need to import the library, then you can start writing your React application with a few lines of code. But aside from the Hello World example, most React applications are component-based and don’t just render a few elements on the page. One thing that some developers find odd or difficult about React, is the fact that learning JSX is a one-way street.
- React, interestingly, combines the UI and behavior of components. For instance, here is the code to create a hello world component in React. In React, the same part of the code is responsible for creating a UI element and dictating its behavior.
- When looking into Vue vs React, in Vue, UI and behavior are also a part of components, which makes things more intuitive. Also, Vue is highly customizable, which allows you to combine the UI and behavior of components from within a script. Further, you can also use pre-processors in Vue rather than CSS, which is a great functionality. Vue is great when it comes to integration with other libraries, like Bootstrap.
Vue is a bit more complex to set up than React.
You can use it as a library to define components that you can use throughout your HTML — but similar to React, this is not how most projects are built.
- Angular has a steep learning curve, considering it is a complete solution, and mastering Angular requires you to learn associated concepts like TypeScript and MVC. Even though it takes time to learn Angular, the investment pays dividends in terms of understanding how the front end works.
- React offers a Getting Started guide that should help one set up React in about an hour. The documentation is thorough and complete, with solutions to common issues already present on Stack Overflow. React is not a complete framework and advanced features require the use of third-party libraries. This makes the learning curve of the core framework not so steep but depends on the path you take with additional functionality. However, learning to use React does not necessarily mean that you are using the best practices.
- Vue provides higher customizability and hence is easier to learn than Angular or React. Further, Vue has an overlap with Angular and React with respect to their functionality like the use of components. Hence, the transition to Vue from either of the two is an easy option. However, simplicity and flexibility of Vue is a double-edged sword — it allows poor code, making it difficult to debug and test.
Most Vue projects will have a root component named App.vueand a number of child components for displaying various things. When it comes to syntax, the only new thing you have to learn is Vue’s template syntax, which is very easy to grasp if you know HTML.
Basic directives, such as v-ifand v-forfor conditional rendering and list rendering, are easy to understand even for beginners. Additionally, Vue’s single-file components keep all the front-end code in one place, making it easy to organize new projects.
Vue is the easiest to learn, in my opinion, because of its simplicity and intuitive syntax. Angular has the most complex project structure out of the three, and since it’s a fully-blown front-end framework, it relies on more concepts.
Aside from components, Angular supports modules and services. It expects you to write and design your codebase in a specific way that makes your project more maintainable when it scales up.
As for syntax, since Angular works best with TypeScript, it’s important that you know TypeScript when building an Angular project.
Same as with Vue, you have to also familiarize yourself with the HTML-like syntax so that you can start coding new UI features with Angular.
In my opinion, Angular is the hardest to learn for the average developer because it’s more complex and relies on TypeScript. Many open-source projects and frameworks fade into oblivion and become unmaintained.
Should you be worried about any of the frameworks we’re discussing here? Although we can’t fully predict what happens, ongoing development work is a good indicator of the health of these projects. Popularity and growth are also important metrics to predict the longevity of a project, so let’s take a look at each framework.
React v17.0 has been released, but surprisingly, it doesn’t include any new features for developers.
The major change is that this new version makes it easier to upgrade React itself. You can upgrade just some parts of React from the older version to the newer one, without having to upgrade the whole project. If your application relies on features that change or get deprecated with the new version, you can keep the old version to keep this functionality alive.
This update makes React a great long-term choice because it makes it easier to stay up to date with new versions.
React has grown by 44 percent since last year in weekly npm downloads. In absolute numbers, it’s still the most downloaded of the three projects.
Vue 3 has been released in September 2020, and it tackles many serious issues that Vue 2 has in large projects. It introduces the Composition API which is inspired by React Hooks and makes it easier to reuse logic across components. The whole project was rewritten in TypeScript, which improves TypeScript support in new Vue projects while also makes the project more maintainable.
Vue 3 is a much-needed upgrade and makes Vue a better fit for large-scale projects. Vue’s weekly downloads have grown by 87 percent since last year, making Vue the fastest growing framework in relative terms.
Angular lately introduced the Ivy Compiler. It reduces build times, optimizes assets, allows for faster testing, and generally improves developer experience. The Angular team releases major updates multiple twice a year, which can include new features or just bring the framework up to speed with new browser versions.
Angular has grown by around 50 percent in weekly downloads since last year, so it’s still a popular project.
Angular, React, and Vue are all under very active development. They regularly release new versions and maintain the existing ones.
As the current level of support is high in each case, you can safely use any of these frameworks.