When to use Svelte?

#webdev #vue #svelte #podcast

Trying to keep up with web technologies is a daunting task. Having a passion for the industry is a must, especially when you are a host of the HTML All The Things Podcast.

When I first heard about Svelte I was curious, but also just starting to learn Vue.js. Taking on another framework wasn't a possibility so I put it on a list of interesting technologies to follow and left it at that. Now a year later, and a year more mature (both me and Svelte) I decided to give it a shot.

What is Svelte?

Vue.js, React.js, Angular are all frameworks that are meant for reactive web apps Svelte (Cybernetically enhanced web apps) is a compiler that solves a similar problem while remaining as simple, small and fast as possible
Svelte does not utilize a virtual DOM which means it manipulates standard html with standard js when it complies
This means there is no middle layer between the data manipulation and DOM manipulation
Its syntax is very similar to the other Reactive Component based frameworks, but even simpler and cleaner, essentially allowing you to do some of the same things with less lines of code
It's a bare bones package that can be extended either with your own code or with libraries built for svelte

I loved the simplicity!

It feels like Svelte is almost an extension of Vanilla JavaScript, a feature that ES7 or ES8 could at some point integrate. I know that is probably not going to happened, but it feels like Vanilla JS.

Just look at this:

<script>
    let title = "HTML All The Things";
    let num = 0;

    function iHave(){
        num++;
    }
</script>

<main>
    <h1>Checkout the {title} podcast</h1>

    <p>How many people have checked it out? <span>{num}</span></p>
    <div on:click="{iHave}">I Have!</div>
</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 900px;
        margin: 0 auto;
    }

    div {
        text-decoration: underline;
    }

    h1 {
        font-size: 4em;
        font-weight: 100;
    }
</style>

This code alone will create a dynamic widget that will show the variable title and allow the user to click on "I Have!" to up the num variable. It's a simple example but it shows the power and simplicity of Svelte.

Why Choose Svelte instead of the other Frameworks?

Just because Svelte is new and shiny doesn't mean it immediately replaces all the older more established frameworks
There is room for it in the market though, and it can be very beneficial for a lot of workflows
If package size is a serious consideration for your website, but you still need the reactivity that frameworks offer then Svelte is a very good choice
Designed to work on very low power/ low capacity devices (emerging markets)
If you're looking for something simple to dive into to understand reactive frameworks and get your head around DOM manipulation, Svelte could be a great stepping stone
Someone that wants to create their own infrastructure, i.e state management and router. Svelte gives you great tools and base to do that

When isn't a good time to use Svelte?

If you already have a framework in place like Vue or React, there is really no reason to switch to Svelte because it doesn't offer any features that those frameworks have out of the box
Larger teams that don't want to build every additional feature should look elsewhere, especially at Vue as they have great 1st party router and state management libraries
Svelte also doesn't have a mature plugin list, from a quick search I could only find basic routing and state management libraries and all other ones were a little to underused for my liking
Although Svelte is closer to vanilla JS then all the other frameworks it is still recommended to learn vanilla JS first so you have an understanding at what Svelte and all the other frameworks do under the hood

With all this being said, I believe there is absolutely a place for Svelte in our industry and I'll be following it closely as it matures and develops.

If you want to hear a more in-depth discussion on this, Matt Lawrence and I covered this topic in our latest HTML All The Things Podcast.

Top comments (2)

Mikhail Karan • Nov 2 '20

Hey Sorry getting back to this so late. I personally haven't felt any performance uplift from Vuejs, but it has been measured to have some. It'll very much depend on how much rendering is happening and how powerful your machine is. This is why I in the post I mentioned it might be a good idea to use svelte if you're building software for emerging markets as typically they have lower power devices.