React vs. Svelte: What's the Big Difference?

As graduation day from coding bootcamp draws nearer and nearer, I have begun to look around for additional frameworks and other tech to add to my knowledge base. Most of my experience during bootcamp has relied on utilizing React, and now that I have had a fair amount of practice with it, I'm eager to see how it compares with other frameworks. One name that seems to be abuzz is Svelte. Although it is relatively new (born November 2016), Svelte appears to have a great reputation and high developer satisfaction rates.

Upon first look, both React and Svelte are component-based, so React developers should be very familiar with how things are grouped and the concept of importing files where needed. One thing to note is that the syntax may take a little bit of adjustment time for a new coder, but overall seems pretty easily understandable. Because the styling is also done in the components, the risk of side effects is low as style changes made to one component do not affect its parent or children.

In the example below, you can see the familiarity of the syntax. The content between the <script> tags can be compared to React's constructor method, and the content between the <main> tags can be compared to React's render method. The <style> has its own separate tag in Svelte. The click handlers also closely resemble the onClick in React, but you'll notice the formulation of the concatenated string is denoted by $: rather than declared another const.

<script>
    const firstName = ‘Bugs’;
    const lastName = ‘Bunny’;
    let snack = ‘carrot’;

    $: fullName = `${firstName} ${lastName}`;

    const handleClick = () => snack = ‘cookie’;
</script>

<main>
    <h1>Hello {fullName}!</h1>
    <p on:click={handleClick}>Would you like a {snack}?</p>
</main>

<style>
    h1 {
        color:#ff3e00;
        text-transform: uppercase;
        font-size: 3em;
        font-weight: 200;
    }
</style>

What's the difference?

React is fast, but Svelte is faster. One main difference between Svelte and React is that Svelte is a compiler, while React uses the Virtual DOM to compile the code.

Svelte turns the application into vanilla JavaScript during build time before updating the DOM (the real DOM). On the other hand, React updates the DOM by use of diffing. Diffing is the process of comparing the previous version of the render (the real DOM) with the latest updates to the Virtual DOM. Once the browser has compared the real DOM and the Virtual DOM, it updates the user interface with the differences it found. Because Svelte does not use the Virtual DOM, that is one less step that has to run before a change is reflected in the browser. For a visual representation, see the image below.

A deterrent for young coders may be that because Svelte is still relatively new, the community is much smaller than React's. This means that if you get stuck and you are looking for scenarios that may be similar to what you are experiencing, there are a lot less resources out there currently to serve as guidance.

But that shouldn't stop you from giving Svelte a try.

There's no harm in toying around with new tech. Svelte may be young but it is becoming increasingly popular, so go ahead and get your hands qwerty.

Sources:

https://www.simform.com/react-vs-svelte/
https://svelte.dev/
https://reactjs.org/