Svelte: Yet another JavaScript framework

Introduction

Is it worth switching to Svelte? What is it about Svelte that some developers fall in love with it? Should you rewrite your apps to Svelte? That's what we'll be covering in this article.

As Svelte is slowly getting more attention, I want to answer some questions many developers have on their minds. It's easy to get caught up in the endless circle of JavaScript frameworks, where you switch from one framework to another every year or so. It's like with a new iPhone, we wish to know, is it worth switching, or have they just added a couple of small features? Let's take an honest look.

We will take a look at the Svelte syntax and compare it to Vue. We will be using TypeScript as our language of choice, since that is the most common way of working with JavaScript frameworks.

Another thing that I want to point out is that this article is not sponsored by anyone. I don't have experience with Svelte, but I have experience with React and Vue. You can consider this article to be an objective comparison rather than a sales pitch.

What is Svelte?

Svelte is a JavaScript framework, which serves as a transpiler, unlike Vue and React. Instead of using virtual DOM diffing, Svelte has done away with these technologies and built a purely functional JavaScript library instead. It does all this without requiring a server or using any non-free services. It takes away all the boilerplate required to create a component and simplifies the process.

Let's figure out what is a transpiler first, because many people confuse it with a compiler.

Tip. Transpiler is just a program that translates your source code from one language to another at the same level of abstraction. Some well-known transpiler you may know is TypeScript, which transpiles source code to JavaScript. The difference between a transpiler and a compiler is that a compiler converts source code to machine code, whereas a transpiler converts source code to source code of different language.

Svelte team uses this as a differentiating factor between themselves and other JavaScript frameworks, as they claim they don't force you to write your code in a specific way; instead, they allow you to write code the way you want. But, that's not entirely true. They provide you with a low-level API that allows you to work at a very low level and gives you a lot of control over how your app performs.

So, what is the point of using Svelte? I think the main point is simplicity. Just look at the counter example build in Svelte and Vue side to side:

We don't need to use template tags in Svelte, and we don't need to wrap the variable value in ref function, unlike in Vue. It's not a big difference though, but it exists. Notice the click event, the Vue implementation is much simpler.

Svelte in practice

For comparison, I've built 2 apps with TailwindCSS and TypeScript. One with Svelte and one with Vue. The app looks like this:

If you are interested, I have GitHub repositories with both implementations, here are links: Vue code, Svelte code.

All it does is just creating notes, deleting notes and editing notes by clicking on the note text. You can also complete notes, delete completed notes and delete all.

The thing that I've noticed is that both frameworks give you the same functionality, but writing the app with Svelte is a bit faster because you write less boilerplate code.

I like this shortcut in Svelte <Note {note} /> instead of <Note note={note} />, it is a small thing, but it makes the developer satisfaction even higher. In Vue we write it like this: <Note :note="note" />. A bit more code.

The other thing is computed properties, they are as simple as you think. Just look at this Vue example of computed property:

import { computed } from 'vue'

const activeClass = computed(() => notes.value.length > 0 ? 'bg-blue-500' : 'bg-gray-500')

Here is the same example with Svelte:

$: activeClass = notes.length > 0 ? 'bg-blue-500' : 'bg-gray-500'

It's astonishing, I love the Svelte computed properties. All these small syntactic sugar and added by Svelte makes the app more enjoyable to develop, and the user feel more satisfied by using it.

There is only one thing that I'm confused about Svelte, it's component props. I hope some brave soldier can explain me this in the comment section below. Take a look at the Notes.svelte component:

<script lang="ts">
    import type { Note as NoteType } from '../types'
    import Note from './Note.svelte'

    export let notes: NoteType[]

    function deleteNote(e: CustomEvent): void {
        notes = notes.filter((note) => note.id !== e.detail)
    }

    function saveNote(e: CustomEvent): void {
        notes = notes.map(note => {
            if (note.id === e.detail.id) {
                note.content = e.detail.content
            }

            return note
        })
    }
</script>

As you can see here, I'm modifying the notes prop directly in 2 functions and it works. I thought that props are read-only. If they are, why my code works without any warnings? I was confused because I've tried the same logic in the Note.svelte and it didn't work.

<script lang="ts">
    import type { Note } from '../types'
    import { createEventDispatcher } from 'svelte'

    const dispatch = createEventDispatcher()

    export let note: Note

    $: checkedNote = note.checked ? 'opacity-40' : ''

    let newContent = note.content

    function deleteNote(): void {
        dispatch('delete', note.id)
    }

    function saveNote(): void {
        if (newContent === '') {
            return
        }

        dispatch('save', {
            id: note.id,
            content: newContent,
        })
    }
</script>

I had to use a createEventDispatcher function to dispatch an event because if I modify a note prop, changes are not applied to a notes array. Maybe you can only modify array props and not objects? I don't know, it's strange, I hope someone will explain it to me because I sometimes get this weird behavior in Vue apps as well, even though Vue props are read-only, and child component cannot modify them.

Not really a feature

There is actually not much to say about Svelte in 2023. It is a tiny framework that is straightforward to understand and work with. I think that over time it will grow into something bigger and more captivating because it's nice to work with it.

The main reason why people like Svelte is because of its simplicity. You get this enjoyable syntax for writing HTML, you get simple reactivity built-in for you, and you get everything you need in one simple package.

But, after using it for a couple of projects, I realized it didn't really offer much except good syntax. People say the Svelte bundle size is small, but the Vue framework is less than 10 Kb itself. So, it's not really a selling point for Svelte right now.

Vue is also built on top of a transpiler engine, this is what Evan You said in one of his presentations:

Vue has been transitioning more and more towards a compiler-heavy beta framework. In the beginning we are very runtime-heavy, but as we introduce single file components, we notice that we are having more and more opportunities for a compile-time sync either syntax sugar or performance optimization.

Evan You (What's next for Vue? Evan You explains...)

By the "compiler", Evan actually means the transpiler, since it doesn't compile to any machine code directly, instead it produces a new source code language that a web browser can understand and can run.

If you are eager to learn about Vue and script setup, I have a great article for you called “Script setup is the future of Vue.js “. It's worth reading.

What should I use?

Vue and React are established frameworks that have a vibrant ecosystem and plenty of features that you can use right away. On the other hand, Svelte has a much simpler syntax. If that's what you care about, then you should definitely give it a try.

I'm not greatly concerned about that extra simplicity, script setup syntax in Vue is simple enough for anyone to understand. But, I will absolutely use Svelte occasionally for some small projects.

If you are a team lead or a project manager who is looking for a new framework to build a particular project, the Svelte might be the perfect fit for your requirements, you will not regret it. Svelte is the newest kid on the block, and it is still developing a community, so you don't have to worry about its future, I'm sure we will see it for use in many projects. Beware, the benefits of Svelte are limited compared to its competitors.

Conclusion

In conclusion, I would say that I love Svelte. For me, it looks simpler and nicer than Vue.js that I've been using for many years. The question is, whether I should use Vue or Svelte for a particular project? I would say, it depends.

When I'm writing Svelte, it is almost like writing Vue with different templating syntax (I'm not sure if I'm the only one who has this feeling). You don't get this feeling when you are writing React or Angular, and that's because they are both very different from Svelte.

All these Svelte features like scoped styles, lazy loading, reactivity, event modifiers, transitions, computed properties and dev tools were in Vue forever. Svelte is not a different animal, it's just a bit nicer way to write JavaScript apps. If you love Vue, you will love Svelte as well.

You might say, "Svelte is great because it's a transpiler", but it doesn't make much difference for 99% of the developers out there. Svelte is not the first JavaScript transpiler the world has seen. React and Vue also have their own transpilers that transform the framework code to native JS code before it runs in a browser.

Should you use it or not is up to you to decide, all I'm doing here is expressing my ideas after using JavaScript frameworks for a while. If I could leave you with only one thought, it would be this: You can write great JavaScript apps with any of these frameworks, you decide what to choose base on your requirements and preferences.

The hype should be the last thing you think about when selecting a tool for your work. It will serve you better if you pick the one that makes you more productive. If you have an opinion and want to share it with me and others, feel free to share it below in the comments section. I will be more than happy to hear from you.

Even a brief comment with 3 words will make my day!