Even today, there are many developers who have not heard of Svelte. Surprisingly, one finds that the uninitiated lie on both ends of the spectrum, the new web developers and experienced web developers. In this article, we discuss what distinguishes Svelte from other popular web development frameworks and when Svelte is the right choice for a web or mobile framework. It is known that there are many javascript frameworks, but in this article we will restrict our discussion to the popular frameworks such as React, Angular and Vue. The choice of the right web app framework for a product depends on several factors that are beyond the scope of this article. We want to present simple yet basic comparisons of Svelte with other popular frameworks that could serve as rules of thumb in understanding which aspects Svelte outperforms others and in which aspects it underperforms. Let’s dive straight into it!
What is Svelte?
Svelte is an open source component based framework for building fast and reactive apps. At its core, it is essentially a compiler that converts your app’s web code into an executable javascript code that can then simply be run by the browser.
Here are a few apps that use Svelte for their front end – The New York Times, Square, Chess.com and IBM.
What distinguishes it from other frameworks such as React, Angular and Vue?
No virtual DOM (Document Object Model)
Most frameworks (such as React and Vue) use virtual DOM to manage the real DOM, i.e., state driven UI (user interface) development. It means there is a usage of a set of inter-dependent libraries that make the system a bit more complicated and complex. This causes overhead not only in terms of compiling more code but also memory requirements.
No Runtime System
Since Svelte is a compiler, there is no need to have a runtime system that needs to be downloaded in the browser to run the app effectively. This implies that the browser has to download less code and run smaller executables to run the app.
What Svelte is not, (yet)
Svelte is not yet a fully developed framework (yet). What I mean by it is that it is a relatively new framework, its first version was released at the end of 2016. As a result, it is not as mature in terms of providing support for advanced features and having standard libraries for complex UI workflows compared to other relatively older and mature frameworks such as React and Angular. In essence, this implies that during the stages of growth of the product app, at some point a more mature framework will need to be employed in order to guarantee reliability and stability at scale.
That being said, the Svelte community has been working on Sveltekit as a holistic framework that will address almost all (if not all) of these issues.
How does it compare to other frameworks?
We answer this question by highlighting some primary advantages of Svelte over others.
Performance
Svelte is generally considered to be more performant than React and Angular overall. Vue on the other hand competes with Svelte in terms of speed but lags behind in terms of low memory requirements where Svelte gains by a margin. For the data on the metrics of speed and memory, we take help from the analytics produced here. It is important to note that the tests were run on a particular hardware and by no means they are universally reproducible. However, they offer a decent starting point for comparing several js (javascript) frameworks.
Speed
For common tasks such as:
- Create rows,
- Replace all rows,
- Partial update,
- Select rows,
- Swap rows,
- Remove row,
- Create many rows,
- Append rows to large table,
- Clear rows,
Vue (score – 1.17) outperforms Svelte (score – 1.19) by a small margin, but Svelte outperforms both React and Angular (scores – 1.27 for both). The scores are in milliseconds and denote the duration to complete the tasks.
Memory
Similarly the memory requirement for the following tasks:
- Ready memory,
- Run memory,
- Update each kth row for n rows,
- Replace large number of rows,
- creating/clearing large number of rows,
Svelte (score – 2.2) outperformed Vue (score – 2.7), React (score – 2.8) and Angular (score – 6). The scores are in MBs of storage units.
Svelte achieves the above performance results as it compiles the code into highly optimized js executables – as a result it uses less memory. Furthermore, as highlighted before, Svelte uses no virtual DOM and the change in states are not used to update the DOM – and this is where the speed comes from.
Ease of building with Svelte
Learning Curve
The syntax of Svelte is highly similar to that of HTML. If you are already familiar with HTML and Javascript, learning Svelte will not require you more than a few days. Furthermore, a fast REPL (Read–eval–print loop) makes it possible to play around with it within minutes and this includes the installation time which is just two lines of command line code. Overall, this brings down the learning curve for Svelte to drastically low compared to bigger and more mature frameworks.
Less code to achieve a task
As the inventor of Svelte, Richard Harris, pointed out, in Svelte one needs on average 40% less code to implement a component or a feature. This is due to the fact that Svelte is designed for making things easier for developers and having no virtual DOM removes the need to write a lot of boilerplate code.
Summary
Svelte has not only proven to be simple to learn but it also comes with a small footprint and quick start capabilities. It is solidifying its position as a great candidate for quick MVPs and smaller apps. At the same, since it is still a young project it does not yet provide all the solutions that are needed for apps that need to perform at scale. In spite of this limitation, Svelte is a good option for founders and teams looking to get their products out into the hands of the customers quickly.
At Makeen, we help teams and startups from around the world build high performance mobile apps that enable the success of your product. Come and talk to our experts to find out how you can make your product succeed.
