What is Svelte? New Frontend Framework in 2020

[Nubelle]

Svelte is the hot new front-end 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.

What is different in Svelte?

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

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.

Reference

[root]

awesome thanks bro

[Kalana]

Thanks brother

[dev_lak]

thanks bro