Nefe James Nefe is a Frontend Developer who enjoys learning new things and sharing his knowledge with others.

Should you switch from React to Svelte?

3 min read 997

Svelte and React logos.

Introduction

React.js and Svelte are two JavaScript frontend frameworks that are common in the world of developers. Both tools provide developers with a productive approach to the development of different web applications. In this article, we’ll look at the strength Svelte brings, and why it’s worth your consideration.

Virtual DOM vs compiler

React uses a virtual DOM to interpret the application code during runtime. It bundles a certain amount of overhead code, which will run in the browser’s JavaScript engine to monitor and update the DOM. The virtual DOM watches for any changes and calculates the best possible method to make these changes to the real DOM.

Svelte is a compiler that, when you create a production application, translates your application into JavaScript code. This ensures that when your program is running in the DOM, no overhead framework code is injected in the browser. At build time, Svelte runs, translating the components into a highly efficient imperative code that updates the DOM surgically. This way, you’re able to write highly performant code.

Ease of use

Learning React can be daunting when you have to learn things like JSX and CSS-in-JS to build the most basic applications.

Compared to React, Svelte is simpler to understand and get started with, as the major portion of Svelte is plain JavaScript, HTML , and CSS. It sticks closely to HTML , CSS, and JavaScript ‘s classic web development models. This makes it much easier to learn Svelte than React. As it introduces only a few extensions to HTML and JavaScript, there are fewer more concepts to learn that you wouldn’t have to learn with React.

This is an example of a .svelte component.

All we have here is basic HTML, CSS, and JavaScript:

<style>
  h1 {
    color: green;
  }
</style>

<script>
  let name = 'Nefe';
</script>

<h1>Hello, {name}!</h1>

Better developer experience

While less code doesn’t always mean better, more functional code, a strong point for Svelte is how much less code you have to write compared to React. Here’s a sample of a basic application made with Svelte:

<script>
  let a = 1;
  let b = 2;
</script>

<input type="number" bind:value={a}>
<input type="number" bind:value={b}>

<p>{a} + {b} = {a + b}</p>

Below is a code snippet of the same application built with React. Spacing included, Svelte is 9 lines of code, while React is 21 lines of code. That is a significant difference. The beautiful thing about the Svelte app is that it is in no way less functional.

import React, { useState } from 'react';

export default () => {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  function handleChangeA(event) {
    setA(+event.target.value);
  }
  function handleChangeB(event) {
    setB(+event.target.value);
  }

  return (
    <div>
      <input type="number" value={a} onChange={handleChangeA}/>
      <input type="number" value={b} onChange={handleChangeB}/>
      <p>{a} + {b} = {a + b}</p>
    </div>
  );
};

Svelte exports .svelte components for you automatically. With Svelte, you don’t ever need to worry about forgetting to export components, as they are exported by default, and are ready to be imported by other components.

We made a custom demo for .
No really. Click here to check it out.

Svelte comes with built-in effects and animations. You don’t need to use a third-party library to create animations like you would in React.

svelte/motion, svelte/transition, svelte/animate, and svelte/easing provide us with powerful modules to create amazing animations out of the box.

With Svelte, you don’t have to worry about writing unique classes or styles leaking out of their components. In Svelte, styles are component scoped in their style tags, and this allows for flexible styling.

This means less of a headache for you, the developer, and makes your work easier. It also means you don’t need to learn how to use styling libraries like Styled-Components and Emotion. As a result, you can write and ship code faster, as there’s less technological overhead.

Performance

Svelte works during the compile step. When you run the production build of a Svelte app, Svelte compiles your code to highly-optimized vanilla JavaScript. This means that no framework code is added at runtime. This improves the application’s overall performance, as the browser has less work to do.

Svelte surgically updates the DOM without relying on a middle man or any complex reconciliation techniques. Svelte’s compiler tracks changes in your variables and updates the HTML accordingly.

It looks through your code and watches for components that depend on your variables, and it updates those components as the variables change. This way, Svelte is reactive without having to rely on any third-party API. On the other hand, by calling this.state or using the useState Hook, React must be told to watch for modifications.

<script>
  let count = 0;
  $: doubled = count * 2;
  function handleClick() {
    count += 1;
  }
</script>

<button on:click="{handleClick}">Click me!</button>

<p>{count} doubled is {doubled}</p>

Here, we have a variable count, and another doubled. doubled depends on count for its value. If we were to update doubled in React, we’ll say setDoubled(count).

However, the JavaScript identifier $: tells Svelte that doubled is a variable that depends on count, and Svelte knows to automatically update doubled whenever count changes. For a more in-depth look at reactivity, check out Ovie Okeh’s article.

Svelte’s bundle.js file leaves a far smaller footprint than that of React. This makes a huge difference performance-wise, especially in low-powered devices or CPU-intensive applications. Svelte also has a smaller bundle size when gzipped.

Conclusion

The Svelte ecosystem is developing rapidly. With the introduction of Sapper, which is Svelte’s version of Next.js, and Svelte Native for building native mobile applications, Svelte is growing to become a stronger contender in the frontend tech space. Check it out, experiment, and build some blazing fast Svelte applications.

Full visibility into production React apps

Debugging React applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

LogRocket is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — .

Nefe James Nefe is a Frontend Developer who enjoys learning new things and sharing his knowledge with others.

Leave a Reply