What is Svelte?
More and more web applications come, and users are choosing these growing applications because of their simplicity, high speed, and high availability. Single-page applications (SPAs) account for a large portion of this flow, typically built with frameworks such as Angular, Vue.js, and React.js. These popular frameworks help developers deliver the best possible user experience across multiple platforms in a short amount of time. However, interested and leading developers targeting this market can enter the competition with a new and functional framework.
Svelte is a new approach to creating user interfaces. In this article, we want to explore the benefits of using this JavaScript framework. You might think that Svelte is useless to review when it is not yet as popular as other frameworks. But you should note that other popular frameworks were initially unknown and have reached this stage over time with improvements in their structure. Although Svelte is new than the others, its growth rate is very high. In the following, you will learn what Svelte is and what its features are. Stay with us.
What is Svelte?
Also known as Svelte.js, it is a JavaScript framework that has been available to web developers since 2016. Svelte, like Angular, React.js, and Vue.js, allows a programmer to code efficiently, modify code with less hassle, and develop an application more easily using an interface.
But the main difference of this framework is that unlike others that leave a large part of the work to the browser, the code written in Svelte is first compiled and then executed as a final product in the user’s browser. This makes the program run faster and creates a better user experience.
Svelte is fast
As we said in the previous section, the execution time of the program with Svelte is fast. Because this framework only updates the parts of the user interface that have changed. Also, unlike Vue.js and other frameworks that use virtual DOMs, Svelte does not use a virtual DOM. But what is a virtual DOM? When a page is created in the user’s browser, elements are displayed on the screen called UI. These elements are created in the form of a tree called the DOM or Document Object Model.
Due to the fact that this structure is a tree, to identify any change, the tree needs to be scrolled from the root to reach the desired node, and then this path must be scoured to apply the changes again. Virtual DOM was created to optimize this operation. A virtual DOM is a virtual representation of this tree in JavaScript code. The node detection operation is performed in this DOM and then the node and the changes that should be applied are sent to the main DOM. For example, React uses the virtual DOM to reduce browser operations when using resources. And uses it to perform detection and execution operations together in the main DOM.
But Svelte does the same thing more efficiently. Like React, changes are with State here. But instead of doing it in the browser, it compiles the code of a component into vanilla JavaScript during Build.
Svelte is small
A program compiled with Svelte is smaller than other JavaScript frameworks. For example, the size of a simple hello world program is about 124 KB. This small volume is very suitable for mobile applications.
Svelte programs are very small because Svelte is not only a framework but also a compiler.
Consider a React project to compare the startup process. With the yarn build command, Web Pack + Babel is for to build the package of project files, cleans them, adds react-dom and react libraries to the collection, packs the output file, and finally generates an output file.
Contrary to this trend, Svelte compiles the components of the project. So the program runs independently on different browsers. Svelte uses a structure like Web Pack within itself and decides to output only the parts of the framework used by your code.
Of course, it is that this compiled program still contains some Svelte code and the volume is not 100%, but it is more efficient than the way many JavaScript frameworks such as React, etc. work with it. Most of these frameworks are full on the user’s browser at runtime and increase bandwidth.
Conclusion:
Svelte can be used as a library to develop an application independently or as part of another application. Because it does not have a different implementation and uses the same process as in React, Vue or Angular. In these cases, Svelte is used to develop components that can be used anywhere, and their implementation does not depend on any framework.
