Is Svelte.js the future?
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
Animations in Svelte
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!