Svelte: An overview - CSCI-5828-Foundations-Sftware-Engr/5828_s23 GitHub Wiki

Team Name: Team Slackers Team Member: Khaled Hossain

What is Svelte?

Svelte is one of the newer open-source front-end frameworks that software engineers are currently using to build high-performance web apps. It was released in November 2016 and is written using the Typescript language. In the last couple of years, it has grown in popularity by a lot. However, it’s still not being used as much as ReactJs, Vue, or Angular. From the stack overflow survey of 2022 [3] we can see that Svelte is number 2 in the most loved web frameworks.

Svelte vs React & Vue

The main difference between the Svelte and other frontend frameworks is the usage of the virtual Dom. Frameworks such as React and Vue do their work such as rendering components by interpreting the code during run-time on the browser, On the other hand, Svelte works by extending HTML, CSS, and JS. It deviates from other frameworks by compiling the code at build time. This produces highly optimized vanilla javascript. This makes svelte very fast because the code is smaller which reduces the application size and also the load times of web apps.

The virtual DOM

One thing both React & Vue make use of is the virtual dom. The virtual dom is a representation of DOM that is used in declarative web frameworks such as React, and Vue.js. [1] Every time an app’s state gets updated a new virtual dom is created and then the framework works to reconcile the changes between the new and the old one and then finally it applies it to the real DOM. According to the creator of Svelte Rich Harris, updating the virtual DOM is expensive because when a change is made in the virtual dom it needs to be compared with the previous snapshot to manage that the framework needs to loop over the nodes in the DOM to see if it needs to be updated. Finally, if a change was made the framework will update the real dom.[2] Svelte is better at this and changes the code in a more efficient way at build time. Harris also explains that even though the diffing algorithms are fast, doing it for trivial work will accumulate the amount of time it takes to run the app and eventually make it slower. Lastly, Harris agrees that virtual DOM is important but a similar programming model can be achieved without using the virtual dom and Svelte does just that.

Pros and Cons of Svelte

There are both advantages and disadvantages to using Svelte in your tech stack. Some of the advantages include less boilerplate code, faster performance, and minimal state management. However, there are some disadvantages of using svelte as well. Cross-platform apps are difficult to build with Svelte, as it’s a newer framework there aren’t that many development tools or pre-built libraries. Lastly, the svelte community is small. Running into problems might take a longer time to resolve and there isn't that much documentation.

Future of Svelte

I personally think that svelte is a great framework and it will keep getting better as time progresses. Tools like Sveltekit allows us to do both frontend and backend work at the same time and gives us the option of server-side rendering and prerendering everything on a per-page basis. It is also very fast and can do most things that React or Vue can do. Lastly, it allows us to create applications without needing too much boilerplate code. Furthermore, it is also easier to learn as it uses mostly vanilla Js. Other older frameworks such as React and Vue will still be used more by bigger companies but as time passes more freelancers and individual contributors -who need to spin up something quickly- will start to use Svelte as it has better performance and is faster to use. Svelte will not replace older frameworks as they are more established in the industry and a lot of companies are currently using it as their main front-end framework but as time passes Svelte will catch up and more people are going to start using it for their projects.


[1] Virtual Dom [2] Virtual Dom Is Pure Overhead [3] Stack Overflow Developer Survey


Cameron Mattson:

Svelte sounds simple and easy to use. This team did a good job at explaining the framework to a lamen. Svelte sounds like it has its place in the tech world. One thing I would have liked to have seen is some examples of companies that use it. Even though it is easy to use, I'm glad that you mentioned there is not much documentation, as a warning to people who are new to these frameworks.

Ishika Patel from Innovation Insurgents!:

Awesome essay! I have never heard of Svelte and so this was a great high level introduction to the framework. I appreciate the deep dive into how Svelte compiles the code at build time. With so many new tools and frameworks to build websites, I really liked how you discussed the advantages and disadvantages of using Svelte and its future potential. I learned that while Svelte may not be as widely used as React or Vue, it is gaining popularity and is currently number 2 in the most loved web frameworks. Im curious to know, what are some examples of companies or websites that currently use Svelte in their tech stack given its high popularity? Overall, the article is well-written and informative, providing valuable insights into the world of front-end frameworks.

Utsav Atul Gupta (Algorithmic Alliance):

Great overview! I hadn't heard of this new web framework that works faster and could be better than other standard frameworks like React and Vue in some cases. It was interesting to know that it's the second most loved web framework. I liked how the key difference between this and other existing frameworks was pointed out clearly, in addition to the way Svelte achieves faster results. It would be nice to see some examples of Svelte in use. A nice addition to this essay could also be illustrating scenarios where Svelte really shines. Overall, an informative and interesting read.