Cat's opinion on Svelte vs. React

Written by Meowing Cat on 6/5/2024, 9:38:00 PM

What does the cat think about Svelte and React? Which one is better?

Hewwooo, Cat is here again with a new blog post! Today, I’m going to talk about Svelte and React. I’ve been using both of them for a while now, and I have some opinions to share. Let’s get started!

Introduction

Damn framework hell... right? You feel very annoyed and frustated by them. But don't worry cat is here to help you! 😇 🐈

Cat’s opinion on all of the reactive web frameworks

The reactive web frameworks actually have a great architecture and design to make it easier and even possible (for usual less skilled developers) to make complicated web apps with an amazing robustness level.

But, there is a problem! Programmability!

Programmability and the reactive web frameworks

Reactive web frameworks are so far from what developers think and design in their minds. Because their programmatic approach is so different than the usual programming languages and paradigms.

For example, you are a developer who is using a reactive web framework for the first time. You are trying to make a simple to-do list app, you probably will write tons of ugly and shit code that are so far from how they should be in terms of what the framework that you are using follows as programming paradigms.

Reactive frameworks’ paradigms and browser capabilities, how they are together?

This topic is another thing to consider while reviewing all of this stuff.

For example, React has a great design make you able to easily implement very complicated and also fully dynamic web apps but for this “complexity” or “feature-rich”ness you’ll obviously need browser APIs or what and how web browsers provide you for user interactions and communications.

React has amazing paradigms, approaches, designs in its own however, it doesn’t have enough abstractions for interacting with the browser APIs and capabilities.

Ofc, it is still possible to write amazingly dynamic and robust apps easily with React but this stuff causes ugly and problematic hell codes in hands of unskilled developers, unfortunately.

---

However, do not forget that Svelte and React can be amazingly useful when you use it in their fully correct ways.

How everything started?

Web development has always been a challenge for developers because there are some main reasons:

• Web development (actually what browsers provide us to program) is the most capable platform to develop user interfaces.
• This first reason causes a big competition with someone’s great looking UIs.
• Everyone wants to have a great looking UI, but it’s hard to achieve that with the current tools actually which the web standards provide out-of-the-box.
• So, developers started to create their own tools to make it easier to create great looking UIs.

As you can see, the main reason for the creation of these tools is to make it easier to create great looking UIs. But, the question is, which one is better? Let’s find out!

Reactivity? What’s that?

Making complicated user interfaces (UI) to provide an amazing user experience (UX) with tons of interactions is a hard job. You need to keep track of the state of your application and update the UI accordingly. This is where reactivity comes into play.

Reactivity is the ability of a system to react to changes in its state. In the context of web development, it means that when the state of your application changes, the UI should automatically update to reflect those changes.

Both Svelte and React provide reactivity out of the box, but they do it in different ways.

Normally, with the web standards (HTML, CSS, and JavaScript), you need to manually update the DOM whenever the state of your application changes.

For example, you are making a Discord-like chat application… You made a WebSocket connection to the server and you are receiving messages from the server.

Every time you receive a new message, you add a new message to the chat window’s chat list section; it is kinda “preaparing a div element with the message and appending it to the chat list”.

Imagine something like this, every time you receive a new message, you create this element structure and append it to the chat list.

- div.message
    - div.message_row
        - div.message_avatar
            - img.message_avatar_img
        - div.message_content
            - div.message_content_header
                - span.message_content_username
                - span.message_content_timestamp
            - div.message_content_body
                - p.message_content_text

This is a simple message structure, but you need to create this structure every time you receive a new message but… still simple!

Then, where are the problems starting at? The problems start when a chat participant deletes a message, edits a message, or pins a message. You need to update the message structure every time the message changes. Actually, still simple but not for usual developers! It’s a bit hard to manage this kind of stuff. You can’t expect a random cheap developer to manage this kind of stuff.

Reactivity and reactive web frameworks are here to help you with this kind of stuff. They are managing the DOM updates for you. You just need to update the state of your application, and the framework will take care of updating the UI.

React

React is the most popular front-end library for building user interfaces. It was created by Facebook and is used by many companies, including Netflix, Airbnb, and Instagram.

React uses a virtual DOM to update the UI efficiently. When the state of your application changes, React compares the new virtual DOM with the old one and only updates the parts of the real DOM that have changed.

React is based on the concept of components. A component is a reusable piece of UI that can have its own state and props. Components can be composed together to create complex UIs.

React uses JSX and Cat loves JSX and pawing it so much 🐈 🐾 but, what is the JSX?

JSX

Simply, JSX is a HTML in JavaScript thingy. You can write HTML-like syntax in your JavaScript code with JSX. It makes your code more readable and maintainable.

function App() {
    return <div>
        <h1>Hello, Cat!</h1>
        <p>How are you?</p>
    </div>
}

Simple, right?

React uses JSX so Cat loves it so much! 🐈 🐾

React Components

React components have two main types/approaches: Class Components and Hooks / Functional Components.

Class Components

Class components are the older way of creating components in React. They are ES6 classes that extend the React.Component class.

Oki, let’s create a simple class component!

class Cat extends React.Component {
    constructor({name, age}) {
        super();

        this.name = name;
        this.age = age;
    }

    render() {
        return <div>
            <h1>{this.name}</h1>
            <p>Age: {this.age}</p>
        </div>
    }
}

function App() {
    return <div>
        <Cat name="Meowing Cat" age={32} />
        <Cat name="Purring Cat" age={20} />
    </div>
}

Simple, right? You can create a class component like this.

Cat… I hear about “React Hooks” everywhere! What are they?

You can’t find deep and true information about things after a point around but Cat is here to help you with this kind of stuff! 🐈 🐾

React Hooks are a newer way of creating components in React and they are not “better” than class components if that’s what you hear around. They are just a different way of creating components.

🧑🏻‍🦱 Oh.. Cat, but people are saying that “React Hooks are better than class components”!

🐈 Not really… Let me explain!

Actually, React Hooks are another thing that’s like all of this web frameworks and their concepts and why they are made…

Making unskilled developers to be able to make something with less pain and problems as much as possible!

A react component with hooks is like this:

function Cat({name, age}) {
    return <div>
        <h1>{name}</h1>
        <p>Age: {age}</p>
    </div>
}

function App() {
    const [cats, setCats] = useState([
        {name: "Meowing Cat", age: 32},
        {name: "Purring Cat", age: 20}
    ]);

    return <div>
        {cats.map(cat => <Cat name={cat.name} age={cat.age} />)}

        <button
            onClick={event => setCats([...cats, {
                name: `Cat ${cats.length + 1}`, age: Math.floor(Math.random() * 100)
            })}
        >
            Add Cat
        </button>
    </div>
}

What about damn cute JSX? Cat loves it! 🐈 🐾 Look at this cute line:

return <div>
    {cats.map(cat => <Cat name={cat.name} age={cat.age} />)}
</div>

JSX is so cute! 🐈 🐾

But as you can see, there is an ugly thingy here… The useState hook! It’s a bit ugly and problematic for new developers.

React needs you to use the state setters and give them a completely new array or object to update the state. This is a bit problematic.

<button
    onClick={event => setCats([...cats, {
        name: `Cat ${cats.length + 1}`, age: Math.floor(Math.random() * 100)
    }]}
>
    Add Cat
</button>

Here we are using setCats() the state setter method for cats; we are giving a completely new array to update the state with using ES6’s spread syntax.

Let’s assume you have this cats state array. useState(default_value) returns an array with two elements. The first element is the state itself and the second element is the state setter method.

const [cats, setCats] = useState([
    {name: "Meowing Cat", age: 32},
    {name: "Purring Cat", age: 20}
]);

Then, you can update the state cats array like this:

<button
    onClick={event => setCats([...cats, {
        name: `Cat ${cats.length + 1}`, age: Math.floor(Math.random() * 100)
    }]}
>

The spread syntax is [...cats, {name: 'Cat ' + (cats.length + 1), age: 25)}]. As you can see, we are giving a completely new array to update the state, that’s what ES6’s spread syntax does.

🧑🏻‍🦱 Oh… Cat! Isn’t this a bad thing for efficiency and performance?

🐈 Not really… But a bit. Also, React does great about re-rendering. For the object items of the array/object that’s being spreaded, they are pass-by-reference but for JS strings, they are not. Because JS strings are immutable. But you don’t need to worry about this stuff unless you are making a very complicated and heavy app.

For this kind of stuff, React has a lot of third-party state management libraries like Redux, MobX, Recoil, etc. But, Cat doesn’t recommend them to you.

Let’s keep going… Now let’s talk about Svelte! but don’t worry, We’ll compare them!

Svelte

Svelte is a newer front-end framework that was created by Rich Harris a ginger orange hooman.

Svelte is very different than the others. It has a compilation/compile-time approach for things and like the JSX, it has kinda its own JS superset called Svelte (.svelte).

Svelte compiles your components to vanilla JavaScript at build time. This changes everything! The rest of things built on this approach have a lot of more advantages and potential for everything! That’s why Cat loves Svelte over React! 🐈 🐾

Svelte Components

Svelte components are written in a .svelte files and they have completely different concepts and syntax than React components.

Oki, let’s create a simple Svelte component!

The Svelte Component src/cat.svelte

<script>
    export let name;
    export let age;
</script>

<div>
    <h1>{name}</h1>
    <p>Age: {age}</p>
</div>

The main page src/components/+page.svelte

<script>
    import Cat from './cat.svelte';

    let cats = [
        {name: "Meowing Cat", age: 32},
        {name: "Purring Cat", age: 20}
    ];
</script>

<div>
    {#each cats as cat}
        <Cat name={cat.name} age={cat.age} />
    {/each}

    <button on:click={() => cats = [...cats, {
        name: `Cat ${cats.length + 1}`, age: Math.floor(Math.random() * 100)
    }]}>
        Add Cat
    </button>
</div>

Slight Comparison

In very short, Svelte is a lot more easier to use and understand than React. It has a lot of advantages over React but React has JSX and it’s a bit more popular than Svelte.

React with JSX’ cuteness is really good but Svelte is not “worse” about this. Svelte has its own syntax and it’s really good and easy to use.

Popularity

React is more popular than Svelte. But, Svelte is getting more popular day by day. Svelte is a lot more easier to use and understand than React. It has a lot of advantages over React.

Syntax

Svelte has its own syntax and it’s really good and easy to use. React has JSX and it’s really good and easy to use too. But, Svelte is a bit more easier to use and understand than React.

Conditions and iterating things to render on Svelte and React

Svelte is better than React when it comes to iterating things to render.

Svelte has a built-in #each, #if, and #await blocks for iterating things to render.

React’s way is different, JSX can render HTML elements from JSX expressions or JS/TS arrays or objects. But, it’s a bit harder to use and understand than Svelte.

React/JSX

Conditions to render on React/JSX

A condition looks like this:

function App() {
    const isLoggedIn = true;

    return <div>
        {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in!</p>}
    </div>
}

Iterating things to render on React/JSX

Iterating things to render looks like this:

function App() {
    const cats = [
        {name: "Meowing Cat", age: 32},
        {name: "Purring Cat", age: 20}
    ];

    return <div>
        {cats.map(cat => <div>
            <h1>{cat.name}</h1>
            <p>Age: {cat.age}</p>
        </div>)}
    </div>
}

Here, both of {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in!</p>} and {cats.map(cat => <div>...</div>)} are JS/TS objects that are supposed to be rendered.

Svelte

Svelte has a built-in #each block for iterating things to render. It’s a lot more easier to use and understand than React.

Conditions to render on Svelte

A condition looks like this:

<script>
    let number = 0;
</script>

{#if number % 2 === 0}
    <p>{number} is Even</p>
{:else}
    <p>{number} is Odd</p>
{/if}

<button on:click={() => number += 1}>Increment</button>

Learning Curve

Yes, yes… Svelte has an easier learning curve than React. But also I think that Svelte does a better job about forcing you to write better code than React.

Performance

Svelte is way way better when it comes to efficiency and performance. It compiles your components to vanilla JavaScript at build time which means that Svelte has way more capabilities and potential than React for efficiency; it is expected! 🐈 🐾

What about which is more bloated?

React is more bloated than Svelte. React has a lot of more thirdparty libraries and tools than Svelte. Svelte implements a lot of things in its core and it’s a lot more easier to use and understand than React.

Conclusion

I think, right now, although Svelte is better, React is still more popular than Svelte and Svelte is still shaping itself. Actually, React too is still doing that.

But in overall, Cat recommends you to use Svelte/SvelteKit instead of React/Next.js for your next project. Svelte is way more efficient and easier to use than React.

---

That’s all for today! I hope you enjoyed this article. If you have any questions or comments, feel free to ask! You can reach me on the GDBFrontend Discord. Cat is always here to help you! 🐈 🐾

Happy code pawing! 🐾