Svelte – The Next Big Thing, But Why Should You Care?

February 10, 2021

Most popular

If you take a look at the results of the State of JS survey conducted since the year 2016 (link: https://2020.stateofjs.com) for 2020, in the section on front-end frameworks your attention could be drawn to the one used by only 15% of this year’s respondents (which is twice the percentage comparing to the previous year). However, almost everyone was satisfied with it, which was the highest result among all surveyed frameworks. This situation must arouse the interest of both developers and users, which is also reflected in the survey results.

Percentage of people satisfied with the framework

Percentage of people interested in the framework

Here it is – Svelte!

In this article, you will get to know:

  1. What is Svelte?
  2. What does Svelte can offer us?
  3. What are the disadvantages of the Svelte?
  4. What are additional functionalities accompanying Svelte?
  5. What is the potential future of Svelte? 

What is Svelte?

In the universe of front-end developers, you can experience disagreements about what is a framework and what is not. Especially in relation to React, which theoretically is not a framework, but a library, although in practice it seems to meet all the essential criteria for being a legitimate framework. These deliberations may seem pointless, yet they indicate an important question – what the frameworks are for?

An interesting answer to this query is provided by the creator of Svelte, Rich Harris:

“Frameworks are not tools for organizing your code, they are tools for organizing your mind.”

This quote can be considered as the main idea that stood behind Rich Harris during creating Svelte.

Svelte is a component-based web framework or as its own creator sometimes calls it: UI framework. The main features of Svelte are its speed, lightness, and above all the fact that it serves us during the development stage and disappears at the building time. Since it serves us only during the development stage and bundles components without adding them to devDependencies on the client-side it can be called a „disappearing framework”. Rich Harris has decided not to reinvent the wheel and used the existing Web API for Svelte. However, it doesn’t use Virtual DOM, which in Harris’ opinion is not fast enough. It is controversial to say if Virtual DOM is fast enough, but the creator himself thinks it is not fast enough, therefore he abandoned the concept.

In one of his speeches, Rich Harris quoted one particular tweet:

Above Tweet is worth quoting not to show that React is a bad tool – this certainly is not the intention of the creator of Svelte, although it is obvious that it is often being referred to as still the most popular framework. Such reference is only an introduction to another big advantage of Svelte, which is the change of approach to reactivity. In most frameworks, reactivity must be triggered, for example with React using Hooks and using the Virtual DOM. However, Svelte, quoting Harris “moves reactivity out of the component API, and into the language”. Instead of using the Virtual DOM, it parses the code, creates a dependency tree, and then assigns the appropriate code fragments a method – $$invalidate() – which allows to follow and change only those parts of the DOM that need to be updated.

What does Svelte can offer to us?

What is the advantage of Svelte over the other frameworks? Due to the fact that Svelte is a small framework, it will be perfect for applications dedicated to devices with little memory. Does this mean that Svelte will not work on large projects? I used to think that with composite and expanded applications Svelte may not be enough and we would need more advanced tools. However, it is quite the opposite. When we are dealing with an application with a great number of elements and manipulations, Svelte with its performance is perfect, without the use of debounces asynchronous methods to achieve a proper user experience.

Svelte also cares about accessibility, which we get out of the box, and if, for example, for the <img> element we do not provide the ‘alt’ attribute, the framework will allow us to do so, but will indicate it with a legible warning.

There is also a great number of pre-prepared solutions in terms of styles. First of all, the styles that are unused are removed, about which the developer is informed in advance. In well-prepared documentation (and let’s agree that well-prepared and complete documentation is very often not a rule) we can find a lot of already prepared animations and transitions. Of course, we are still able to create your own animations using CSS, but it’s definitely worth taking a look at already prepared solutions.

Svelte – does it have any disadvantages?

Despite all the praises above, even as complete, easy to work with the framework as Svelte has its drawbacks. Sometimes, functionalities that might seem like an advantage at a glance, can be an impediment in some cases. For example, as mentioned above, the removal of unused selectors from CSS. Such functionalities can be an issue when Svelte tries to remove selectors that are not encapsulated in the component. You certainly can imagine more complicated situations where you add classes programmatically and Svelte will unnecessarily warn you about unused styles that actually are used. This is the intended action, due to the encapsulation of components. Other problems also can occur when we will try to combine Svelte with other technologies or use other tools to configure them. Svelte is created by a team of volunteers and people with passion, who improve this small framework after working hours. This fact alone implies certain limitations, for example in the speed of improving individual problems with the framework. It is important to realize that the Svelte ecosystem is not fully stabilized yet. Libraries we have been using so far can sometimes be difficult to use in Svelte. TypeScript wasn’t fully supported until recently, and currently, there are still elements of TypeScript that won’t work properly in Svelte, although they are usually not a deal-breaker.

The biggest problem the Svelte has is still a small community of users, so when entering the world of this framework, we have to take into account that on StackOverflow we might not find a prepared solution to our problem. However, this issue can change really quickly, taking into account the learning curve, which in the case of Svelte is beneficial both for people who just start their adventure with the front-end and for experienced developers who have experience with other frameworks. Therefore, it can be said that Svelte from the developer’s point of view is not a revolution, but an evolution. Especially experienced front-enders will appreciate the previously mentioned improvements that Svelte provides us out of the box.

What’s beyond Svelte?

Svelte community is not only focused on the framework itself but also on the side-projects:

  • Sapper – framework responsible for server-side rendering, code splitting, routing; if you look for a comparison with existing tools, it’s the closest to Next.js.
  • Svelte Native – every serious framework also offers its own services for mobile solutions: we have React Native, NativeScript-Vue, so now we have Svelte Native.
  • Svelte GL – probably the name itself gives us a hint that this is a response to tools like Three.js; Svelte GL, however, is probably the least developed project with the existing ones and we will have to wait a while for the production version. Although it is worth mentioning that, if the effects of the Svelte GL are going to be similar to Svelte itself, it is definitely worth waiting for this project to be completed.

Svelte future

We have already mentioned the side-project Sapper, but the most important thing was not mentioned so far: Sapper is not yet available to version 1.0, and… it will never come out. Despite Sapper getting good feedback from users, the Svelte team felt that it could be done better and decided to draw their attention to another project called SvelteKit. Currently, the latest SvelteKit solutions can already be used, however, the creators warn that the project is not yet fully completed. Nevertheless, many developers have already started using it and there are hardly any voices of disappointment or dissatisfaction that something is not working properly. But what does SvelteKit offer us?

First of all, so far there is the Rollup as a bundler, which of course can be changed to any other, such as for example Webpack. Nevertheless, the Svelte team decided to implement a completely new solution that is gaining popularity – Snowpack. It is an extremely quick bundler that offers even a great hot module reloading. So it’s safe to say that Snowpack is the best answer to the needs that Rollup was supposed to meet. The team assured that SvelteKit will not be released without full TypeScript support. In addition, the developer will no longer have to choose whether to use Svelte itself or use Sapper – with SvelteKit.

Summary

Svelte is still a young but perspective framework and we have not heard the last of this, not by any means. The development of this small framework also looks really promising. Developers who just began their journey should work on this framework with ease, and those with more experience will have no problems getting to know and assimilate with the principles of Svelte operation.

Appstronauts members are also very eager to use the features offered by the Svelte framework. Interesting and useful solutions offered by this small framework allow the effective work of the team, and the convenient tools and constantly developing functionalities encourage the programmers to use this type of framework in their work. Positive impressions of the Appstronauts experts are a very good prediction about the future of the Svelte.

While reading news about the front-end business and articles where different frameworks are compared, Svelte is still often omitted in various comparisons. Nevertheless, Svelte is becoming more and more popular and it is possible that soon the ‘Big Three’ – React, Angular, Vue – will be expanded by one more member of this noble group! We keep our fingers crossed that Svelte will not turn out to be a fading quickly comet, but will permanently appear in technological stacks of various projects.

You may also like..

Automated End-to-End Tests for Ionic App using Appium

Automated End-to-End Tests for Ionic App using Appium

Enter Appium, an open-source automation framework that has revolutionized the way mobile app testing is conducted. By leveraging the power of Appium’s capabilities, developers can now automate end-to-end tests for Ionic apps, enabling them to detect and address potential issues early on in the development cycle.

read more