What is Svelte?
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.
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.
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
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.
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.