Have you ever opened your React project, did setState, and found that the components are not updated according to schedule but seem to be updated randomly? Or, when you’re using Vue, the reactivity system renders only those triggered chunks of data. Unfortunately, it often makes mistakes during data reading, requiring data to be flattened. With Svelte, you need to perform to complete the update, and it will render the update.

Svelte is a revolutionary new approach to user interface development. Other frameworks such as React and Vue do most of their work in the browser, but Svelte moves that work into a compile step when you build your app. Svelte has been around since 2016 but has recently become more popular since the V3 release. Reactivity has moved into the language. Instead of using functional code to update the page, It’s easier to understand as they made a literal code like / make the page react and update.

Here are some of the new features of Svelte V3:

• Components are accessible to understand: the coding process is much simpler. Simple Out-Of-The-Box Global State Management: you don’t need to be concerned about memory leaks.
• Built-in Accessibility Components Easy to Understand: the coding and designing process is much easier, and projects run more smoothly.
• Concise Code and Light Files: a code-splitting feature that helps apps load faster.
• Responsiveness and Unused CSS Checks: makes minor corrections during the process and ensures fewer potential bugs in the files. 

Compared to Vue and React, Svelte is much superior. It’s more a compiler than a framework because it doesn’t load the whole app; instead, each request runs the compiler on the server, generates a page, and sends it to the client. Also, there is no up-front cost of loading the entire JavaScript before the first page loads. Svelte delivers only the parts that you need in time.

How to Install and Run Svelte

You can refer to their tutorial to learn how to use Svelte from zero.

Svelte vs Vue and React

Building the above in React would probably look something like this:

While building it in Vue would look like this:

Meanwhile, building it in Svelte is much more straightforward.

That is undoubtedly much simpler. So, here’s a comparison of their performance.

Startup metrics (lighthouse with mobile simulation)

Memory allocation in MBs ± 95% confidence interval

We can see that Svelte is the clear winner regarding time to interaction and total bundle size.

As we can see in the memory utilization graph, svelte has the best score. From that code and tests, we can conclude that Svelte has less code written and performs better than other frameworks. However, Svelte isn’t entirely perfect. Let’s have a look at the advantages and disadvantages of using Svelte.

Advantages of Svelte

Minimal Learning Curve

One of Svelte’s main points is that it is effortless to learn. You write the components with the usual HTML, CSS, and JavaScript. And they provide a complete course tutorial to help us understand its basics and functions.

Speed of Execution

Svelte is a compiler where your Svelte components are converted into vanilla JavaScript code during the build process. It will make the browser run the code faster.

Component-based App Development

Same with other frameworks like Vue and React, Svelte is also built with the reusable components process.

Can Build an Entire App or Use it Incrementally

You can add parts of your application to an existing project or create all from scratch using Svelte, just like Vue.js.

Scoped Styling Out-of-the-box

CSS leaking? No more! With scoped styling, you can make your component beautiful without worrying it will affect the other features.

Batteries Included

Svelte brings so many tools from its package. Some of them are State management, server-side rendering, templating, plugin system, and animations.

A Growing Community

The Svelte community is already multiplying. You can hop into discussions about Svelte on Discord, and there is over 1,000 question asked about it on StackOverflow.

Disadvantages of Svelte

No Significant Backing

Svelte doesn’t have a large company to back them up (yet), whereas Google backs up Vue.js and Angular, and Facebook backs up to react. That makes it still low in popularity among developers and also companies.

Tooling and Packages Support

There are currently limited developer tools and packages. But this problem will fade out as the community grows.

Conclusion

The benefits outweigh the disadvantages when we look at the Svelte framework, and it is also simpler than Vue and React. Svelte isn’t the perfect solution to every difficulty you can have as a developer (nothing is), but it does have a lot to offer and a few bells and whistles that others don’t, such as built-in animations.

Author: Rizky Anas Bukhori, Software Engineer