DEV Community

Discussion on: React vs Vue vs Angular vs Svelte

Collapse
 
hb profile image
Henry Boisdequin

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

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

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.