Why Svelte?

To understand what's special about Svelte, we need to look at how it differs from other popular libraries and frameworks, such as Angular, React, and Vue.

Svelte versus the other frameworks

Svelte's goal is to help developers write less code, letting them build components using familiar HTML, CSS, and JavaScript. Just like React ones, Svelte apps are truly reactive, so you do not need to manipulate the DOM directly (as you would if you were using jQuery, for example): the view is automatically updated on every change in the state.

However, Svelte's main intuition, and its biggest difference from all the other popular JavaScript frameworks, is that it moves most of the processing to a compilation stage. That is, rather than relying on large and complex libraries loaded at run time, Svelte is built around a compiler that processes your application's code before emitting a small, fast, and optimized code bundle.

Another major difference from other popular frameworks is that Svelte requires almost no boilerplate code: Svelte components are written with HTML, CSS, and JavaScript blocks. Scripts feel very close to "vanilla JavaScript," while markup is defined using standard HTML tags. Svelte does not introduce new JavaScript syntax either, unlike React's JSX.

Thanks to being pre-compiled, Svelte apps have a minimal overhead, both in terms of bundled code size and performance. Smaller bundles make your pages load faster, especially for users with slower internet connections. Additionally, by performing the bulk of the work in the compilation stage, Svelte does not need to include techniques such as the virtual DOM used by React and Vue: state changes in Svelte apps are reflected directly in the DOM, without extra overhead.

In a sense, Svelte is a response to the explosion of the size of web pages. According to the HTTP Archive reports (https://www.httparchive.org/reports/state-of-the-web?start=2015_03_01&end=latest&view=list), the median size of a web page was 1,280 KB in 2015, and that has grown to 2,080 KB in 2020. Large web pages take longer to load, increasing the likelihood of users leaving your site. But they also disproportionally impact users in rural areas, where internet bandwidth is more limited.

While the requirement for compiling your JavaScript code might sound off-putting, Svelte does that in a very transparent way, by working directly within bundlers such as Webpack and Rollup. In that sense, it's not much different from other tasks that JavaScript developers perform habitually, such as transpiling to an older ECMAScript version with Babel, or converting type-safe TypeScript code into executable JavaScript. The compilation stage for Svelte is really fast, adding an unnoticeable amount of work to a normal bundling pipeline.

The Svelte project

Svelte is an open source project, whose source code is available on GitHub and was released under a permissive MIT license.

Relevant links:

Official website: https://svelte.dev/ Project page on GitHub: https://github.com/sveltejs/svelte

Compared with the likes of Angular and React, Svelte is a relatively recent framework. It was originally created in 2016 by Rich Harris (https://github.com/Rich-Harris), a software developer and visual journalist.

Svelte was first noticed by the broader JavaScript developer community in the summer of 2018, when Harris presented it in a talk at JSConf EU. This was the first time I'd heard of it myself, with an introduction to version 2.

The release of version 3 in April 2019 marked an important moment for Svelte (this is still the most recent branch as of the time of writing), as it was a complete rewrite that introduced a new, simpler syntax for writing Svelte components. With Svelte's third release also came a real uptick in the adoption of the framework.

Today, Svelte is maintained by an active community that is organized around the project's GitHub repository, and builds new releases with bug fixes and new features regularly.

It is also used by hundreds of organizations around the world, including The New York Times (where Harris is employed), 1Password, Rakuten, Philips, and GoDaddy. A list of users is maintained on the project's website.

As for developers' preferences, the 2019 State of JavaScript report (https://2019.stateofjs.com/front-end-frameworks/) portrays Svelte as well-positioned:

• 88% satisfaction among developers; that makes Svelte the second most popular framework behind React (with 89% satisfaction).
• Svelte ranked first among developers' interest, at 67%.
• However, Svelte's relatively young age made 2019 the first time it appeared in the State of JavaScript report, and a quarter of respondents stated they had never heard of it.
• Nevertheless, a fifth of Svelte users reported working in a company with over 1,000 employees (the same as React), indicating how the framework has gained momentum in more mature organizations too.