Which is the best framework in 2021: Angular vs. React vs. Vue

Image for post
Image for post

If you are working as a web developer you are known about “front-end” and “back-end”. The front-end is a part that the user interacts with and sees on the website whereas the back-end is the part where provides logic and functionality of the site.

If you are developing a project and cannot decide which JavaScript to use. In this article, we will cover various aspects of the most popular front-end development framework Angular React and Vue. Before starting the actual discussion let’s get a basic idea of the JavaScript framework.

JavaScript frameworks are collections of JavaScript code libraries that provide developers with pre-written JS code to use for routine functioning.

History of Angular vs. React vs. Vue

We will compare the most popular front end development framework of 2020. Angular vs. React vs. Vue. Which allows developers to create a single page to the complex modern user interface.

Angular

Image for post
Image for post

Angular was developed by Google and its first version released in 2010. It is a Typescript based JavaScript framework. A substantial shift occurred in 2016 on the release of Angular 2 (and the dropping of the “JS” from the original name — AngularJS). Although AngularJS (version 1) still gets updates, we will focus the discussion on Angular. The latest stable version is Angular 11, which was released in November 2020. Angular is used by organizations like The Guardian and Weather.com.

React

Image for post
Image for post

React was developed by Facebook and initially released in 2013. The current stable version is 16.X, released in November 2018 (with smaller incremental updates since then).We also know that currently React is at v. 16.12. React is used by large companies like Facebook, Twitter, Whatsapp, Instagram, Microsoft, Slack, Asana, Airbnb, and more.

Vue

Image for post
Image for post

Vue is also known as Vue.js and it is the youngest member of the team. It was developed by ex-Google member Evan You in 2014. The current stable version is 2.6, released in February 2019. Though not as popular as React, it’s still used by large companies like 9Gag, Alibaba, and Gitlab.

Advantage and Limitation

All the framework has its own strength and weakness, but you have to choose which is best for you. When determining your framework of choice, you should consider a variety of factors that we’ll discuss today.

Angular

Advantage

1) Angular uses Typescript, which provides great support for type checking.

2) Angular is supported by Google, which means it’s backed by a dependable organization. They work with detailed documentation and a large community, making it a reliable framework to learn.

Disadvantage

1)Angular offers a variety of different structures like Injectables, Components, Pipes, Modules, and more. This makes it harder to learn in comparison to Vue and React, which focus on the component.

2)Slower performance because it works with the real DOM, though it can be tackled using the ChangeDetectionStrategy, which helps manually control the rendering process.

React

Advantage

1)It is lightweight and offers a simple JS design using a syntax that combines HTML and JavaScript. React also offers great documentation.

2)Fast due to React’s Virtual DOM implementation and rendering optimizations.

3)Top-notch Progressive Web App (PWA) support, especially with its create-react-app template generator.

Disadvantage

1)React technology is constantly updating, so sometimes it can be difficult to keep with the latest documentation

2)React uses JSX which can be a learning barrier to some newer developers, though it does have its own benefits.

Vue

Advantage

1)Vue offers detailed documentation, which aids in the already low learning curve for developers.

2)Vue is used for building single-page applications and more complex web interfaces.

3)Vue takes advantage of the virtual DOM, making it faster than Angular.

Disadvantage

1)Vue offers fewer resources than React and Angular as it is relatively newer and has a smaller market share.

Working with Angular vs. React vs. Vue

There are two factors that matter size and load time.

Size and load times

The sizes of the libraries are as follows:

Angular 4+: Depends on the bundle size produced

React: 116 KB

Vue: 91 KB

Although there can be a significant difference between the sizes of the frameworks, they are still small as compared to the average webpage size (about 2MB according to the most recent data).

Components

Although there can be a significant difference between the sizes of the frameworks, they are still small as compared to the average webpage size (about 2MB according to the most recent data).

Angular

In Angular, components are referred to as directives. Directives are just markers on DOM elements, which Angular can track and attach specific behavior too. Therefore, Angular separates the UI part of components as attributes of HTML tags, and their behaviors in the form of JavaScript code. This is what sets it apart when looking at Angular vs. React.

React

React, interestingly, combines the UI and behavior of components. For instance, here is the code to create a hello world component to React.

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);

It displays “Hello, world !” on the page.

In React, the same part of the code is responsible for creating a UI element and dictating its behavior.

Vue

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,

Popularity

When considering a framework to use, popularity matters for a few reasons.

1)Finding a job is easier if you know a popular framework, as companies are more likely to use it and seek candidates with relevant experience.

2) Popular frameworks are less likely to disappear or become irrelevant down the line.

3)Popular frameworks are supported by big communities that can produce 3rd party libraries and tools to provide more features.

4)You will also find more help through external documentation and tutorials.

Google trends

Based on the graph, React is the most popular worldwide, while Vue and Angular at a similar position.

Image for post
Image for post

Syntax

Angular

angular
angular

Angular applications use Typescript, a superset to JavaScript. Angular projects will compile the Typescript code into browser-compatible JavaScript code. You can write “components” like this and angular will take control behind the scene to manipulate the real DOM.

React

react
react

React uses JSX, which combines JavaScript with HTML. JSX gets compiled into regular JavaScript code once you build a project.

Vue

vue
vue

Vue uses normal JavaScript. It can be a bit easier to learn.

Conclusion

In a nutshell, each of these frameworks has its own set of features. The libraries have their own benefits and drawbacks which we discuss above. Based on the project you’re working on and your individual requirements, one of these is going to be more suitable than the others.

We build face of webpage

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store