logo Zack Webster
Development

Why is Svelte better?

4 min read

If you build websites, you’ve likely heard about Svelte, the most desired JS framework according to StackOverflow’s 2023 Developer Survey. But what’s so special about Svelte, and why should you think about using it for your next project? In this blog post, I’ll share why I like Svelte and why you might too!

What is Svelte?

Svelte is an open-source JavaScript framework for building user interfaces (UIs). It is designed to create efficient and highly performant web applications by shifting much of the work from the browser to the build step. Unlike traditional frameworks where the bulk of the framework code runs in the browser, Svelte moves this process to compile time.

About SvelteKit

SvelteKit is a higher-level web framework (like Next.js) built on top of the Svelte, designed to streamline the development of complete web applications. It introduces powerful features such as a flexible and integrated routing system, layouts for consistent page structures, server-side rendering (SSR) for improved performance and search engine optimization, and support for static site generation (SSG).

SvelteKit extends the capabilities of Svelte, offering developers a comprehensive and efficient solution for building modern web applications.

Alright, with introductions out of the way, let’s dive into what makes Svelte better…

Fast Follower Advantage

Svelte launched in 2016, which is pretty recent compared to names like React and Vue. Rich Harris, the person behind Svelte, learned from the experiences of these older frameworks. Svelte stands out because it deals with performance issues and makes development simpler through its unique features like compile-time approach, straightforward syntax, and simplified reactive model.

Easy to Learn

Svelte has a simpler syntax and is more related to HTML and CSS than React, which makes it easy to pick up. There’s no virtual DOM. This simplifies the mental model for developers, as you don’t need to understand how the virtual DOM works or manage its optimization.

Svelte reduces the amount of boilerplate code compared to other frameworks. It doesn’t require you to write as much setup or framework-specific code, leading to a more concise and readable codebase.

Sweet Syntax

If you know HTML, CSS and, JS you probably know like 80% of the Svelte syntax. There’s only a few additions and concepts beyond that.

Here’s a sample of a basic application made with Svelte:

<script>
  let text = "Hello World";
</script>

<p>{text}</p>
<input bind:value={text} />

Below is a code snippet from the same application built with React:

import { useState } from 'react'

export default function InputHello() {
	const [text, setText] = useState('Hello world')

	function handleChange(event) {
		setText(event.target.value)
	}

	return (
		<>
			<p>{text}</p>
			<input value={text} onChange={handleChange} />
		</>
	)
}

I find Svelte’s approach a lot cleaner, there’s a lot less boilerplate code.

Ecosystem

Unlike traditional frameworks that often require wrappers or adapters to incorporate external libraries, Svelte offers a more direct and intuitive approach.

In the Svelte ecosystem, the absence of the need for wrappers means developers can seamlessly leverage existing web libraries without the additional overhead of adapting them to fit within the framework. This simplicity not only streamlines the development process but also makes it easier for developers to work with their preferred tools and libraries.

However, the flexibility of Svelte doesn’t mean it lacks support for convenience or specialized use cases. On the contrary, there is a growing repository of libraries available within the Svelte community.

Big Companies Trust Svelte for Major Projects

Does it scale? You are wondering if Svelte is ready for the world. Well, glad you asked. It’s powering applications from top players on the web with millions of users.

  • Apple
  • Spotify
  • IBM
  • New York Times
  • Yahoo
  • Avast
  • Philips
  • Yelp
  • NBA
  • IKEA
  • GoDaddy
  • Square
  • Cloudflare
  • Brave
  • Decathlon

Similarity to other Frameworks

While SvelteKit does a lot of things it’s own way, it follows a lot of the same conventions used by many other frameworks and so you are on familiar lands. The knowledge you pick up learning SvelteKit also helps you learn other frameworks and vice-versa.

Less Competition

When you pick up SvelteKit you also enter a market with few providers. Since SvelteKit is fairly niche and mostly preferred by developers who value DX, you are likely to come across projects with enthusiastic people, which is always fun. It’s a nice addition to your tool set & opens you up to more opportunities.

Created by Rich Harris & Backed by Vercel

Rich Harris is renowned for his creation of several popular open-source projects, and brings a fervor for Developer Experience (DX), accessibility, and performance. Before Vercel he was an award-winning journalist at The Guardian and The New York Times.

Joining Vercel enables Rich to work on Svelte full-time, giving the project its first dedicated contributor. The governance of Svelte does not and will not change – it’s still the same independent, open-source project and community. With Vercel’s backing, Svelte can get even more ambitious.