What mind-space should React, Angular, Vue, and Svelte occupy in your head? Which is the best for you?
In this article, we're going to reveal what these top four frameworks have in common and what makes each different from the other three. This will be a fantastic starting point for you if you know one but want to learn another. Or if you need to decide between them, read on.
Most authors will shy away from making a specific recommendation to avoid offending. I'm not going to do that. When we're finished, you'll be able to make an informed decision as to which is the best framework for your specific situation.
To ensure a fair comparison, we wrote a web app that is simple while implementing a real-world situation -- a dashboard. You can find the source for all four projects written in React, Angular, Vue, and Svelte at https://github.com/rapPayne/react-vue-svelte-angular.
Each dashboard has 25 widgets rendered in a responsive way. 24 are placeholders -- dynamic, random-colored placeholder widget. But to make it more real, we also created one weather forecast widget that consumes a RESTful API in real time. We also demonstrated routing with multiple "pages"; Home, About Us, and Contact Us. These are accessible via a menu at the top.
See? You can't tell which is created by which framework:
To compare the frameworks apples-to-apples, the four projects are uniform. They all use ...
Differences between the frameworks are important, but there are also things they all share. They all ...
Speaking of which ...
All four frameworks have a few stories of them being slow but none much more than the others. Please note that there are tons of stories of AngularJS being slow. But Angular is not the same as AngularJS. These stories don't apply to today's Angular.
I ran some benchmark tests on stefankrause.net. Here are the more interesting results.
Svelte is the fastest, followed by Vue, then Angular and then React. I was totally taken aback that Angular was faster than React/Redux. I expected exactly the opposite.
But even at its absolute worst, no human can detect a difference between any of these frameworks under similar loads. The speed numbers above are in milliseconds. The worst gap is less than one-tenth of one second. Hardly a difference worth worrying about.
The big takeaway: Don't make your choice based on performance; it just doesn't matter!
So what does matter then? Let's look at the other differences and see what rears its head.
Svelte was the most loved framework in a recent poll and I can see why. It is the simplest to learn of the four.
While Svelte is not backed by a Google/Facebook/Amazon/Microsoft, it is headed by a camera-friendly, eloquent, charismatic developer named Rich Harris. Very rare and very powerful combination. And Harris was recently hired by Vercel who is paying him a salary to work exclusively on Svelte.
The framework has some really cool bells and whistles that other frameworks don't have, like animations built in. But it lacks important features that I'd have prioritized. Things like form validations, http capabilities, PWA support, reactivity. You know, things that are less ornamental and more businesslike.
Svelte just feels ... I don't know ... unripened. Here's an example. When I added TypeScript, Svelte produced errors immediately. After research, I found that the tsconfig.json file is extending a ruleset that doesn't exist. The fix, according to the github issue, is to remove that line. It's a kludgey patch. "It'll be fixed someday", they say. "Someday"? Really? This is not encouraging.
And that's not all. Here are other examples:
Being immature also means
But wait! These problems are only going to improve ... and rapidly if I had to guess. While the community is small, it is very passionate and that often compensates. Would you rather have a small group of fanatical devs or a large group who are all just kind of 'meh'? The former? Yeah. Me too. And I refuse to bet against Rich Harris. The man seldom fails to do what he sets out to. Svelte will increasingly disrupt this space.
Vue, like Svelte and React keep the entire component in a single file with three sections.
While a Vue project is minimalist and thus highly simple, it uses the middleware pattern, allowing pluggable modules.
This keeps Vue simple while allowing you to add in the parts you need but only when you need them. It is highly extensible.
Ummm ... there are none? Vue has weaknesses, sure, but for each of its weaknesses one of the other frameworks is worse. Conversely for each of Vue's strengths, one of the others is stronger. So Vue is a very safe option with a fantastic balance between most of the strengths of others and fewer of their weaknesses. Much more mature than Svelte and much simpler than Angular or React.
Released in 2013 by a team at Facebook (Meta?), React is a Cinderella story, coming from waaay behind Angular to become by far the most popular framework today. React has done to Angular what Facebook did to MySpace.
React has the largest community support and the largest library selection of them all. It has the best balance of being learnable while also being super popular.
But my favorite thing about React is the developer experience. React allows me to write cleaner, more expressive code than any other framework. This more than makes React's learning curve worth the effort.
React has the most integrity in terms of software craftsmanship. It's the most honest in what it is really doing, JSX notwithstanding. Yes, JSX is a façade but the other three are even more abstract!
Lifecycle is much tougher. Whereas all three of the others support events like `mounted` or `OnInit`, React relies on the `useEffect()` hook which is hugely powerful but cryptic as heck!
It is the only one of the four frameworks that doesn't give us a shortcut to two-way binding. The others at least pretend to support two-way binding. React forces us to jump through some pretty daunting hoops to get data from a textbox and back into state. You have to imperatively bind to a state variable - imperatively! and then rerender the component with the new value.
Originating at Google, Angular is the oldest and therefore most stable framework. It deserves major props for defining this space, creating the category singlehandedly.
In the plus column, Angular's tooling is easily the most powerful of all four. The @angular/cli is head and shoulders more powerful and complete than any of the others.
State management is a dream with Angular. The other frameworks should aspire to be this good. State is properly encapsulated but not so paranoid as to require outside libraries in order to communicate between components. (Looking at you React/Redux and Vue/VueX.) We simply set data in any TypeScript class and Angular is smart enough to update its DOM appropriately. Super simple.
Only Angular has TypeScript baked in. The other three don't as much support it as they tolerate it -- and in the cases of Svelte and Vue it feels like a begrudging tolerance. All of my demo apps use TypeScript but after wrestling with types in Svelte and Vue, I actually pulled some out because it made the code less understandable and added nothing in terms of safety.
Components are split into three files, one each for CSS, HTML, and TypeScript, forcing you to switch between files during development. Yes, you can combine them into the `*.ts` file but then you lose intellisense and linting. That's a deal-breaker.
Also when you create a new component, you have to register it in a module like app.module.ts. Not a big deal, but it's yet another non-obvious step, hidden from noobs, and a likely place for bugs to appear. It doesn't have to be like this.
Angular is bloated and heavy and frustrating in the same way that Java and C# and Dart are. No wonder it needs TypeScript! You write a ton of complex code to get the simplest things accomplished. (Looking at you, rxjs)! Angular is the toughest of the four to learn, with React being the runner-up. Its architecture and semantics require tons of study rather than just referencing. I believe this is the reason that Angular continues to decline in popularity.
Any real-world project leader knows that success is measured by one thing ... Can our intended audience use our product?
Thus, the framework our dev team uses is important:
In order of importance, a framework must be fast, simple, and popular.
Angular and React are dominating community support (🤗) but are tough to learn (💩). Vue and Svelte are the easiest to learn (🤗) but are waaaaay less popular (💩) than Angular and React. So we have to compromise.
The learning curve happens only one time but 3rd party libraries are often needed and help for maintenance is needed pervasively. So I'm going to go ahead and eliminate Vue and Svelte until such a time as they're more popular.
Note that this may never happen with the huge head start that React has. Its popularity makes more folks choose it which increases its popularity even more. It's a self-perpetuating cycle.
Written by Rap Payne
Serial entrepreneur, consultant, trainer, and author -- All in the world of software development. On his own since 1999, Rap has built and sold several businesses and served clients in retail (Walmart, CVS, Walgreens, Pepsi), finance (JP Morgan Chase, Liberty Mutual), travel (Boeing, American Airlines, Southwest), military (US Navy, Air Force, Raytheon), and government (NSA, NASA, FBI) and many, many more.
Our live, instructor-led lectures are far more effective than pre-recorded classes
If your team is not 100% satisfied with your training, we do what's necessary to make it right
Whether you are at home or in the office, we make learning interactive and engaging
We accept check, ACH/EFT, major credit cards, and most purchase orders
New York City
Salt Lake City