React, Angular, Vue, and Svelte: A Comparison

Written by Rap Payne

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.

TL;DR

• Performance just doesn't matter! Other factors are differentiators. Performance is not.
• React is the best choice for most of us because it is the best balance of community support and simplicity.
• Svelte and Vue are the simplest. If they can gain in popularity, one or the other will overtake React as the best option.
• Angular is the simplest choice for back-end developers who are coming over to the dark side of web development.

The Project

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.

You would not be able to tell  which is created by which framework, but they all use:

• TypeScript
• npm
• No CSS preprocessors (like Sass, Less, Stylus, Tailwind, etc.)
• No CSS frameworks (like Bootstrap, Material Design Lite, etc.)
• No testing so we can keep things simple
• Responsive design

What the Frameworks Have in Common

Differences between the frameworks are important, but there are also things they all share. They all ...

• Are open sourced with community contributions
• Are for web development
• Extend HTML for looping and conditionals so that the structure can be written declaratively
• Use components for encapsulation
• Allow one-way data flow from parent to child only. Although three of them pretend to support two-way data flow, it's a smoke screen. They really don't
• Create SPAs (single-page apps)
• Have a CLI (command-line interface) that scaffolds a new project
• Create a cool development environment that supports debugging in the browser with hot reload
• Use VS Code as the de-facto standard IDE
• Performed well. They're all very, very fast

Speaking of which ...

Performance Doesn't Matter

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

Svelte is not as much a framework as it is a compiler. Svelte doesn't put the entire app in the browser to run like the other frameworks. Instead, each request runs the compiler on the server, generates a page and sends it to the client. Unlike the other three, Svelte avoids the up-front cost of loading all JavaScript before the first page loads. Svelte delivers only the parts that you need just in time.

Why Svelte is great!

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.

OTOH, this is why Angular is so bloated and Svelte is ... well ... svelte.

Disadvantages of Svelte

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:

• Styles are pre-compiled. This is good but every component shares one copy and therefore cannot have JavaScript variables. They're not dynamic.
• The documentation is unclear and has dated information. There's literally nothing there on TypeScript. What's the proper type for a Svelte component? You may know, but it's not in the docs so the rest of us don't.
• Shall I go on?

Being immature also means

• Fewer developers improving the framework
• More frequent changes of existing code and thus deprecations
• Smaller community of peers
• Fewer answered questions on StackOverflow and github issues.
• Fewer third party libraries and tools

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

Evan You was a Google developer who wanted a framework that was simpler than Angular. So, being a next-level geek, he went out and wrote one. Ironically Vue is more like React than Angular; it uses a virtual DOM like React and relies on functional paradigms because, well, JavaScript is a functional language and not an object-oriented one.

Why Vue is great!

Vue, like Svelte and React keep the entire component in a single file with three sections.

1. '<script>' with JavaScript for behaviour
2. '<template>' with HTML for structure
3. '<style>' with CSS for styling and layout

Whereas React demands that you bring HTML into your JavaScript and Angular demands that you bring JavaScript into your HTML, Vue keeps them blissfully separate and yet leaves them in a single file. Easy to find. Easy to maintain.

While a Vue project is minimalist and thus highly simple, it uses the middleware pattern, allowing pluggable modules.

Vue.use(SomePluggableModule)
Vue.use(AnotherPluggableModule)
Vue.use(YetAThirdPluggableModule)

This keeps Vue simple while allowing you to add in the parts you need but only when you need them. It is highly extensible.

Disadvantages of Vue

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.

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.

Why React is great!

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!

Disadvantages of React

React doesn't have directives in the HTML. Instead, it relies on your state-of-the-art JavaScript skills to handle flow control. You use Array.prototype.map() for iteration and logical operators like "&" and "|" for conditionals. This is unexpected for noobs and less intuitive for veterans. Hey pros, before you push back, try to remember when you were first learning React ... didn't it take you a while to understand why you can't use `if` or `for` or `while` in JSX? Of course it did! The prosecution rests, your honor.

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.

Angular

Originating at Google, Angular is the oldest and therefore most stable framework. It deserves major props for defining this space, creating the category singlehandedly.

Why Angular is great!

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.

Disadvantages of Angular

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.

A caveat to the learning curve argument; if you're already a JavaScript wizard, Angular is the hardest to learn. But if you have a team of backend devs who are transitioning to front-end, then Angular relieves some of the burden of being really stinking good at JavaScript. Why? Because Angular hides behind the veneer that is TypeScript. It makes JavaScript feel more like Java or C# development. So your team of very experienced OO-devs may actually get up to speed quicker with Angular than the other three.

Conclusion

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:

• If our app is slow, users are frustrated and won't use it.
• If it is complex, our app will be buggy.
• If it is complex, our app can't be fixed/modified by our devs
• If it is hard to learn, our app takes longer to write and release
• The better the community support, the quicker we can write and release

In order of importance, a framework must be fast, simple, and popular.

• Fast - All four are fast
• Simple - Svelte, Vue
• Popular - React, Angular

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.

So that leaves us with Angular and React. If I'm managing a team of devs who are new to JavaScript and client-side web development, maybe they're Java or C# devs, then I'm going to choose Angular. Because my devs will have a much flatter curve -- TypeScript and Angular's class-based components try to mimic the OO style of writing.

But if our devs know JavaScript, React is going to allow us to create much cleaner, well-designed bits of code that will scale, run fast and most importantly, be written quickly and maintained easier. For that situation, React is the clear winner ... for now.

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.