What Is Svelte?

Svelte is a Javascript component framework, created by Rich Harris in 2016. Similar to frameworks like React and Vue, Svelte is a reactive framework, with a key difference: rather than using a “Virtual DOM” to drive reactivity, Svelte uses a compiler to produce lean and efficient Javascript. In other words, rather than doing the heavy lifting in the browser at runtime, Svelte does it ahead of time, in the build phase.

While Svelte is relatively new and lesser known, it is starting to gain significant traction in the Javascript community. It touts performance and simplicity, and features first-rate documentation and tutorials. It’s community and ecosystem are growing rapidly.

Reactivity

What do we mean when we say a framwork is “reactive”? In a nutshell, “reactive” means when a value is updated, the application automatically refreshes UI elements bound to that value.

For example, with the following variable and div:

Simple Reactivity

var myName = 'Frank';

<div>Frank</div>

Reactive programming means you don’t have to write “glue” to keep them syncronized. Updating the variable updates the div.

This becomes really powerful (and potentially expensive) when values (“bindings”) are chained together. Consider the following pseudocode:

Reactive Pseudocode

Name: Frank
IntroSentence: My Name is <Name>
Paragraph: <IntroSentence>.  How are you?   

In it’s current form, the “Paragraph” would read:

Pseudo Binding Rendering

My Name is Frank.  How are you?   

In a Reactive world, we can change “Name” variable to “Harry”, and expect the following paragraph:

Pseudo Derived Binding Rendering

My Name is Harry.  How are you?   

Virtual DOM

In the popular reactive frameworks (eg, React & Vue), all this magic happens in the browser, using a technique called the Virtual DOM. Browser-based Javascript utilizes the DOM (Document Object Model) to represent the structure of the HTML. The Virtual DOM is a “shadow” copy of the DOM, stored in memory. When changes to variables/state occur, the changes are immediately applied to the Virtual DOM. Then, periodically, the changes in Virtual DOM are pushed to the actual DOM. While this is a powerful (and usually performant) approach, there are a few drawbacks:

1. The size of the framework - both React and Vue require a download of their runtime javascript packages to the browser. These can grow relatively large, especially over slower internet connections.
2. In some situations (bigger apps or misuse of code), the Virtual DOM approach can encounter significant performance issues. This can range from slightly annoying, to largely impactful.

Svelte Compilation

Svelte approaches this reactive problem from a different angle. Rather than downloading a runtime, and performing the “reactivity” within the browser, Svelte uses compilation at build time. The Svelte compiler inspects your code, and builds the necessary logic in “vanilla” javascript, before it is downloaded to your browser. The result is a smaller download, simpler javascript (compatible with all browsers), and (usually) better performance and responsiveness within the browser runtime.

Current State of Svelte

Svelte is currently on version 3. Versions 1 and 2 were essentially proof of concepts, with the intent of testing whether a compilation-based approach worked better. Version 3 is touted as “significant overhaul”, with a mature developer experience. With it’s growth comes more tools, auxiliary frameworks, documentation, and a community of enthusiastic adopters.

Some highlights around recent Svelte advancements include:

• Typescript support - provides typed language support, rather than dynamic Javacript.
• Sapper - provides an app framework to build a fully-fledged application. While Svelte is focused on individual components, Sapper ties the components together into an app (complete with server side rendering, code splitting, etc). Note that Svelte has already replaced Sapper with something new, SvelteKit. This whole topic warrants a blog post of its own…
• IDE Support - Visual Studio code is a great one, there are others, including Atom and Intellij
• Svelte Native - use Svelte to create native mobile apps.

All in all, Svelte is rapidly becoming a platform to be reckoned with, and has compelling arguments for its use. Svelte has grown up, and is ready for the big time!

Thoughts & Notes

• While researching this blog post, I searched “populate JS frameworks 2020”, and Svelte was in some (but not all). I thought the comments here were pretty amusing - no mention of Svelte, and commentors weren’t having it!