Front-end development can be easier! Learn how Svelte and SveteKit combine to make it easy and intuitive to build a blazing-fast, SEO-optimized web app.

Sveltekit is an officially supported framework, built around Svelte. It adds key features to a Svelte app — such as routing, layouts and server-side rendering — and makes front-end development outrageously simple.

In this tutorial, we’ll take a beginner-friendly look at both Svelte and SvelteKit and build out a simple web app showing profile pages of imaginary users. Along the way, we’ll look at all the main features that SvelteKit has to offer.

Let’s start by looking at what Svelte brings to the table.

The Benefits of Working with Svelte

Svelte is growing in popularity, and that’s for a good reason. Developing apps with Svelte is based on writing reusable and self-contained components — similar to other popular JavaScript frameworks such as React.

The big difference comes with its build-time compilation — as opposed to a run-time interpretation of the code. In other words, Svelte already compiles your code during the build process and the final bundle only contains JavaScript that your application actually needs. This results in fast web apps with small bundle sizes.

Other frameworks only parse and bundle up the code you’ve written, essentially taking the component tree as is and shipping it to the client. In order for the browser to be able to interpret it and update the UI, a lot more code needs to be delivered and additional work is done on the client side.

Other than that, Svelte is an ideal framework for beginners. Everyone who knows how to write HTML and how to include <style> and <script> tags with basic JavaScript and CSS can already start writing Svelte components.

#sveltekit #svelte #web-development