React vs Svelte

what is React and What is Svelte?

React A JavaScript library for building user interfaces — React website

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes. — Svelte website

so for simplicity React is a library and Svelte is a compiler.

in this article, we will discuss these differences between React and Svelte.

1- Performance

2- Bundle size

3- Ecosystem

4- Developer Experience

1- Performance

Svelte is a compiler that converts your application into ideal and efficient JavaScript during build time as opposed to React,

which uses a virtual DOM to interpret the application code during runtime. which makes Svelte more performant than React.

2- Bundle size

React is 6.3kB and 2.6kB compressed but Svelte is 3.8kB and 1.5kB compressed which is approximately half or react is bundle size.

Svelte is significantly smaller than React due to it having no dependencies, the only dependencies svelte has are developer dependencies. And that is Amazing.

another aspect to mention that for scoped styling and animation you would have to install other libraries in React.

Svelte comes with scoped-CSS and animations out of the box. more on that in the Developer Experience section.

3- Ecosystem

*React has a rich ecosystem that makes it attractive to developers.

I think every problem you will face in making a typical web app a developer out there faced it and made a solution for it in React.

on the other hand, you can say that Svelte is relatively new, so the ecosystem is not rich compared to React.

4- Developer Experience

This is what attracted me the most to Svelte.

Svelte has a better developer experience than React without sacrificing performance, it outperforms React. For beginners Svelte is easier, you write what you already know (HTML -CSS -Js) and the additional syntax can take you from 5 minutes to an hour to learn which is pretty amazing. React takes several hours to grasp the fundamentals of it.

I- Syntax

here is the same app is written in React and Svelte

1- React

import React, { useState } from "react";
export default function TodoList() {
  const [todos, setTodos] = useState([
    { done: false, text: "eat" },
    { done: false, text: "sleep" },
    { done: false, text: "code" },
    { done: false, text: "repeat" },
  ]);
function toggleDone(t) {
    setTodos(
      todos.map((todo) => {
        if (todo === t) return { done: !t.done, text: t.text };
        return todo;
      })
    );
  }
const [hideDone, setHideDone] = useState(false);
function toggleHideDone() {
    setHideDone(!hideDone);
  }
const filtered = hideDone ? todos.filter((todo) => !todo.done) : todos;
return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={hideDone}
          onChange={toggleHideDone}
        ></input>
        hide done
      </label>
      <ul>
        {filtered.map((todo) => (
          <li onClick={() => toggleDone(todo)}>
            {todo.done ? "👍" : ""} {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
}

2- Svelte

<script>
 let todos = [
  { done: false, text: 'eat' },
  { done: false, text: 'sleep' },
  { done: false, text: 'code' },
  { done: false, text: 'repeat' }
 ];
 function toggleDone(t) {
  todos = todos.map(todo => {
   if (todo === t) return { done: !t.done, text: t.text };
   return todo;
  });
 }
 let hideDone = false;
 $: filtered = hideDone
  ? todos.filter(todo => !todo.done)
  : todos;
</script>
<label>
 <input
  type="checkbox"
  bind:checked={hideDone}
 >
 hide done
</label>
<ul>
 {#each filtered as todo}
  <li on:click={() => toggleDone(todo)}>
   {todo.done ? '👍' : ''} {todo.text}
  </li>
 {/each}
</ul>
// $: means that this is a reactive varaible so it changes every //time it's dependencies change

you can see that svelte is easier to read and understand.

“Svelte apps have typically 40% less code than React” — Rich Harris (Creator of Svelte)

II- Styling

To scope styling in React, you would have to install libraries like Styled-components, CSS modules, emotion, etc.

Styling in svelte is scoped by default, you don’t have to install any other dependencies it’s scoped by default. and for the animation you would have to install additional libraries, svelte has an animation package by default that makes animation in CSS. CSS animations are more performant than CSS-in-Js libraries. you can use CSS-in-Js if you want in Svelte but you won’t have to. svelte also remove unused CSS declarations and gives you a warning for unused CSS. Finally! CSS has a semi-compiler.

III- Accessibility

Svelte gives you a warning if you write inaccessible code, React doesn’t which makes it harder to detect accessibility issues.

In conclusion, I think Svelte is pretty neat and better than React in every aspect except the community around it is still small.

I think over the next three years Svelte will have an amazing ecosystem and will be more popular than React.