Simon Holthausen - Svelte

This book is for developers with experience of JavaScript. If youve already used a JavaScript framework such as React, youll find this book an easy read, but its also suitable for readers with no prior experience of such frameworks.

Code in this book is displayed using a fixed-width font, like so:

Youll notice that weve used certain layout styles throughout this book to signify different types of information. Look out for the following items.

• https://www.sitepoint.com/community/ are SitePoints forums, for help on any tricky problems.
• books@sitepoint.com is our email address, should you need to contact us to report a problem, or for any other reason.

Svelte is a relatively new JavaScript frontend framework for developing websites and web apps.

The praise that Svelte has received over the last two years is testament to it not being just another frontend framework. It won breakthrough of the year on the State of JS survey 2019, followed by topping the satisfaction rating in 2020. It was also voted the most loved web framework in the Stack Overflow 2021 survey.

Svelte appeals to developers with its combination of a small bundle size, very good performance, and ease of use. At the same time, it comes packed with a lot of goodies. A simple state management solution to build upon is already provided, as well as ready-to-use transitions and animations. This introductory tutorial will shed light on how does Svelte achieves this. The following tutorials in the series will go into more detail on how to implement applications with Svelte using the various possibilities Svelte provides.

But first, a little back story on Svelte. Though it only entered the mainstream in the early 2020s, Svelte has been around for much longer.

The first commit to GitHub was in late 2016. Its creator is Rich Harris, an open-source wizard whose most prominent other invention is Rollup, a modern bundler. Rich Harris worked at the news magazine The Guardian as a graphics editor at the time. His daily routine was to create interactive visualizations for the website, and he wanted to have a tool that easily let him write these without compromising on bundle size or speed. At the same time, he wanted something approachable so other less tech-savvy colleagues would be able to create visualizations fast.

Out of these needs, Svelte was born. Starting from the news room, Svelte quickly gathered a small following in the open-source community. But it wasnt until April 2019 where Svelte really got known to the world. This date marked the release of version 3, which was a complete rewrite with a focus on developer experience and approachability. Since then, Sveltes popularity has risen a lot, more maintainers have joined the team, and Rich Harris has even joined Vercel to work on Svelte full-time.

Lets dive into Svelte! Well build a small book list that allows us to add and remove books from our reading list. The final result will look something like the image below.

Well start by scaffolding our project from a project template. Well use the official Svelte template. Alternatives would be to use a Vite-powered template or to use SvelteKit, a framework on top of Svelte for building full-fledged apps with built-in routingbut well keep it as barebones as possible for this tutorial.

After downloading the template, switch to its folder and run npm install, which downloads all packages we need to get going. Then well switch to App.svelte, where well replace the contents with an HTML-only version to lay out the visuals we want:

• A book

We can write the above code directly at the top level of the Svelte file; we dont need to add any wrapper elements. Sveltes syntax is a superset of HTML, so anything that is valid inside an HTML file is valid inside a Svelte file.