This is the fourth article in our Frameworks series. Here are the first, second and third articles.
Svelte: black magic
The list of top 3 frameworks seems to be clear and commonly accepted. However, the web development community felt these tools aren't enough. For solving everyday tasks, they wanted a fast and easy-to-use framework with concise code as well as out-of-the-box development capabilities. Neither React, Angular, nor Vue can offer particularly small bundle sizes out of the box.
Svelte was introduced in 2016. Although its first version wasn't promoted by its creators, starting in 2018, from the second and third versions, Svelte's developers started promoting it and the framework started to become popular in the development community.
Let's go over how Svelte works. First, we write high-level source code using the declarative approach. That means that our code should describe what needs to be done, then the framework will decide how to do this. In other words, instead of describing how to achieve the desired result, we should just describe it. In turn, Svelte will return the low-level code to accomplish what it should. For example, inside the browser:
These numbers decrease over time as each framework improves, except for Svelte, which always has 0 KB.
Apart from that, Svelte has some other cool features:
- High performance at runtime. For example, when the code is running in a browser
- A library of out-of-the-box animations
- An isolated environment for interacting with styles
- SSR support
- Cross-platform capabilities (Svelte Native)
- Typescript support
No wonder Svelte is getting more and more popular. Svelte is also newbie-friendly and offers a great interactive tutorial.
The big disadvantage with Svelte comes from the lack of an officially supported command line interface (CLI). Currently, creating and bundling a project сan be done only with the help of third-party templates for deployment.
Apart from that, compared to React, Vue, and Angular, Svelte has a small ecosystem. In the case of React, it's much easier to find the necessary ready-to-use component or library than it is to find an analog for Svelte. In fact, with Svelte, it can take quite a lot of time to find a suitable alternative. That's not to mention having to fine-tune this alternative tool so that it works with your project. Moreover, there's no guarantee that this solution will have all the functionality you need and it might even be riddled with bugs.
Another disadvantage of Svelte is that it has a small community of developers. We've drawn this conclusion based on the number of questions about this framework on Stack Overflow, compared to Angular or Vue.