Angular vs Vue.js vs React vs Svelte: The Statistics
What are the differences between Angular, Vue.js, React, and Svelte? Not from the point of view of these framework’s underlying philosophies, nor their differences in terms of developer experience, but using the hard cold truths of numbers?
To find out we’ll rely on the Stack Overflow and the "State of JavaScript” surveys, and the JavaScript performance benchmark. This allows us to compare these frameworks objectively across different criteria.
Together we will take a look at these different frameworks’ levels of usage, satisfaction, efficiency, and the salaries the developers who use them earn.
For each of these criteria, I’m going to assign a total of 10 points, and we’ll see what lessons we can learn at the end.
Level of use.
If we look at the Stack Overflow server:
- 40% of developers have used React
- 22% used Angular
- 19% used Vue
- 3% used Svelte
The "State of JS” survey shows similar numbers, although scaled up by the fact that the survey focuses on JS developers: React is used by 80% of JS developers, Angular by 54%, Vue.js by 51%, and Svelte by 20%.
Angular and Vue.js have a roughly equal usage rate, React is largely ahead and Svelte is significantly behind. This results in 5 points to React, 2.5 points each to Vue.js and Angular, and 0 to Svelte.
Developper Satisfaction (and DX)
Now let’s look at developer satisfaction. How much do these frameworks make people want to use them? How satisfied or frustrated are developers with using these technologies?
The Stack Overflow survey shows a 71% satisfaction rate for Svelte, the leader among all frameworks.
Then comes React with a very honorable score of 69%. Then Vue with 64%. And finally a little behind, we have Angular with 55%, so almost a balance between those who love and those who hate.
The State of JavaScript survey says similar things, with a satisfaction rate of 90% for Svelte, 84% for React, 80% for Vue.js, and only 45% for Angular.
So in terms of attractiveness, Svelte is ahead, then React and Vue.js are just a bit behind. So I’m giving 4 points to Svelte, and 3 points to React and Vue.js.
Performance
Now we are going to look at the performance.
To do so, we will use the JavaScript Framework Benchmark tool. It is imperfect, it measures things that do not necessarily have a direct application in the real world, but that still allows us to draw some interesting lessons.
For each measurement, it allows us to compare the frameworks with vanilla JavaScript.
This benchmark is separated into 3 subjects matters: execution time, memory used, and start up time.
If you look at the output tables, each cell of the table is colored from green to red through yellow and orange, and the closer to red, the more we deviate from the reference of the "basic” JavaScript.
Here, I’m going to assign 10 points for each of these three criteria, and then average them out to give an overall relative performance score.
Speed of execution
If we start with execution time, for many of these tests Svelte is ahead, Vue.js is just behind, and React and Angular are lagging behind. So 5 points to Svelte, 4 to Vue, and 0.5 to React and Angular.
Memory usage
For the memory used, Svelte stands out from the pack, and Vue is slightly ahead of React and Angular which are neck and neck.
So 6 points to Svelte, 3 to Vue, and 0.5 to React and Angular.
Startup time
In terms of startup speed, Svelte performs very well. Vue.js is a little less so, and React and Angular are just behind.
This time the results are more homogeneous than the previous tests, so I’ll give 4 points to Svelte, 3 points to Vue.js, and 1 point to Angular and React.
Performance scores
In terms of performance, the final scores are: 5 points for Svelte 3.5 points for Vue.js, and 0.5 points for React and Angular.
Salaries
How much (on average) do developers earn for each of these 4 technologies.
According to Stack Overflow, the median salaries for each framework are as follows: Angular at 49k USD, Vue at 50k USD, React at 58k USD, and finally Svelte at 62k USD.
Angular and Vue.js are in the same range and React and Svelte are well ahead with an advantage for Svelte. So let’s say 1.5 points for Angular and Vue each, 3 points for React 4 points for Svelte
Key Takeways
This gives us the following final totals, with 40 points up for grabs:
- Angular: 4.5
- Vue: 10.5
- React: 12
- Svelte: 13
What can we conclude from this?
Well, this is the opportunity to go back and look at the JS survey. It presents a visualization that I think expresses things well. It tracks popularity and satisfaction across time.
This view combines user satisfaction (from left to right) with usage rate (from the bottom to the top) , and I find the approach interesting, it even shows trajectories across time.
source: State of JavaScript 2021 Survey
Svelte’s 90% satisfaction rate is from early adopters, who are happy to try out new technologies.
React, on the other hand, has a dominant position in terms of usage, and still manages to maintain a very high satisfaction rate.
If we look at the 4 quadrants of use and satisfaction: Angular is moderately used but also very little appreciated. Vue.js is appreciated but not necessarily used, and its appreciation rate seems to decrease with use as if it was losing speed. React is very much used and appreciated and this is all the more remarkable because … it’s easy to like a framework that you don’t use much, much less so when you spend time working on it.
And Svelte is growing, with more and more people discovering and appreciating it, but it’s still very young. So what do I recommend learning?
Today, React has become the de facto standard. It has established itself in the frontend framework "market”, but is also starting to take hold on the server-side thanks to Next.js and Remix.
And if you are feeling adventurous, I’d recommend you also look at how Svelte works.
