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.
Tóm Tắt
Architecture
React
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.
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
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. They accept inputs called props and produce elements that are then displayed to the user.
React is based on JavaScript, but it’s mostly combined with JSX (JavaScript XML), a syntax extension that allows you to create elements that contain HTML and JavaScript at the same time.
Anything you create with JSX could also be created with the React JavaScript API, but most developers prefer JSX because it’s more intuitive.
Vue
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.
Although Vue is not strictly associated with the MVVM (Model-View-ViewModel) pattern, its design was partly inspired by it. 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.
Vue’s templating syntax lets you create View components, and it combines familiar HTML with special directives and features. This templating syntax is preferred, even though raw JavaScript and JSX are also supported.
Components in Vue are small, self-contained, and can be reused throughout the application. Single File Components (SFCs) with the
.vue
extension contain HTML, CSS, and JavaScript so that all relevant code resides in one file.
SFCs are the recommended way to organize code in Vue.js projects, especially larger ones. Tools such as Webpack or Browserify are required to transpile SFCs into working JavaScript code.
Angular
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. 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. They are a distinct part of Angular applications. While Angular doesn’t enforce their use, it’s highly suggested to structure apps as a set of distinct services that can be reused.
Angular is built in TypeScript, so its use is recommended to get the most seamless experience, but plain JavaScript is also supported.
Popularity
React
React is one of the most popular JavaScript projects with 160k stars on GitHub. It’s developed and maintained by Facebook, and it’s used internally in many of their projects. Additionally, it powers over 2 million websites, according to BuiltWith‘s usage statistics.
Vue
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.
Angular
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.
Ecosystem
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.
React
Many front-end applications rely on global state management to store information, such as who is logged in and other user settings.
The most popular project for JavaScript state management is Redux. Most developers use the official React bindings for Redux, which are maintained by the Redux team.
Because of React’s popularity, finding input components and ready-to-use elements is extremely easy. They’re all just a Google or GitHub search away.
The React ecosystem also includes React Native that allows you to build native iOS and Android applications from a single codebase written in React. So, React can be a great choice for building mobile applications using web technologies, too.
React is part of the MERN stack, which contains MongoDB, ExpressJS, React, and NodeJS. The great thing about this combination is that a single language — JavaScript — powers the whole application.
Vue
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. 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.
Vue integrates well with Laravel, and that’s why they are often used together. Laravel offers complete JavaScript and CSS scaffolding to enable the use of Vue in new projects.
Angular
For state management in Angular, you can use the NgRx project. It has been inspired by Redux, but it’s specifically created for Angular.
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. Similar to the MERN stack, it relies entirely on JavaScript for both the front-end and back-end.
Common Technologies
Angular, React, and Vue can all be used to develop Progressive Web Apps, also known as PWAs.
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.
Performance
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.
JS Framework Benchmark: Angular vs React vs Vue
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: Angular vs React vs Vue
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.
First Contentful Paint
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.
Largest Contentful Paint
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.
First Input Delay
For all three frameworks, more than 80 percent of websites are in the acceptable range for the first input delay, which shows how much it takes until the user can interact with the page.
JavaScript Bytes
The most lightweight applications are by far the ones developed with Vue, with 68 percent of Vue apps loading less than 1MB of JavaScript. On the other hand, Angular and React applications tend to have a larger code size.
How to Use These Metrics
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.
Advanced Features
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
React supports server-side rendering with the official ReactDOMServer package. For virtualization, you can use a popular third-party tool called React Virtualized.
Vue
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. 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
Angular has the official Angular Universal package for SSR, and an official component for virtual scrolling and efficient rendering of large lists.
Learning Curve
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.
React
In its most basic use case, React is the least complex of the three frameworks. 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. You can use raw JavaScript as well, but since most React developers use JSX, learning it is pretty much unavoidable.
This is the main thing that can make React’s learning curve a bit steeper, but aside from that, it’s a library that’s easy to learn for developers who know JavaScript and understand web development concepts.
Vue
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.
Most Vue projects will have a root component named
App.vue
and 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-if
and
v-for
for 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
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.
Future Predictions
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
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
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. If Vue can keep up this growth rate, then it will certainly surpass Angular soon.
Angular
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.
Conclusion
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.
It’s important to note that Angular is not growing as fast as before, while Vue — even though it started more recently — seems to be growing a lot.
As previously stated, we can’t predict which frameworks will remain relevant in the long term, but each project has a great community behind it and is constantly evolving.
My goal with this article was to explain the architectural differences, break down each framework’s strengths and weaknesses, and compare them wherever it’s applicable.
Before jumping into a new framework, there are a few things to consider.
First, your team’s experience can be a deciding factor when choosing a new technology.
Similarly, you have to consider the talent that is available in your area so that you can hire developers for your project.
Finally, when it comes to the project itself, the complexity and scope can also affect your choice of framework.
By taking into account all the key differences, I hope you can decide which is the best front-end framework for your goals and needs.
Share This Article:
Aris Pattakos is an entrepreneur and part of Forbes 30 under 30 Greece. He writes primarily about technology, startups, and web development.
