There are always a lot of choices in the dev world, especially when establishing a production environment, and Javascript frameworks are no exception. And now there’s a new kid on the block: Svelte.
We all know React, Vue, and Angular and how good they are for modern web development, but Svelte – a new challenger in this field – may not be familiar to everyone.
All the development tools available in today’s market are high-quality tools, and sometimes the choice to use one tool over another is more a matter of personal taste and passion than the result of an objective “this is better than that” assessment. However, Svelte’s potential is very impressive, leading some users to switch systems for previous projects written in React and Vue. Svelte is a top choice for developing SPAs and web projects; here are three fundamental features that explain why:
The need for Svelte: how Svelte differs from common front-end frameworks
If Svelte were simply an alternative to the big three libraries, it probably would have been short-lived. The genius of Svelte lies primarily in its innovation – let’s take a closer look at what this means in practice.
1- A library? You mean a compiler, right?
Although Svelte is officially defined as a ‘component framework’, the words ‘library’ and ‘framework’ are perhaps not the most accurate terms to use in this context. Rather, Svelte is a true compiler that takes a combination of enhanced Javascript+CSS+HTML code input and outputs native code, which in turn interacts with the Document Object Model (DOM) without intermediaries.
In a common Javascript framework context, developers build declarative state-driven code. In this strategy, the browser must handle conversions of this declarative code into DOM structure and actions. A common technique used to achieve this is the Virtual DOM. This behaves like a layer between the declarative code and the browser production. When the ‘reactive’ data changes state, the engine makes a comparison between the newly updated Virtual DOM and the real DOM in the browser to determine which data has changed. It then updates only these necessary parts of the onscreen UI.
Of course, this ‘diffing’ technique within the Virtual DOM is brilliant, but the browser still has to take additional steps to update the final DOM, a process that can tax the garbage collector and rankle the frame budget. Svelte, on the other hand, is a compiler that already knows at build-time how things might change in an app, rather than waiting to do the work at run-time. Here, the tool converts Svelte files/components into highly efficient imperative code (highly optimised vanilla JavaScript) that surgically updates the DOM without the need for diffing techniques. The outcome is blazing fast results with an excellent improvement in overall performance.
2- A real “reactivity” mechanism within the language
Although all major Javascript frameworks can be considered ‘responsive’, since they have the ability to automatically update the DOM when part of the app is updated, this mechanism depends on a specific API that the developer must use to notify the system of changes. For example, notifying the app to update the DOM by changing its state in React demands the use of a specific API (the setState method in class-based components and set hooks in functional components).
Even in Vue, which may feel more reactive because the state is updated directly using the properties’ names, in reality this process involves calling a setter in the background, generated and controlled by the library. Without using this API, the framework cannot update the Virtual DOM and consequently the final page. The approach taken by Svelte, as a compiler, is to execute the code in topological order, rather than top-down. The Svelte compiler generates a sort of dependency graph in which a variable’s value will be updated when one of its dependencies updates, reacting to its own data changes.
Every time an assignment to a variable occurs, the compiler will explicitly compute the dependencies and update the real DOM – as a compiler, Svelte can compute the dependencies in the build-time. This brings true reactivity into a core part of the Javascript language rather than depending on a particular external technique or API.
Here’s a very simple comparison between state updating in a React class component, Vue component and finally, a Svelte file:
// React state with class component
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {counter: 0};
}
updateCounter() {
this.setState(({ counter }) => ({
counter: counter + 1
}));
}
render() {
return (
<div>
The counter is: {this.state.counter}
<button onClick={this.updateCounter}>Increase</button>
</div>
);
}
}
Code language: JavaScript (javascript)// Vue state
export default {
data () {
return {
counter: 0
}
},
methods: {
updateCounter () {
this.counter += 1
}
}
}
Code language: JavaScript (javascript)// Svelte state
let counter = 0
counter++
Code language: JavaScript (javascript)What is clear is that Svelte controls reactivity directly into vanilla Javascript statements thanks to its internal mechanism and compilation. No API, method, or mechanism is needed to trigger reactivity, but instead a value is assigned to a variable using the assignment operator (=). Using the REPL environment provided on the Svelte website (https://svelte.dev/repl) displays not only the final output of a Svelte code but the compiled version of the code as well. The Svelte compiler will produce something like:
counter += 1; $$invalidate('counter', counter)
in which the call to $$invalidate reports the state variable as changed/updated and checks (in the previously mentioned topographic manner) the dependency graph before surgically updating the DOM – that is, the page in the browser. As stated by Rich Harris, the creator of Svelte: “Svelte 3.0 moves reactivity out of the component API and into the language”.
3- Upstanding development experience and growing ecosystem
Apart from being super-fast and offering excellent performance, code in Svelte is significantly smaller when compared to that of React or Vue. In Svelte, abstraction isn’t necessary: plain Javascript is all that’s required, which is, at the end of the day, leaner, cleaner, and more compact. Apart from performance and benchmarking considerations, fans of Vanilla Javascript will really appreciate this feature because it gives the feeling of writing an enhanced version of a Javascript code rather than using a framework.
Furthermore, in addition to the quality of the code and the development experience, another very important factor in choosing a development tool is its ecosystem: the size and activity of the community, the production of bug fixes and new versions, the presence of tools that can assist in the production of code.
Obviously Svelte does not enjoy the same qualities as React, Vue, and Angular in this respect, as it is significantly younger, and does not currently enjoy the support of a top brand. However, the Svelte ecosystem still features an active community, and is supported by two high-quality tools: SvelteKit and Svelte Native. SvelteKit is the counterpart of Next.js for React and Nuxt.js for Vue: a full-stack framework that exploits the potential of Svelte to produce SPAs and complete web applications in a server-side Javascript model. Svelte Native is a new approach to building mobile applications using NativeScript.
Here, unlike some other mobile development frameworks which do the bulk of their work on the mobile device, Svelte Native shifts that work into a compile step that takes place when building the app. Svelte Native offers the same mechanism highlighted previously; instead of using techniques like virtual DOM diffing, Svelte Native code surgically updates the native view widgets when the state of the app changes.
These are just a few features that make Svelte and its related tools amazing. Their presence will also help in further improving more popular tools such as React and Vue.