A JavaScript framework appeared some time ago, taking on React and VueJs head-on. That framework is Svelte, which competes with its elders on several points that we are going to explain in detail in this article.
You should know that Svelte is not brand new; it started to become well known from its latest update, Svelte 3.0.
With the slogan “Cybernetically enhanced web apps”, Svelte aims to be simpler, more reactive and less time-consuming in its code.
Let’s start by understanding what Svelte is
Svelte is defined as a JavaScript framework used in the creation of reactive user interfaces. Its objective is to reduce application loading times considerably.
Svelte, a framework? Not so sure! It is also a JavaScript compiler
If we had to classify it more precisely, Svelte would be somewhat apart from JavaScript frameworks as we know them. Indeed, the way it works includes a compiler, the important element that allows it to differentiate itself from React, VueJs or Angular, for example. In Svelte’s case, there is no need to include a library in your code to enable compilation, since it is already there. Svelte is a framework within a compiler.
To be more precise, comparative analyses have named Svelte as the most performant JavaScript framework compared with React and VueJs.
Using the “compiler framework”
To program with this JavaScript framework, you have to use the file extension created for it: .svelte. But that’s not all! Indeed, Svelte’s code base is HTML, which means it is just as well supported in a .html file. No more headaches — do it however suits you!
An example of a rendering with Svelte was shown here as an image in the French version and needs to be re-attached.
Svelte will compile these lines of code. The file is sent to the browser in compiled form in a distribution version in order to obtain the rendering.
An example of a JavaScript compilation with Svelte was shown here as an image in the French version and needs to be re-attached.
The advantages of Svelte
Its weight and loading speed
One of the big advantages of the Svelte framework is, as its name suggests, how very lightweight it is. Indeed, once the code has been compiled, the application weighs three to four times less than with a compilation under React or VueJs. Unsurprisingly, this leads to an improvement in the application’s loading speed for the user.
At the time of writing this article, a benchmark reveals that the framework is 35 times faster than React and 50 times faster than VueJs. That’s already not bad, but who knows, further changes may yet come to improve these results even more!
Different code to address certain challenges
In principle, the less code you write, the less chance you have of running into bugs, right? Svelte is designed around this idea. The framework aims to be simple and readable. The syntax is written a little differently from what we are used to seeing, but there is nothing insurmountable about it — you get used to it quickly. For example, the { } in the HTML are used to indicate that you want to retrieve the content of the variable. In fact, Svelte aims to let you reduce your lines of code so that your programs remain readable. And it succeeds! On average, for a given function, the JavaScript framework will need 40% fewer lines than React.
The use of the imperative rather than the declarative is another parameter that sets the framework apart. When we develop in a declarative language (HTML), Svelte takes the components in order to translate them into imperative-style language so as to inject them directly into the DOM. But if the application’s code is imperative, how can Svelte detect that a change has occurred? In other words, taking the same example, how can the framework detect that the input field has been filled in? It all comes down to compilation time.
The JavaScript framework’s compilation
To answer the question: Svelte is of course able to know that a change has taken place, thanks to a device of its own: variable = variable. At first glance you might wonder what sense that makes. Indeed, by doing this you are asking a variable to assign itself to itself — but this will tell the framework that it needs to run the checks again in order to detect any changes to be taken into account.
The code is compiled automatically by the JavaScript framework, which means the browser doesn’t have to do all the work. This is what allows Svelte to achieve unbeatable loading speeds. The code is compiled into small, self-contained JavaScript modules injected directly into the DOM.
This compilation happens in real time, while the code is being written. Svelte therefore doesn’t require any browser dependency in order to run. Another good way of reducing the application’s weight and improving its loading time!
The DOM
Svelte’s creator, Rich Harris, explains that he did not want to include a virtual DOM for the simple reason that it represented one more layer to execute when loading the application.
The DOM is therefore no longer manipulated directly by the author of the program, but by the JavaScript framework itself.
In summary, Svelte means a community that has been growing since version 3 went live. A creator who listens and who, following requests from the community, planned to include compatibility with TypeScript in a future update of the framework.
So here is what we can hope for in the JavaScript framework’s next improvements:
- Svelte Native, for developing Android and iOS applications
- Sapper, for creating complex applications
- Svelte GL, to make it possible to create 3D experiences in the browser
Are you interested in JavaScript frameworks? We have plenty of other articles: LocalStack, Sylius Plus, Kendo UI and Vue.js — head over to the Framework section of our blog!
