Svelte and Svelte-kit — reasons to move to Svelte

Svelte is the latest approach to front-end web development. It is a JavaScript framework that compiles the code into tiny vanilla JavaScript code, unlike most other frameworks or libraries in JavaScript. Svelte-kit is a package used to build the Svelte code, to make the code production ready. To begin with Svelte, all you need is basic knowledge of JavaScript.

Performance:

Frameworks like React and VueJS work on the browser. The code, however optimised is loaded on the browser and the overhead is on the browser. But in Svelte, the compiled code is loaded on to the browser and the overhead on the browser is much lesser.

React conducts a diff on thew DOM to see which component or element needs update and updates that element/component. Svelte, on the other hand, surgically injects the update into the DOM. Hence, the UI experience feels much faster and smoother when compared to React. The WebApp built is lightweight and the performance is higher.

Learning and getting started:

Looking at Svelte as a developer, it is easy to get started with Svelte. As I already mentioned, you can get started with just a basic knowledge in vanilla JavaScript. Also you don’t need to spend much time re-learning concepts when moving from React. Just like React, all you need is a basic package and you can build as you go on with the project.

Integrating with current projects:

There are multiple adapters to integrate the code to other, already present code of frameworks and libraries like NodeJS, NextJS etc. These adapters allow you to build the code according to the code already present and used in the current projects. The compiled code is optimised according to the needs of the framework or library used in the project, along with the environment the final code runs in. The node-adapter package, for example, gives you a middleware function to use the Svelte app with already-present Node server. Hence, integrating Svelte with already present projects is not at all troublesome!

Simplicity:

The number of lines of code, when using Svelte is significantly lesser when compared with the React code for the same project. This automatically means lesser lines of code that are prone to be buggy. Also, the code written is very readable.

All in all, I would totally recommend Svelte, if you are looking for a new project to begin. Also, in the next post, I would love to write about the various renderings in Svelte and how to get started with it!