SVELTE AND SVELTEKIT - CAN IT CHALLANGE VUE, REACT AND ANGULAR?

One of the most popular and fastest growing is a relatively new framework called Svelte (now SvelteKit). In this article, we go through everything from what Svelte is and compares it to other frameworks to its pros and cons.

If you've heard of Svelte, you've probably also heard of Sapper and SvelteKit. So here comes a small explanation of what they are and how they are connected.

Svelte differs from most other frameworks in that it is a so-called compiler-as-framework and is actually both a library with its own syntax and several own components, but at the same time a compiler that generates Vanilla JavaScript at compile time.

Sapper is a backend framework based on NodeJS that complements Svelte with SSR (Server-Side Rendering) and where possible, also SSG (Static Site Generation).

But what is SvelteKit, you might be thinking?

In October 2020, Svelte founder Rich Harris announced that Sapper 1.0 would never be released. Instead, the community behind Svelte and Sapper, led by Rich Harris, is now building a new framework that will replace them both - SvelteKit. SvelteKit is already available for testing, but is not recommended for production releases.

A big difference to frameworks like Vue, React and Angular is that Svelte is well prepared to work in micro-frontend solutions as Svelte compiles at the component level and not holistically.

Svelte also does not use a virtual DOM to do batch updates like Angular, Vue and React. Instead, Svelte makes sure to find the optimal way to make updates directly in the DOM tree already at compile time.

The result of compiling Svelte is therefore a significantly smaller bundle than is possible with other frameworks because in the runtime there is no reference left to Svelte or any other runtime. What remains is simply JavaScript.

It is difficult to find purely functional disadvantages with Svelte, but it can be said that the community developing the framework is still quite small and that of course comes with a certain risk. The documentation is good, but not at the same level as with older and more developed frameworks.


Another disadvantage of Svelte could be that it lacks many components and associated libraries that are obvious to many within React, Vue or Angular.


However, the advantages of Svelte are many. Here are some of the main ones:


Less code

According to several measurements, both quantitative and qualitative, developers need to write approximately 40 percent less code with Svelte compared to React. The developer experience is, among other reasons, completely unbeatable. For those who are used to vanilla JavaScript, it is also very intuitive.




Fast growing community

Although so far it is completely incomparable in size and the number of developers, the community is growing rapidly. Both the percentage of developers who participate in the further development of Svelte but also who document, write components and who use the framework in their own creations.




Smaller bundle size

As we have discussed, the final product of Svelte will be significantly smaller in size than is possible with frameworks that reference a runtime/lib. The result of that is that the end user downloads the content faster and gets a faster experience.




Uses less memory

Due to the lack of a V-DOM but also several other reasons, Svelte uses less memory compared to other frameworks. Something that is a big advantage for mobile devices that do not have the same amount of working memory as a traditional computer.




Requires less CPU

In addition, Svelte not only uses less memory, but is also more economical with processing power. This is not least important on devices that lack multi-core processors where you don't want to lock the UI thread to update elements on a web.

There is a rather hot debate about V-DOM being or not in many quarters. Much because of other popular frameworks that still use V-DOM but are extremely lean and optimized. One such example is Inferno JS which is very similar to React in many ways.


A reasoning around that could be that the world on the web is moving towards more micro-frontends and a more component-based way of thinking where we don't like to build and maintain large monolithic solutions where a V-DOM might (?) still play an important role.


Svelte does it in a different way and is very much a worthy contender with a growing community. Because it is a framework that makes it possible to build faster, more efficient and smaller web interfaces. If you want a longer overview, you can watch the video below where I dive deep into Svelte and share my thoughts. And feel free to get in touch if you have any questions or concerns.




Referenser:




Svelte (officiella sajten)
Sapper (officiella)
SvelteKit (officiella)