All About Svelte, the Much-Loved, State-Driven Web Framework – InApps 2022

The latest Stack Overflow developer survey revealed that, amongst those surveyed, the most-loved web framework is Svelte, a relatively young, open source web user interface framework for defining a web interface with components.

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, who worked at the Guardian and is currently a graphics editor at The New York Times, the framework is being used by a range of companies — the Svelte.dev website lists The New York Times, unsurprisingly, alongside Square, IBM and Chess.com, amongst others.

A bit of judicious searching on Twitter suggests that both Apple and Spotify are also using the framework to some degree.

Hey @sveltejs , thanks for showing all the love , we were able to hire a great engineer. We have another position for a svelte engineer, must be onsite in Bay Area , no remote. Hit me up in DM if interested /cc @sveltejobs #sveltejs https://t.co/5CP03pmjcc

— Mansur Ashraf (@mansur_ashraf) January 31, 2020

yeah, Svelte powers the header and footer on a lot of Spotify pages!

— Svelte (@sveltejs) December 6, 2019

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.

There are a variety of ways developers can manually optimize this — for example, using methods such as shouldComponentUpdate to let React know if a component’s output is not affected by the current change in state or props — but the situation is clearly not ideal.

Advantages of Svelte

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 .svelte file 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 InApps, 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, as can be seen for example by looking at software developer Stefan Krause’s benchmarks. This test renders a table with four columns and 1000 rows. You can select which frameworks to use. In the table below, I’ve chosen svelte-v3.42.1, vue-v3.2.1, angular-v12.0.1, and react-v17.0.1.

Svelte got similarly impressive results from the 2020 “real-world comparison of frontend frameworks” by Jacek Schae, where it was among the top performers.

Likewise the application bundles Svelte produces tend to be smaller than those produced by equivalent apps made using competing frameworks. The same 2020 real-world comparison article shows Svelte producing the smallest file download size — the reported gzipped app size for some of the popular frameworks were:

• React + Redux 193
• Angular 141.2
• Vue 71
• Svelte 15

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.

Speaking at the 2019 You Gotta Love Frontend code camp, Harris cited Stone, a Brazilian company that makes Point of Sale terminals for credit cards:

“They tried building the interface for these with React and Vue and a panoply of other frameworks and they just couldn’t get the results they wanted, it was just too slow. They built it using Svelte instead and it worked really well. There are 200,000 of these devices on the streets of Brazil running Svelte.”

Svelte applications also typically require fewer lines of code to implement. Whilst lines of code is a terrible metric for measuring developer productivity, it is nevertheless the case, Harris argues, that projects with fewer lines of code tend to have fewer bugs: provided the code itself is readable. That same frontend comparison benchmark gives:

• React + Redux 2050
• Angular 2145
• Vue 2076
• Svelte 1057

But what is it that makes Svelte devotees love the framework? “For me, 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.

Tooling

As .svelte files are very similar to .HTML files, you can associate the .svelte extension with HTML in your text editor of choice and get basic syntax highlighting that way.

There is also a Svelte extension for VS Code, which includes syntax highlighting, autocomplete and linting. The VS Code extension is powered by Svelte Language Tools, an open source library implementing the Language Server Protocol (LSP), which can be used to add support to a number of other IDEs.

In addition, IDE vendor JetBrains has a Svelte extension that supports its family of products, including Intellij IDEA and WebStorm.

Use Cases and Limitations

Svelte is a compiler for building web UI components, but it isn’t a complete solution for building web applications and lacks things such as server-side rendering, routing, and code-splitting for JS and CSS.

“My perception is that both Svelte and Vue are favored for lighter things, things that feel more like websites with components, or websites with some lightweight app stuff,” Dylan Schiemann, CEO of Living Spec and creator of the Dojo framework, told InApps.

“But if you’re going to build an app like Living Spec, you’re probably going to choose a fuller framework because there’s more done for you automatically, even if using Svelte might be better from an architectural perspective,” he added. “I haven’t seen the next Gmail built with Svelte yet, for instance. Maybe it’s been done, but I haven’t seen it.”

Sapper, an application framework that has been built on top of Svelte, is the current logical way to get more features, but it hasn’t, and will now never, reach 1.0 status since it has been superseded by SvelteKit, also currently in a public beta.

SvelteKit itself is exciting, promising to add adapters for different serverless platforms, alongside support for Vite under the hood, which provides quick startup, simple caching for JavaScript and CSS, and instant hot module reloading. Volkmann believes it is already mature but, until its official release, Svelte might not be the best choice for complex applications.

It should also be noted that there is a potential performance trade-off in the approach Svelte takes. While the initial overhead is lower than that of a traditional JavaScript framework, the incremental cost of adding more components to a Svelte application is generally higher — so, in other words, you will ultimately reach an inflection point where the Svelte application is larger than using a conventional framework.

In truth, however, this is likely more of a theoretical risk than a real one. An analysis by a self-proclaimed “cowboy coder” who goes by the name Acmion concluded that “the inflection point between Svelte and React lies at approximately 137 KB of component source code, after which the initial download of a gzipped Svelte application will be higher than that of a gzipped React application. For uncompressed applications, the inflection point is at about 178 KB.”

Another potential issue is that, as a relatively young framework, Svelte has fewer pre-built component libraries than some of its more mature competitors.

“React has a huge amount of high-quality stuff you can just import and use that isn’t yet there for Svelte,” Schiemann said. That said, there are more components being built out all the time, including an implementation of Material UI.

Finally, should your application need to support Internet Explorer, Svelte is not a particularly good choice. Polyfills are required to run Svelte apps in Internet Explorer 11, and Svelte apps are unlikely to run in previous versions of the browser. If you do need to support IE, Volkmann’s blog provides detailed instructions.

Learning Svelte

If you want to learn more about Svelte, a good place to start is the official tutorial, which offers an interactive walkthrough of how to build a component. Harris has also done a training course for Frontend Masters, and Volkmann’s book ”Svelte and Sapper in Action” is available from Manning.

Image via Wikipedia.