This post is a comprehensive guide on which is perhaps the right solution for you: Angular vs React vs Vue.
Just a couple of years ago, developers were mainly debating whether they should be using Angular vs React for their projects. But over the course of the last couple of years, we’ve seen a growth of interest in a third player called Vue.js.
Let’s get started:
Part 1: A brief history of Vue vs React vs Angular
Before we get into the technical details, let’s first talk about the history behind these frameworks – just to better appreciate their philosophy and their evolution over time.
How it all started 🐣
Vue, also known as Vue.js, is the youngest member of the group. It was developed by ex-Google employee Evan You in 2014. Over the last several years, Vue has seen a substantial shift in popularity, even though it doesn’t have the backing of a large company. The most current version is always announced on the official Vue website on their releases page. Contributors for Vue are supported by Patreon. It should be noted that Vue also has its own GitHub repo, and functions using TypeScript.
Further reading: Vue.js Tutorial for Beginner Developers
Here’s a short summary of Angular vs React vs Vue, in terms of their status and history:
|Used by||Google, Wix||Facebook, Uber||Alibaba, GitLab|
Before you use an open source framework, make sure you go through its license. Interestingly, all three frameworks use the MIT license, which provides limited restrictions on reuse, even in proprietary software. Make sure you know the implications of the license before using any framework or software.
Here is a quick summary of the MIT license in plain English terms.
As “angular” and “react” are common words, it is difficult to grasp their popularity from Google Trends. Though, a good proxy for their popularity is the number of stars that their GitHub repositories get. A sudden shift in the number of stars of Vue occurred in mid-2016 and, recently, Vue has been up there with React among the most popular frameworks.
Let us check how the job market is for Angular vs React vs Vue, which is also a good measure of popularity:
Job market for Angular vs React vs Vue 👷♂️
The best sources of data that indicate the trends on the job market are the various job boards.
As seen from the trends of late 2018, the number of jobs that require a skill set of Angular or React is roughly the same, whereas that of Vue was still only a fraction of this number (about 20%).
If you’d like a somewhat more up-to-date analysis, you can try this Google Trends search, which breaks down search trends over the past 12 months for React jobs, Angular jobs, and Vue jobs. The data is embedded below:
Google Trends also breaks it down by geographic location if you’d like to look up the job search trends in your area.
If you are looking strictly from the point of view of the current job market, your best bet is to learn Angular or React. However, given that Vue has gained popularity over the last three years, it may take some time for projects to use Vue, or new projects that adopt Vue to reach a maturity level that commands a higher number of developers.
Part 2: Community and development
Now that you are familiar with the history and recent trends for each of these frameworks, we will look at the community to assess the development of these frameworks. We have already seen that for all of the frameworks, incremental releases have been shipped regularly over the past year, which indicates that development is going on in full swing.
Let us look at Angular vs React vs Vue with respect to statistics on their GitHub repositories (and note that the Vue numbers also include the separate Vue 3.0 repository):
When comparing Vue vs React, Vue has a huge number of watchers, stars, and forks. This shows Vue’s popularity among users and its value compared to React. However, the number of contributors for Vue are lower than Angular and React.
One possible explanation is that Vue is driven entirely by the open source community, whereas Angular and React have a significant share of Google and Facebook employees contributing to the repositories.
From the statistics, all three projects show significant development activity, and this is surely going to continue in the future — just these statistics cannot be the basis of not deciding to use either of them.
An additional metric that you’ll want to consider is GitHub’s “Used By” badge, which needs to be enabled by the repository author. This shows how many other repositories on GitHub are dependent on that repository. Angular’s GitHub repo shows 1.7 million, React currently shows almost 5.7 million users, while Vue shows over 167,000 for both of its repos combined. Quite a difference among the three frameworks, but this is largely due to Vue being the newer framework and doesn’t tell the full picture on overall demand.
Part 3: Migrations
As you’re working with your framework of choice, you don’t want to have to worry about a framework update coming along and messing up your code. Though in most cases you won’t encounter many issues from one version to another, it’s important to keep your finger on the pulse because some updates can be more significant and require tweaks to keep things compatible.
Angular plans major updates every six months. There is also a period of another six months before any major APIs are deprecated, which gives you the time of two release cycles (one year) to make necessary changes, if any.
When it comes to Angular vs React, Facebook has stated that stability is of utmost importance to them, as huge companies like Twitter and Airbnb use React. Upgrades through versions are generally the easiest in React, with scripts such as react-codemod helping you to migrate.
In the Migration section of the Vue 3 docs, Vue mentions that much is the same between Vue 2 and Vue 3 while 90% of the API is the same if you are migrating from 1.x to 2. There is a Vue 2 to Vue 1 migration helper tool that works on the console to assess the status of your app.
Part 4: Working with Vue vs Angular vs React
There are a handful of important characteristics to look at here, chief of them being overall size and load times, the components available, and learning curve.
Size and load times ⏲️
The sizes of the libraries won’t be as big of a factor since caching and minification are pretty standard nowadays. Although there can be a significant difference between the sizes of the frameworks (e.g. Angular is the largest), they are still small compared to the average webpage size (about 2MB according to the most recent data). Additionally, if you use a popular CDN to load these libraries, it is highly probable that a user has the library already loaded in their local system.
Components are integral parts of all three frameworks, no matter if we’re talking Vue, React, or Angular. A component generally gets an input, and changes behavior based on it. This behavior change generally manifests as a change in the UI of some part of the page. The use of components makes it easy to reuse code. A component may be a cart on an e-commerce site or a login box on a social network.
- 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.
To compare how the same app looks with different libraries, here is a great post on creating the same to do list app on React and Vue and contrasting the differences of the two frameworks.
Learning curve 🎓
So how difficult is it to learn each of these frameworks?
- 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.
Although Angular, React and Vue have a significant learning curve, their uses upon mastery are limitless. For instance, you can integrate Angular and React with WordPress and WooCommerce to create progressive web apps.
Part 5: Ready-to-use libraries
One of the useful and powerful things about using any of these three library options is taking advantage of the many component libraries and frameworks available. Based on history and popularity, naturally there are more React component libraries vs. libraries for Vue. And since Angular is a much more complete set of tools, it’s possible you may not need an Angular library as often as one for React or Vue.
With that in mind, below are a few options you can consider. This is just a small sampling to give you an idea of what these three libraries are capable of.
Material Kit 2 React is a free MUI design system based on React that includes 40 customizable front-end components and prebuilt design blocks. This is an excellent choice if you’re deciding between Vue vs React since those two libraries will have similar features and toolsets.
Vuetify is a complete Material Design framework built on top of Vue and includes hundreds of carefully crafted and accessible components. It’s actively developed and includes many customization options via Sass/SCSS.
If you’re deciding on Angular vs React and are determined to go with Angular, you’ll definitely want to consider Paper Kit 2 PRO Angular. It’s based on Bootstrap and built on Angular 13 with a large number of fully responsive components, sections, and example pages.
PrimeReact is another React-based UI library that includes 80+ components, templates, a theme designer, 280+ UI blocks, and icon library, and more. This is a nice open-source option with theming available via a number of popular frameworks (Material, Bootstrap, Tailwind, etc).
Quasar is a high-performance Vue-based framework that lets you quickly build Single-page Apps (SPA), Server-side Rendered Apps (SSR), mobile apps, and more. This framework consists of a large toolset with hundreds of Vue components, directives, composables, and more.
Angular vs React vs Vue: Who wins?
Towards the end of this post, let us recall the characteristic features of each framework to try to answer the question: Angular vs React vs Vue: which one should you choose?
The answer to the debate of Angular vs React vs Vue is that there’s no absolute right choice, a conclusion that you probably expected.
Each of these libraries has its own benefits and drawbacks. Based on the project you’re working on and your individual requirements, one of these is going to be more suitable than the others. It’s always key to do your own research before deciding, especially if you’re going to be working on a business venture and not on a personal project.
Which framework do you think is the winner here — Angular vs React vs Vue? Let us know in the comments below.
On another note, how about using WordPress some more? WordPress is perfectly suitable to run almost any website project imaginable, and there are some awesome themes available to make your design look great (many of these themes are free to download). Not to mention that you can host a WordPress website for cheaper.
Don’t forget to join our crash course on speeding up your WordPress site. With some simple fixes, you can reduce your loading time by even 50-80%: