All About Svelte, the Much-Loved, State-Driven Web Framework
Svelte is implemented as a compiler, written in TypeScript, and is designed to do as much of the work as it can at build time, rather than in the browser.
Originally created by Rich Harris,
Svelte, in common with many modern web frameworks, supports state-driven — as opposed to event-driven — user interfaces for web applications.
The challenge for browser-based applications that want to work this way is that DOM operations are too expensive to have every DOM object in memory and allocated in the way that the W3C DOM level two APIs prescribe.
To overcome this, both React and Vue use a virtual DOM. This approach works by re-rendering your entire application to the desired state in the virtual DOM for each state change, and then having the framework work out the minimum number of changes required to bring the browser’s actual DOM in line with that desired state.
The approach is more efficient than you might imagine, but the virtual DOM is nevertheless pure overhead, since all the operations performed on it, including diffing, are in addition to the operations performed on the real DOM.
The key to Svelte is that it eliminates the need for the virtual DOM.
To create a component in Svelte, you write your code in what is essentially an HTML file with a
.sveltefile extension, which the Svelte compiler then turns into an Abstract Syntax Tree, giving you a JavaScript class that you can import into your application.
Svelte delivers the initial state in the markup rather than as DOM objects so that it’s cheaper and loads faster. It then tracks changes to top-level component variables, directly updating only the affected parts of the DOM, rather than re-rendering the entire component.
One advantage of this approach, Mark Volkmann, partner and distinguished engineer at Object Computing and author of “Svelte and Saper in Action,” told The New Stack, is that “you’re more free to just reach into the actual DOM and modify it. In React, that’s a dangerous thing to do because the virtual DOM is just going to turn around in the next cycle and wipe out what you’ve done. But that’s not the case in Svelte.”
The approach taken by Svelte also leads to apps that are highly performant
Likewise the application bundles Svelte produces tend to be smaller than those produced by equivalent apps made using competing frameworks.
Svelte got similarly impressive results from the 2020 “real-world comparison of frontend frameworks” by Jacek Schae, where it was among the top performers.
This combination of performance advantage and smaller size means that you can build more ambitious web applications, and also makes Svelte a good option for targeting lower-powered devices such as smart TVs, smartwatches, and Point of Sale systems.
the biggest draw is developer experience,” Volkmann said.
“It mainly centers around, I would say, three things,” he said. “One is the reactivity aspect. When I’m implementing a component in React that needs to have some state, I might use the useState hook, and then I get access to a variable and I get a set function, and now it’s up to me to call that set function when I want to change it.
“In Svelte, though, it’s just a variable, I just set the variable to a new value,” Volkmann added. “And if that variable is being used to produce the HTML, then it’s going to re-render correctly and I have no more to think about.
“Number two, I can have reactive statements that re-execute when they need to. And number three, is the whole topic of stores.”
Stores hold application state outside any component, Volkmann said. Each store holds a single JavaScript value, but the value can be an array or an object, which of course can hold many values. Every store has a subscribe method that returns a function you can call to unsubscribe.
The built-in support for stores eliminates the need for state-management libraries common in other frameworks, such as @ngrx/store in Angular, Redux in React, and Vuex for Vue.