6 Reasons why Frontend devs should consider Svelte for your next project

In a world where each month seems to bring a new javascript framework why should you care about Svelte is a question lot of people will have. We also had that question when we first discovered Svelte. Let’s look at the various things you can do with Svelte.

Svelte has been there for some time now and has come to major version 3 at the time of this writing. It has really evolved a lot over these years mainly improving the developer experience and focusing on simplicity.

Disclaimer

We are giving our opinion in this post and also we believe there is no silver bullet with respect to Javascript frameworks. So take this post with a grain of salt and if you like the javascript framework which you know, then you can use that as long as it gets the job done for you.

Reason 1 - Svelte is not a runtime framework

The top reason according to us where Svelte stands out is Svelte does most work during compile time rather than runtime frameworks like React

Most of the frontend framework seems to provide a layer of abstraction on top of javascript and runs in the browser which means you need to load the framework along with your app. Svelte says why do we need extra code, I will compile your code during development and give you the exact javascript needed for your app. That is the reason Svelte is regarded as a compiler time framework.

So in summary, after you do the Svelte build, you get an optimized javascript that you can run in the browser without any other dependency. Since we are removing the dependency, Svelte apps tend to be smaller to download for the browser than their counterparts which makes your app faster.

Reason 2 - Svelte State management

State management is a concept in which all frontend frameworks try to make their own approach to tackle that issue. In my opinion, Svelte makes it very easy for beginners to understand when it comes to state management. It is as simple as creating a variable and any change to that variable can be done by just assigning a new value. Svelte takes care of rendering that new state change to the browser.

let isOpen = false;

const toggleOpen = () => {
    isOpen = true;
}

That’s it even if you have used the variable multiple times on this page, Svelte handles the rendering and updating of the browser. This might seem like a small thing with this simple example but this will save a lot of time in complicated apps.

Reactivity seems to be very much inbuilt into the Svelte apps. You can make one variable depend on other variables and have both the update of the variable by just assigning a new value to the first variable

let number = 3;
$: squared = number * number

const changeNum = () => {
    number = 6;
}

This makes the other variable updated with the new value. This is an excellent feature as you can clearly define dependencies in your code and be sure that the state is always accurate instead of manually calling the function to update all dependencies.

Reason 3 - Svelte Stores

Svelte also has an inbuilt store for more complex state management solutions. Reactivity of the apps is taken to the next level with this store concept.

You can define a store in your application and then all the components which need these values can just subscribe very easily to these stores. Any update to the store easily gets updated in all the components which make it an ideal solution when you have lots of components and they are dependent on a single source of truth.

import {writable} from 'svelte/store';

export const notificationsCounter = writable(0);

Once you have defined your variable as writable in one file, you can then import that store variable into another file and update the variable or listen to the changes in the variable.

You can use the below code to keep your UI in sync with the store variable. Using the $ syntax lets Svelte know that it needs to subscribe and unsubscribe to the store variable.

<script lang="ts">
  import { notificationsCounter } from './store';

</script>

<main class="min-h-screen bg-gray-200">
  <div class="flex items-center justify-between bg-black text-white p-5">
    <p> Notification count - {$notificationsCounter} </p>
  </div>
</main>

This reduces the complexity of state management and is very convenient for smaller-scale applications which do not need very complex state management solutions.

For a more in-depth tutorial, you can view the following page

https://www.eternaldev.com/blog/introduction-to-svelte-stores/

Reason 4 - Svelte promises syntax

Developing a modern application usually involves a lot of API network calls and asynchronous programming to handle the loading and error state in the UI. What if, Svelte makes it easier for you to do this as well? Svelte provides a convenient syntax to show the different states of the asynchronous promise calls.

<script>
	const getRandomUser = async () => {
		var response = await fetch('https://randomuser.me/api/');
		var result = await response.json();
		return result;
	}
	
	let userPromise = getRandomUser();
</script>

<h1>Random User name</h1>

{#await userPromise}
	<h2>Loading....</h2>
{:then users}
	<h2>{users.results[0].name.first}</h2>
{:catch err}
	<h2>Error while loading the data</h2>
{/await}

We have the option to define their states in the await syntax to handle the loading, error, and success state.

UI for each of the states is neatly packed in HTML rather than making multiple javascript promise callbacks and tracking the loading state.

As developers, we might be lazy to implement the error and loading state for some API and this option might just be the answer. Still, developers like me are lazy and might not do even this :P

For more details tutorial, you can check this post - https://www.eternaldev.com/blog/how-to-make-an-api-call-in-svelte/

Reason 5 - Svelte transitions and animation

Animation in your User Interface gives polish to your app and provides good feedback for the user when they are performing any action. This can be daunting to implement when using Javascript frameworks, but Svelte has some convenient default animations to start with.

It is also really customizable to create user-defined transitions which are unique to your application

import { fade, fly } from 'svelte/transition';

<p in:fly="{{ y: 200, duration: 2000 }}" out:fade>
	<h1>Your awesome block </h1>
</p>

Svelte has in and out attributes that you can set which are played when the element comes in to view and goes out of view respectively.

We have a few inbuilt options for transitions to choose from. So we can import them from the svelte/transition and use them to add much-needed transition to your app.

Reason 6 - Svelte Performance and size

We have talked a lot about the different features of Svelte and all of that doesn’t matter if the performance takes a hit. The good news is that it doesn’t. Some of the veteran readers would have noticed that since there is no extra framework code to be downloaded by the user, your app code is smaller and loads faster.

Since we are going to ship only minified javascript after the build, the performance is usually very good and it is comparable to plain javascript performance in the browser.

If you are interested in learning more about Svelte from the basics, you can have a look at this free course

https://www.eternaldev.com/blog/svelte-basics-introduction-to-svelte

Drawbacks

Svelte does have some drawbacks which we have observed. These are some of the things which we have noticed while working with Svelte applications.

Package ecosystem

The main drawback right now is that the package ecosystem for Svelte is not as mature as the other popular frameworks like React, Angular, or Vue. This can be resolved over time depending on the adoption of Svelte by many developers but this is one of the things to consider if you are planning to shift your critical application to Svelte.

One more framework to learn

This depends on your preferences but for most people, it will be like learning one more new framework and a bunch of syntax to remember. We can overcome this by doing some small projects and prototypes which can be used for understanding the framework rather than producing production-ready code.

Have you tried Svelte or consider trying Svelte? Let us know in our Discord. You can also share your feedback about this post and we can have a discussion on the whole javascript ecosystem.