Svelte.js - Slender and Elegant

Is Svelte.js the future?

Svelte is another addition to the diverse options in the 'JavaScript Based Frameworks' pool. There are new frameworks in the market every week claiming to be the best. It's unrealistic to think that you can learn every new framework every other week or month, but Svelte is totally worth a try. Why? Let’s find out.

Why Stick To Run Time Update?

Popular frameworks like React & Vue have promoted the virtual DOM in such a way that every new framework is trying to use virtual DOM more efficiently. It is important to manage run time updates and if you are updating everything at run time then you are left with very few options & virtual DOM, in that case, is a very modest and elegant solution.

This is where Svelte changes the game. Svelte manages everything at compile-time and does not bother with run time updates. Svelte knows how the state of the component can change and generates the fewest possible steps to manage those changes at compile-time only.

How does it do that?

So managing updates at compile-time sounds great, but how does Svelte achieve that? Let’s dig deeper into that. 

First, we should discuss Reactivity in Svelte. By the way Svelte handles reactivity, it can be considered as truly reactive. 

The image above summarises reactivity in Svelte. If count is your state variable, then your state is now reactive. Re-assigning value to a variable using the assignment operator is all it takes to make Svelte reactive. Now let’s discuss how this reactivity causes Svelte to update the DOM.

Svelte marks this state variable as dirty & generates a function that updates this value in the real DOM whenever this state variable reacts (gets reassigned). This function is then embedded into a bundle output at the compile time & will be called whenever our state variable reacts. That’s all.

Smaller Bundle Size -> Fast Boot-up In Browser

What’s great about Svelte is its small bundle size. So you save more on memory & at the same time enjoy quick boot-up in the browser. Svelte is more of a compiler rather than a framework that converts all your framework code into plain javascript code at compile-time & you get a very small bundle size. Above that, the framework code of Svelte is also limited to only some lines of code. The main functions needed to boot-up framework reside in internal.js file in the Svelte.js package. Of those functions, only those functions will be imported which really contributes to application in the browser. No unnecessary function or data to burden your application.

Animation in Svelte provides a fabulous performance. Most of the animations in Svelte are achieved using CSS only, the use of javascript is avoided to a large extent, because CSS animations run off the main thread, your animations are more performant.

Say Hello To Embedded Applications

Although for now, using Svelte for large web applications is still under scrutiny. Using it for embedded applications seems quite promising. We are becoming more of the embedded application world as days are passing. We are almost ready for a great option for that embedded world in the form of Svelte.

Thanks for reading!