Why use Svelte for your next JavaScript project?

//Why use Svelte for your next JavaScript project?

Svelte is a relatively new but growing JS framework. Learn more about using Svelte to quickly build apps with great user experiences.

 

Why Svelte?

 

When developers think of JavaScript frameworks, the options abound; most developers will be familiar with (or have at least heard of) tools such as Angular, React, and Vue.

However, you might not have heard of Svelte, and how it’s growing in popularity. Or perhaps you have, and you’ve heard that Svelte is different, and that there’s something magical about it. I’m using the word magical on purpose: in fact, the original tagline for the Svelte project was “the magical disappearing UI framework“.

Svelte is a modern JavaScript framework used to build static web apps that are fast, lean, and are fun for developers to use. You can use Svelte to build single, reusable components for projects of any kind, including larger applications written with Angular, React, Vue, or any other frameworks. Or, you can build entire web applications with it.

Among all the various frameworks, in most comparisons, Svelte 3 stands out for its ability to produce smaller code bundles that run faster in the browser, compared to Angular or React. This is a big part of what makes Svelte magical. But, perhaps even more importantly, developers largely enjoy working with Svelte 3; building components and applications with it feels to many very similar to using “vanilla JavaScript.”

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, 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.

Compared with the likes of Angular and React, Svelte is a relatively recent framework. It was originally created in 2016 by 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 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.

 

Find out more

You can build your first app in Svelte and deploy it in the cloud with automated testing and CI/CD.

Svelte 3 Up and Running is written by Alessandro Segala, a Product Manager at Microsoft working on developer tools.

By | 2020-10-09T11:35:37+00:00 October 9th, 2020|Blog|0 Comments

About the Author:

Avatar

Leave A Comment