DEV Community

React vs Vue vs Angular vs Svelte

Henry Boisdequin on November 29, 2020

In this article, I'm going to cover which of the top Javascript frontend frameworks: React, Vue, Angular, or Svelte is the best at certain factors ...

Read full post

stefanovualto • Nov 29 '20

Hi Henry,

I mostly agree with the point 1,2,3.

But point 4 is subjective depending on your background and previous knowledge. To improve your post, you should add a note explaining what's your background.

Finally point 5 are not similar at all. The vue example is a complete page using a reactive property.

Anyway as @johnpapa said in a talk, you can achieve almost the same result with any framework, pick the one which feels right for you... :)

Henry Boisdequin • Nov 29 '20

Yes, I agree with you! I would recommend anyone to learn the framework which feels right for you.

For the Vue example, I'm not an expert at Vue and don't know a better way to do it (if you have a smaller, more concise 'hello world' example, please comment it).

I will definitely work an a 'what's my background section'. To explain it know: I've been using React in all my web dev projects. I have basic knowledge of Vue, Angular, and Svelte. After looking at these 5 factors, I plan to use Svelte for my coming projects.

Thanks, @stefanovualto for the feedback!

Christopher Wray • Nov 29 '20 • Edited

In the Vue example you are using data components. For the others just plain html. You could have a Vue component with a template of just the h1 tag and no script. It would look more like the svelte example.

Henry Boisdequin • Nov 29 '20

✅

stefanovualto • Nov 29 '20 • Edited

In your vue example, I think that you should expect to be in a .vue file lik le it seems to be in the others (I mean that you have the whole bundling machinery working under the hood). Then something similar would be:

<template>
    <h1>Hello world!</h1>
</template>

Maybe a pro' for vue is that it can be adopted/used progressively without having to rely on building process (which I am assuming are mandatory for react, svelte and maybe angular). What I mean is that your previous example worked, but it wasn't comparable to the others.

Zen • Nov 30 '20

I'm usually using Svelte for my projects. Because, it's simple, write less, and get more

Ryan Carniato • Dec 3 '20 • Edited

A couple thoughts.

"Requires JSX" a downside??? I almost stopped reading at that point. Template DSLs are more or less the same. If that's a con, doesn't support JSX could easily be seen as one. There are reasonable arguments for both sides and this shows extreme bias.

Vue is "truly reactive" as well. Whatever that means.

Your JS Framework Benchmark results are over 2 years old. Svelte and Vue 3 are both out and in the current results. He now publishes them per Chrome version. Here are the latest: krausest.github.io/js-framework-be.... It doesn't change the final positions much, but Svelte and Vue look much more favorable in newer results.

If anyone is interested in how those benchmarks work in more detail I suggest reading: dev.to/ryansolid/making-sense-of-t...

Henry Boisdequin • Dec 3 '20

I'm a React dev and it's my favourite framework out of the bunch. When I did some research and asked some other developers when they think of React they think of needing to learn JSX. For something like Svelte, all you need to know is HTML, CSS, and JS.

I know that my benchmarks were two years old and I addressed this multiple times before:

For the performance factor, I knew that the frameworks were a bit outdated but the general gist stated the same. Svelte 3 was released some time ago and that blows all of the other frameworks out of the water in terms of performance hence Svelte would stay on top. Vue and React are very similar in performance, Vue even says so themselves: vuejs.org/v2/guide/comparison.html. Since, Angular is a massive framework with built-in routing, etc, its performance didn't become better than Vue, React, or Svelte in its newer versions.

Thanks for the new benchmark website, I will definitely be using that in the future. Also, I just read your benchmark article and its a good explanation on how these benchmarks work.

Thanks for your input.

Ryan Carniato • Dec 3 '20 • Edited

Here's the index page where he posts new results as they come up: krausest.github.io/js-framework-be...

When I did some research and asked some other developers when they think of React they think of needing to learn JSX. For something like Svelte, all you need to know is HTML, CSS, and JS.

Svelte has good marketing clearly.

Is this HTML?

<label>
    <input type="checkbox" bind:checked={visible}>
    visible
</label>

{#if visible}
    <p transition:fade>
        Fades in and out
    </p>
{/if}

Or this HTML?

<a @[event]="doSomething"> ... </a>
<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

How about this?

<form onSubmit={handleSubmit}>
  <label htmlFor="new-todo">
     What needs to be done?
   </label>
   <input
      id="new-todo"
      onChange={handleChange}
      value={text}
    />
    <button>
       Add #{items.length + 1}
    </button>
</form>

Henry Boisdequin • Dec 3 '20

That's why a con of Svelte is its syntax (I added that in my post). This is more explanation to that point:

Firstly, for confusion in variable names, I'm talking about how Svelte handles state. Coming from React, state would only be initialized with the useState hook. In Svelte, all the variables you make is state which could be confusing for someone just learning Svelte. Also, for the confusion in syntax, I'm talking about the confusion in logic. For example, if statements in Svelte are different than the usual Javascript if statements which could cause some confusion/more learning time for beginners. There are also other examples of this.

Zen • Nov 29 '20

why svelte is not seen in search trend? because, svelte's docs is very easy to new comer in this framework

Henry Boisdequin • Nov 29 '20

I'm not really sure @mzaini30 . A great pro of Svelte is its docs and tutorial on its website. I think in 1-2 years, you are going to see Svelte at least where Vue is in the search trends.

Most of the search trends come from developers asking questions like how to fix this error, or how to do this but since not many people use Svelte (compared to the other frameworks) there are not many questions being asked.

Bergamof • Nov 30 '20

Sure! Too bad the great Svelte tutorial was not mentioned.

Henry Boisdequin • Nov 30 '20

It's a great tutorial, but I decided to just add video tutorials. In the community factor, I give a link to the Svelte community website which features that tutorial!

dallgoot • Jan 2 '21

I don't want to start a flamewar but i see a trend where React is considered the -only- viable framework and -some- people reacting like religious zealots against any critics because "it's the best ! it's made by Facebook!"
React is too hyped IMHO.
Svelte is a a true innovation. And yes performance matters.
Angular and Vue may lose traction with time... i think... i fail to see their distinctive useful points.

Henry Boisdequin • Jan 2 '21

I completely agree with you. Most React devs now will not try any other framework and just make fun of the others. I completely agree that React is too hyped. Unfortunately, as you stated, Angular and Vue are losing some traction. I also agree with you that Svelte is a true innovation, this is why I put Svelte at number 1! For 2021, I will focus on using Svelte. Thanks for reading!

Sergiy Yevtushenko • Dec 3 '20

Sad that Solid not even mentioned, although it's the one of the best performing frameworks.

Henry Boisdequin • Dec 3 '20

I've never actually heard of solid. I'll check it out!

Sergiy Yevtushenko • Dec 3 '20

Well, author of the Solid is even commented in this topic.

Ryan Carniato • Dec 16 '20

To be fair, performance is only one area and arguably the least important. Even if Solid completely dominates across the board in all things performance by a considerable margin, we have a long way before popularity, community, or realworld usage really makes it worth even being in a comparison of this nature. But I appreciate the sentiment.

Sergiy Yevtushenko • Dec 16 '20

Well, good performance across the board usually is a clear sign of high technical quality of design and implementation.

Shriji • Nov 29 '20

Also, it would be great if you could give a little explanation of this point

Confusion in variable names and syntax

Henry Boisdequin • Nov 30 '20

Firstly, for confusion in variable names, I'm talking about how Svelte handles state. Coming from React, state would only be initialized with the useState hook. In Svelte, all the variables you make is state which could be confusing for someone just learning Svelte. Also, for the confusion in syntax, I'm talking about the confusion in logic. For example, if statements in Svelte are different than the usual Javascript if statements which could cause some confusion/more learning time for beginners. There are also other examples of this.

Shriji • Nov 30 '20

It makes syntax simpler TBH. React isn't even a direct comparison to Svelte. The only syntax that users will get accustomed to is $ assignments.

Sylvain (:seel-vahn) • Dec 3 '20

React with a smaller learning curve than Vue.js 🤔

Henry Boisdequin • Dec 3 '20

They were very tight but I would say that React has a smaller learning curve as its more intuitive and has easier syntax than Vue.

Sylvain (:seel-vahn) • Dec 4 '20

Sorry @hb, you've decided to go on a touchy subject by writing this article! I will have to disagree with you on that point.

I think it's perfectly okay to prefer using React. There are many reasons why it is a good choice. However, an easy learning curve isn't part of it.

Just so there is no ambiguity, after having used all the Frameworks from this article - my choice goes towards Vue.js and Svelte, but I'll try to remain as objective as possible.

1) According to the State of JS survey 2018 (not using 2019, because that same question wasn't part of last year's survey). From 20,268 developers interrogated, the number #1 argument about Vue.js is an easy learning curve. For React it comes at position #11 (top 3 beings: elegant programming style, rick package ecosystem, and well-established):

2018.stateofjs.com/front-end-frame...
2018.stateofjs.com/front-end-frame...

2) Main reason why Vue.js is labelled "The Progressive JavaScript Framework", is because it is progressive to implement and to learn. Before you can get started with React, you need to know about JSX and build systems. On the other end, Vue.js can be used just by dropping a single script tag into your page and using plain HTML and CSS. This makes a huge difference in terms of approachability of the Framework.

3) Maybe less objective on this one - but from my own professional experience with both Frameworks and leading teams of developers - it usually takes Junior Developers almost twice the time to become proficient with React than with Vue.js. Firstly because of what I mentioned in point number 2. Secondly, because React has few abstraction leaks that makes performance optimisation something developers have to deal with themselves (using memoize hooks). It's a concept that is hard to understand, but essentials if working on large applications. Thirdly, because of the documentation (as you mentioned in your article). And lastly because of the fragmented ecosystem of libraries that can quickly be overwhelming for Junior Devs.

Again, I think there are a lot of reasons why React can be a good choice. But not because of the learning curve.

Thorsten Hirsch • Nov 29 '20

Angular 6? Well, they just released version 11 and there was the switch to Ivy since version 6, so what about a more recent benchmark? And looking at the Google trends chart I wonder why all 3 (React/Angular/Vue) lost quite a bit of their popularity during the past months... any new kid on the block? It's obviously not Svelte, which could hardly benefit from the others' losses.

Henry Boisdequin • Nov 30 '20

For the performance factor, I knew that the frameworks were a bit outdated but the general gist stated the same. Svelte 3 was released some time ago and that blows all of the other frameworks out of the water in terms of performance hence Svelte would stay on top. Vue and React are very similar in performance, Vue even says so themselves: vuejs.org/v2/guide/comparison.html. Since, Angular is a massive framework with built-in routing, etc, its performance didn't become better than Vue, React, or Svelte in its newer versions.

For the search results, they are unpredictable. To my knowledge, there is no new kid on the block in terms of frontend Javascript frameworks. If anything, more people are using Web Assembly. As you can see from the search results graph, it goes up and down, changing all the time.

Shriji • Nov 29 '20

You forgot to mention that Svelte has a great discord :)

Henry Boisdequin • Nov 29 '20

I just had a look at it, a great tool! I'll add it to the post!

vnti vnso • May 7 '21

coding improvement in areas :
1) nmbr bes heksbin same as oph binary computers/mobiles etc
2) unicase ( small case ) only programming
3) phonetics like languages : scotlish zinglush songlish
4) underscore on keyboard under pipe symbol pipes out your ideas to computer/mobiles/iot easily

dev-to-uploads.s3.amazonaws.com/up...
dev-to-uploads.s3.amazonaws.com/up...
dev-to-uploads.s3.amazonaws.com/up...
dev-to-uploads.s3.amazonaws.com/up...
dev-to-uploads.s3.amazonaws.com/up...
dev-to-uploads.s3.amazonaws.com/up...

Bergamof • Nov 30 '20

In the "performances" section, why did you test a Svelte v2 and not a more recent v3 ?

Henry Boisdequin • Nov 30 '20

With the tool that I was using, it was a bit outdated and didn't feature the more recent Svelte 3. I commented this about the performance section:

For the performance factor, I knew that the frameworks were a bit outdated but the general gist stated the same. Svelte 3 was released some time ago and that blows all of the other frameworks out of the water in terms of performance hence Svelte would stay on top. Vue and React are very similar in performance, Vue even says so themselves: vuejs.org/v2/guide/comparison.html. Since, Angular is a massive framework with built-in routing, etc, its performance didn't become better than Vue, React, or Svelte in its newer versions.

Bergamof • Nov 30 '20

Didn't notce, sorry :)

Nikola • Nov 30 '20

Angular con: it is complex? what....

Nathan Cai • Dec 1 '20

Learning Angular is actually no that bad until RXJS comes in

Henry Boisdequin • Dec 1 '20

You need to learn Typescript
Smart/Dumb Components
One-way Dataflow and Immutability
And much more

It's much more complex and harder to understand than the other frameworks on this list.

Nikola • Dec 1 '20

learn typescript? You mean to start writing it... it's easy and intuitive, I'm writing Angular, React, and Node code only in typescript.
Smart/Dumb Components? I really don't understand what is this referred to?
Angular has two-way data biding, and even easier data passing to the child and back to the parent.
And of course, it has more features, its framework, React is more like a library compared to Angular.

Hanster • Oct 19 '21

I fully agree. Comparing framework e.g angular against library e.g react, is like comparing a smart tv against a traditional tv. Of course smart tv is more challenging to learn it's usage, not because it's lousy, but it has more features beyond watching tv.

Ayyash • Jan 13 '21

What about development time? that is sometimes a decisive factor... debugging tools, tooling and cli support, things that made javascript a nightmare until jquery came along :)