Angular Vs React Vs Vue
A simple comparison
Hello Everyone!
How can we compare the top three JavaScript web development frameworks? Which is the best one? Which is the easier one?
Lets answer all those questions in this article. I will categorize the comparison through the following sections
- Overview
- Syntax
- Ease of learning
- Performance
- Popularity
Angular
Overview
Angular is developed by an internal team at Google. Angular can be considered as a platform rather than a framework because of it’s feature rich build in libraries which are kept updated along with the newer versions of Angular and eliminate the need for third party libraries. Angular has it’s own CLI and it’s ease of conversion to PWAs (Progressive Web Applications). You can learn more about the features in their official documentation here Angular.io
Syntax
Angular has a strict separation of view and logic where a component in Angular is a bundle which contains a HTML file, A typescript file (TypeScript is a superset of JavaScript) and a style file which are then linked and displayed as one single component while rendering.
Ease of learning
Angular needs a steep learning curve because of it’s complex setup compared to it’s peers and also an experience in TypeScript is needed. Angular has it’s own CLI which also calls for additional learning. Angular’s view and logic separation makes it easy for new learners to work with ease because it leads to less confusing code.
React
Overview
React is developed by an internal team at Facebook. React is rather a library than a framework because of it’s focus is more towards UI building or supporting UI building. React lacks in the availability of built in libraries. If you want to add routing or state management you have to look out for community managed libraries. However, React has a vast community of active members where finding an updated library wouldn’t be that difficult but you still have to search for it though. The minimalistic approach of React can be advantageous for some users who like their frameworks to be lite. You can learn more about React here https://reactjs.org/
Syntax
React doesn’t have a view and logic separation instead every file in React is JavaScript. Every component in React is written in JavaScript or JSX (JavaScriptExtension) to be precise. JSX describes which HTML content to be rendered in real DOM based on certain conditions.
Ease of learning
React also has a steep learning curve because of it’s complex setup however you are at an advantage since it uses JSX which will be easy to learn when you are familiar with JavaScript. For the first time it may be confusing as it uses view and logic in the same file. Once you have had enough experience the learning curve is flat.
Vue
Overview
Vue.js is a standalone open source project developed by a team of collaborators. Vue lies in between Angular and React in the library perspective Meaning, it has some of the important features built in but not all of them (Comparing it to Angular). Features like form validation are depend on the community libraries. It also has a CLI. You can learn more about Vue here https://vuejs.org/
Syntax
Vue also has a separation of view and logic by either having a separate JavaScript file or within the same file with logic between the <script> tags. This separation aligns with that of Angular syntax and attracts users who would like to have their views and logic separated.
Ease of learning
Vue has a rather easier learning curve when compared to it’s peers. It does not always need a complex setup to get started. Adding an import to a HTML file and you can start from there. Vue also uses JavaScript (You can also use TypeScript) with separation of HTML and JavaScript which makes it easy to learn than Angular and React
Here is an overall comparison of the inbuilt features among the three frameworks
Performance
Performance can be compared in two ways
- Startup performance
- Runtime performance
Angular and Vue, though they have many inbuilt features and the separation logic it is light weight when it is deployed in production. React on the other hand is purely JavaScript which also renders it to be light weight.
Similarly the runtime performances of all the three are almost the same and there is no winner in case of performance comparison.
Popularity
I have taken the Google and NPM trends for comparing the popularity and here are the results
From the Google Trends Worldwide we can see Vue has the most popularity followed by React and Angular at the last. But we have to note that these are the results from the web search performed by people through Google and it is not a definitive comparison. Lets look at npm trends which can give us a better picture
npm trends records the download of npm packages pertaining to the three frameworks. We can see that React packages has more downloads followed by Vue and Angular on the same level.
The three frameworks are constantly undergoing changes with Angular 9 released a few months back and the advantage of React hooks after version 16.8 and under the hood rewrite of Vue js in the release of Vue 3, there can be no definite winner in this comparison. Whichever framework you choose to purse, make sure you follow the updates and learn the new features.
Checkout the below articles if you are excited to start with Angular or React.
Thank you and Happy learning!
