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 ...
Collapse
stefanovualto profile image
stefanovualto

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... :)

Collapse
hb profile image
Henry Boisdequin Author

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!

Collapse
cwraytech profile image
Christopher Wray • Edited on

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.

Thread Thread
hb profile image
Henry Boisdequin Author

Thread Thread
stefanovualto profile image
stefanovualto • Edited on

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>
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
mzaini30 profile image
Zen

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

Collapse
ryansolid profile image
Ryan Carniato • Edited on

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...

Collapse
hb profile image
Henry Boisdequin Author

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.

Collapse
ryansolid profile image
Ryan Carniato • Edited on

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}
Enter fullscreen mode Exit fullscreen mode

Or this HTML?

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

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>
Enter fullscreen mode Exit fullscreen mode
Thread Thread
hb profile image
Henry Boisdequin Author

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.

Collapse
mzaini30 profile image
Zen

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

Collapse
hb profile image
Henry Boisdequin Author

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.

Collapse
bergamof profile image
Bergamof

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

Thread Thread
hb profile image
Henry Boisdequin Author

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!

Collapse
thorstenhirsch profile image
Thorsten Hirsch

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.

Collapse
hb profile image
Henry Boisdequin Author

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.

Collapse
maoosi profile image
Sylvain (:seel-vahn)

React with a smaller learning curve than Vue.js 🤔

Collapse
hb profile image
Henry Boisdequin Author

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.

Collapse
maoosi profile image
Sylvain (:seel-vahn)

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.

Collapse
dallgoot profile image
dallgoot

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.

Collapse
hb profile image
Henry Boisdequin Author

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!

Collapse
siy profile image
Sergiy Yevtushenko

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

Collapse
hb profile image
Henry Boisdequin Author

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

Collapse
siy profile image
Sergiy Yevtushenko

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

Thread Thread
ryansolid profile image
Ryan Carniato

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.

Thread Thread
siy profile image
Sergiy Yevtushenko

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

Collapse
shriji profile image
Shriji

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

Confusion in variable names and syntax

Collapse
hb profile image
Henry Boisdequin Author

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.

Collapse
shriji profile image
Shriji

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.

Collapse
shriji profile image
Shriji

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

Collapse
hb profile image
Henry Boisdequin Author

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

Collapse
nikme profile image
Nikola

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

Collapse
destroyer22719 profile image
Nathan Cai

Learning Angular is actually no that bad until RXJS comes in

Collapse
hb profile image
Henry Boisdequin Author
  • 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.

Collapse
nikme profile image
Nikola

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.

Thread Thread
hanct profile image
Hanster

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.

Collapse
zabc profile image
vnti vnso

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...

Collapse
bergamof profile image
Bergamof

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

Collapse
hb profile image
Henry Boisdequin Author

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.

Collapse
bergamof profile image
Bergamof

Didn't notce, sorry :)

Collapse
tacosnack profile image
TacoSnack

I feel the best thing about React is the connectivity with React Native, which allows you to seamlessly connect a mobile app with a desktop one.

Collapse
ayyash profile image
Ayyash

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 :)

Collapse
hb profile image
Henry Boisdequin Author

I think development time is a mix of the resources, performance, and learning curve. Good thing we don't use jquery anymore! Thanks for reading!

Collapse
yigitt profile image
yigitt

I can not stress out how much i liked your objective assesment.

and yes i svelte too.

Collapse
tiiunder profile image
Felix G

Oh great, just what the world needs. Another JavaScript Framework

Collapse
hb profile image
Henry Boisdequin Author

What makes the Javascript ecosystem exciting!