Get best of the week

Why you should use Svelte for your web projects

If you are a web developer, you have probably heard of Svelte Js. Nevertheless, I think you will be wondering why it is gaining popularity and what interesting advantages it has for web developers.

We will do a brief review of this framework, its advantages and disadvantages, so that after reading you can decide whether it suits your project or not.


The Svelte framework appeared in 2018 and it was a sensation. Both beginners and experienced developers liked using it for all kinds of projects. In this regard, let's take a little time to clarify what makes Svelte so accessible.

What is Svelte and what are its advantages?


For some developers, Svelte JS is known as the most popular front-end framework that was not included in the top six of the State of JavaScript in 2018. There is a Wikipedia article about Svelte , but it appeared only six months ago, so there is not much information there.

Svelte was conceived as a framework, but, in fact, it is a component framework designed to compile components at the build stage. Thanks to this approach, you can upload just one bundle.js per page for rendering the entire application.

Simply put, with Svelte, you write components using HTML, CSS, and JavaScript. During development, the framework compiles them into small stand-alone JavaScript modules. This ensures that a minimum of work is done on the part of the browser, which makes the web application faster, and writing code is easier.

Here is a short description of Svelte from the authors:


Source: Svelte.dev

Thanks to all this, Svelte Mobile is one of the leaders in terms of “startup performance”. Other types of optimization do not. Svelte achieves such outstanding results through the use of an accessible browser-based JavaScript compiler, and not any third-party one. Thus, we get a great solution for web development among other popular frameworks and programming languages .

So Svelte achieves accurate code responsiveness and increased productivity, which is an excellent framework advertisement for both developers and business owners. In addition, another advantage of Svelte for developers is convenience for beginners and a clear syntax structure.

Svelte Architecture Overview


Svelte is popular for its speed compared to any other libraries. This is due to getting rid of the loading phase of the framework for building a virtual DOM . Instead of using the tool at runtime, Svelte code is compiled into JS at the build stage. This means that the application does not need dependencies to run.

How Svelte Works


I'll try to explain the principle of Svelte in the simplest words:

  1. You open the site.
  2. Render the page in pure JS.
  3. You pass the page to your colleagues [if you work more than one].
  4. Colleagues expect real reactivity from the page.
  5. If they find it, the application / site should work smoothly, not only in test mode, but also in battle.


Svelte JS vs. React vs. Vue: comparison


Many engineers compare Svetle.Js with other frameworks. The most famous alternatives are React and Vue.

The most popular web frameworks such as Angular, React and Vue.js are based on the principle of waiting for code to load to build a virtual DOM. Only then can they render the page using the library.

For example, React, developed by Facebook in 2011, made reactive programming quite popular. This framework first started using the virtual DOM. It separates event processing, attribute manipulation, and manual DOM updating that would otherwise be required to build the application. This was the key factor that made React so attractive.

Svelte, meanwhile, is a compiler. It compiles your components in JavaScript instead of relying on concepts like Virtual DOM to update the browser DOM. Thanks to Svelte typescript, it became possible to build the application much more efficiently. You can write your components using CSS, HTML, and JavaScript, and during the build process, Svelte compiles them into separate JavaScript modules.

As a result, Svelte 3 builds a lower weight DOM. For example, the TodoMVC implementation on Svelte in compressed form weighs 3.6 KB. For comparison, React plus ReactDOM, even without application code, weighs approximately 45 KB in compressed form. Fully downloading TodoMVC on React takes 10 times longer on the browser than on Svelte.

True, it is difficult to impartially evaluate the performance of Svelte in comparison with React, since the frameworks are very different in essence.

And yet, if you want to know more details about the practical comparison of these web frameworks, it will be useful to watch this video.


According to GitHub , Svelte Native is significantly faster than Ember, Angular, React, Ractive, Preact, Mithril or Riot. It is even able to compete with Inferno, which is probably the fastest UI framework in the world at the moment. In the end, this is a decisive advantage, because a higher application speed can propel you ahead of the competition.

Svelte Components


Let's dig deeper into the details of the Svelte structure. Any PWA [Progressive Web Application] component on Svelte can contain three sections: script, style, and template. Here is a more detailed description of what is meant:

Script tag: optional JavaScript block with declarations of functions and variables used inside the component.

Style tag: another optional unit. Think of it as a regular HTML style tag, with one critical difference. The rules described inside this block apply only to the current component. Applying a style to an element Pwill not affect all paragraphs on the page. This is great, because there is no need to come up with classes for different elements. That is, you simply will not be able to accidentally redefine another style rule.

Template block: This is the last and only mandatory block, usually the H1 tag. This is both the view and the view of your component. It is closely related to script and style blocks, since it defines its behavior and design.

To get a better idea of ​​creating all these components, I suggest that you read a brief and understandable explanation from A shot of code:


For these reasons, we can consider Svelte as a library trying to bring modularity to the frontend. This modularity is supported by grouping various components. However, the framework also isolates the template, logic, and design. By default, Svelte builds styles for each component separately. That is, you will avoid any style leaks between components, which does not guarantee the use of some other frameworks.

It is also worth noting that Svelte interacts well with a JavaScript variable called name. This is a new concept from Svelte v3. Any variable in the script of your component can now be accessed from HTML markup. Nor is there any framework-specific syntax that you will need to learn to manage states. You do not need to deal withdataVue, $scopeAngular, or this.stateReact. Instead, you can use everywhere letto achieve assigned state values. Changing values ​​each time automatically causes a re-render.

This is how it looks in practice:


Creating a Svelte component is similar to working with CodePen. You don’t have to wonder how to connect the declarative JS function that you learned through some DOM query-selector. Svelte will not affect window listenersor callback functions. These fundamentals remain as they should be.

Another nice thing about these components is that they are as priority as traditional ones. All you need to do is import the .html and Svelte will understand how to deploy it.

What else you need to know about Svelte.js


Let's talk about the other important advantages of Svelte in the development process compared to other frameworks.

Beginner-friendly


We mentioned earlier that the reason for the popularity of Svelte is partly because of its simplicity for beginners. When using it, there is no need to manipulate the DOM. Also, you do not need to comprehend the framework-specific wrappers of states. Access to variables can be obtained directly from the markup, and this greatly simplifies the process of creating an application. Working with Svelte, programmers can learn the basic principles of the state of components without getting confused in the details.

Svelte provides its own syntax for conditional statements and loops for displaying DOM elements. The principle of operation here is similar to JSX. However, all of these enclosed brackets in which beginners can easily get lost are not so important.

There is one oddity about Svelte that is worth mentioning: it passes properties to components. This framework is easy to learn and fully functional, but, to the taste of some developers, the syntax is too exotic.

backward compatibility


Previously, if you needed to integrate, for example, some calendar widget or any other into your application, you could only do this using the same version of the framework on which the widget is built. That is, if you build the application in Angular, and the widget is built in React, you will not be able to integrate it. However, if the widget or your application is built using Svelte, this becomes possible.

Code separation


Let's say you use React as the main framework. If you initially use only one React component, and not a lot, then you still have to download the entire React. With Svelte, code separation is much more efficient, since the framework is built into the component and this component is very small.

Support Open-Source Community


Svelte is an open source software developed by enthusiasts. Thus, using the Svelte framework is cost-free and allows you to implement many functions for free. In addition, Svelte has an active community of developers on GitHub, which you can join, and where you can always ask for help or contribute to this technology.


Is Svelte stable enough and reliable


This is an urgent issue for the framework that has been on the market so recently. All of the above examples relate to Svelte version 3 syntax. At the moment, it is still in beta. Compared to industry giants such as ReactJS and VueJS, it is not very developed.

No matter how interesting SvelteJS may be, you should wait a while before teaching master classes on the code using it. This is because the beta version may be somewhat different from the final one. However, Svelte offers concise documentation for version 3, which may make it easier for beginners. So this framework can certainly be seen as part of your trusted technology stack.

Is Svelte.js the next giant?


Hard to answer. Can Svelte beat Vue and React as a front-end framework that will stand the test of time?

This is not so easy to predict. At the moment, he has not yet reached the level of popularity of some of his brothers. He does not have the same support from a large corporation as React. But then again, Vue did pretty well without her.

Last year, another State of JS study was conducted. It is held annually to assess the preferences of leading developers. Svelte has become the most popular compared to other libraries included in the survey. This may mean that sooner or later it will be considered as one of the best JS frameworks.

Svelte vs. React is a common topic of discussion among programmers, but one of the frameworks is not necessarily clearly better than the other. Svelte is well suited for developing web applications or MVP, while Angular is well suited for PWA or enterprise web applications. Some developers find a framework that they like and stick to it, but even so, don't let this try to try Svelte. You may like the features we described.

Let's briefly go through the key features of Svelte

again : ️
  • This is a component-based framework that does not require additional plugins.
  • ️ It works with state management without any familiar difficulties.
  • ️ It allows you to use the built-in [in the component] styles, without requiring CSS-in-JS, so no extensions for the code editor or strange syntax are required.
  • ️ A very simple build script is enough to get started.
  • ️To start work on the base project, practically no files are needed.

If you are a web developer who needs a new framework, be sure Svelte is worth a try. In other cases, if you are looking for the best technology for your web solution, Svelte may be a good option worth paying attention to.

More articles:


All Articles