What is Svelte? New Frontend Framework in 2020

I know what you are thinking! “One more frontend framework to learn???”

Yes! Svelte is the hot new frontend framework that has become the talk of the town among web developers. In the recent State of JS survey of 2019, it has been predicted to be the up-and-coming technology that may take over other frameworks like React and Vue in the next decade.

In this post, we are going to explore Svelte and checkout some code snippets to understand how it works.

What is Svelte

Svelte is a component framework similar to React and Vue. What is different in Svelte?

Svelte converts your app into ideal JavaScript at build time, rather than interpreting your application code at run time.

You can decide to build your entire app with Svelte, or add it slowly and incrementally to your code. With Svelte you can also ship components as a standalone package, which seems to be an interesting approach.

Key Features

Here are some of the key features of Svelte, and also the key differences from other frameworks.

No Virtual DOM

In React and Vue we use the Virtual DOM. There is an elaborate post we wrote earlier explaining Virtual DOM that you can checkout to understand how the Virtual DOM works. Svelte does not use the virtual DOM concept, and instead shifts the work into a compile step that happens when you build your app.

With Svelte the code is compiled into small framework-free vanilla JavaScript code. It is guaranteed to be smaller, and faster and does not require the use of a Virtual DOM.

Less Code

Who doesn’t like writing less code. The lesser the code, the lesser the bugs. I am not talking about cramming all your code into unreadable chunks of code. I am talking about writing less code, without hampering readability. Svelte was created with a goal to reduce the amount of code that developers write. With other modern frontend frameworks, there is quite a bit of boilerplate code that comes with it.

Let’s look at an example to see how Svelte compares with React. Let’s look at an example to update local component state using React and Svelte.

React

// Update state in React
const [count, setCount] = useState(0);

function increment() {
  setCount(count + 1);
}

Svelte

// Update state in Svelte

let count = 0;

function increment() {
  count += 1;
}

You can see how a lot of code has been cut out in Svelte.

In React, we would either have to use the useState hook, or set state using setState. Whereas in Svelte, this got drastically simplified. You can update the state with the assignment operator directly.

This aspect of writing less code using Svelte is highly appealing to me. I am sure this is one of the top reasons for the increased interest in this new framework.

No Complex State management libraries

Managing state in an application is one of the hardest problems to solve. Svelte aims to go away from the trend of using complex state management libraries like Redux. To understand this concept better, you can watch this youtube video by Rich Harris, the founder of Svelte. Here he talks about rethinking reactivity in frontend frameworks. This video will give you a good start to understand Svelte.

Sample Svelte Code Snippets

I recently came across Svelte, and have been reading up and exploring their code snippets. The first thing that comes to my mind is “Wow, this is so simple”. The code written with Svelte, looks super simple and easy to grasp. I am sure new developers would find the learning curve much lesser while learning this framework versus some of the other existing frameworks.

Let’s look at some code snippets to get a feel for Svelte.

All the code is written within the _

#svelte #javascript #web-development