Awais Tahir - BlogSvelteKit Unleashed: Transforming Web Development with Ease

What is Svelte?

Svelte is a JavaScript-based framework that we can use to efficiently create performant websites and applications. Though it is a framework, it is commonly referred to as a compiler because it compiles code written in Svelte to highly optimized JavaScript code.

Svelte was developed by Rich Harris in 2016. It takes a different approach from other web frameworks by compiling components at build time instead of runtime. This means that instead of shipping a bulky JavaScript framework to the client at runtime, Svelte compiles the code into highly optimized JavaScript at build time. This approach allows us to ship as little code as possible to the client, resulting in faster load times.

One of the main reasons why developers are drawn to Svelte is its simplicity and readability. It has a low learning curve, and its syntax sticks closely to the classic web development model of HTML, CSS, and JavaScript. Instead of modifying HTML and JavaScript, like some frameworks do, it adds its own syntax to HTML and offers some JavaScript utilities. This makes it easy for developers familiar with these languages to get started.

Companies that use Svelte internally and externally include Apple, The New York Times, Spotify, Square, Cloudflare, Brave, Decathlon, Tokopedia, 1Password Yahoo, Rakuten, and Bloomberg.

Features of Svelte

Here are some key features that Svelte provides.

Easy DOM manipulation

Svelte has a straightforward syntax for interacting with the Document Object Model (DOM), simplifying DOM manipulation. It provides logic blocks, element directives, and component directives that simplify DOM manipulation operations.

No virtual DOM

One of the key differentiators of Svelte is its approach to handling the DOM. Unlike other popular frameworks like React or Vue, Svelte does not use a virtual DOM, which is a virtual representation of the real DOM that syncs with the real DOM and keeps it updated as an application’s UI or state changes. It avoids the extra overhead and complexity of a virtual DOM and leverages reactive programming principles instead.

Svelte compiles components at build time and generates highly efficient JavaScript code that directly manipulates the real DOM. This direct DOM manipulation results in faster rendering and improved overall performance.

Built-in animations and transitions

Animations can be tricky to get right. Luckily, Svelte provides several built-in animations and transitions that we can use in our applications. We can access the animations and transitions through the [svelte/animate](<https://learn.svelte.dev/tutorial/animate>) and [svelte/transition](<https://learn.svelte.dev/tutorial/transition>) modules, respectively.

Scoped CSS and dynamic styles

Svelte allows us to write component-specific styles using scoped CSS, which is Svelte’s default behavior. This means that styles defined in one component do not leak into and affect other components. Scoped styling not only reduces the chances of CSS conflicts. It also makes code easier to maintain. If you are familiar with styling in React, Svelte's scoped styling will feel simpler since you can forget about CSS-in-JS, CSS Modules, and PostCSS.

Besides supporting component-scoped styles, Svelte provides shorthand class and style directives for dynamically binding classes and styles to elements. See the snippet below as an example and explore this REPL to test it out.

Performance and Bundle Size

Performance and bundle size are critical considerations when developing web applications. Let’s explore how Svelte and SvelteKit fare in terms of performance and bundle size.

Summary

This brings us to the end of our initial look at Svelte, including how to install it locally, create a starter app, and how the basics work. In the next article we'll start building our first proper application, a todo list. Before we do that, however, let's recap some of the things we've learned.

In Svelte:

We define the script, style, and markup of each component in a single .svelte file.

Component props are declared with the export keyword.

Svelte components can be used just by importing the corresponding .svelte file.

Components styles are scoped, keeping them from clashing with each other.

In the markup section you can include any JavaScript expression by putting it between curly braces.

The top-level variables of a component constitute its state.

Reactivity is fired just by assigning a new value to a top-level variable.