In my early days as a web developer, jQuery was all the rage. As I grew my skills and became professional, Angular 2 came out and it felt like a breath of fresh air. Then React dominated the market and became my go-to framework. That was all until I discovered Svelte.
Svelte is a component framework, like React, Angular, and Vue, but with some significant differences. It was created by Rich Harris back in 2016 out of his frustration with other frameworks. It started as an experiment, a hypothesis that a purpose-built javascript compiler, doing away with all the annoying abstractions and the unnecessary boilerplate code, could generate rock-solid production code that delivered a superior experience both to the end-user and the developer. Since then, Svelte has gone a long way in transforming its initial hypothesis into a solid promise.
Despite being relatively new, Svelte has amassed a very enthusiastic, vibrant community and it was recently voted both the most popular framework and the one with the most satisfied developers.
In a world filled with so many web frameworks and new ones popping up every day, it’s easy to mistake Svelte as “just another JavaScript framework”. It certainly was my presumption when I first heard about it, but after being exposed to it several times, curiosity won out. As soon as I tried it on a personal project, I realized that it was a true breakthrough. Using Svelte feels so natural that it reminds me of how I felt when I switched from jQuery to Angular for the first time.
Svelte adheres closely to native HTML and Javascript APIs making it feel extremely familiar. If you have never seen Svelte syntax before, here is what a simple component looks like:
<script lang="ts">
let name = 'Nikos';
</script>
<p>Hello there {name}!</p>
<style type="postcss">
p {
font-size: 16px;
}
</style>In contrast to other frontend frameworks that introduce a lot of abstract concepts and boilerplate code, Svelte uses plain HTML, CSS, and JavaScript together. ~This beginner-friendly syntax makes it easy to understand what’s going on.~
Svelte does not enforce any specific syntax for how you define methods, how you update your state, etc. Syntax rules are all vanilla JavaScript and only a few simple conventions are added where appropriate for convenience. This simple fact cannot be overstated and it truly is brilliant both in its simplicity and its effectiveness.
Each .svelte file is a single component, exported by default. A valid component can be as minimal as a single HTML tag.
The mantra of Svelte is to “Write less code”, which translates into fewer bugs, less time and effort, more accomplishments, and more satisfaction. According to Rich Harris, a simple addition of two numbers takes a whopping 70% fewer characters in Svelte compared to React! This translates into real cognitive savings that have a cumulative effect over time. Removing all the noise allows you to focus on what really matters.
A big reason Svelte is so popular is how easy it is to use for beginners. If you are familiar with JavaScript, HTML, and CSS, you can easily create your very own dynamic web applications in Svelte. There are no framework-specific state wrappers, complicated boilerplate for making code reactive, or special markup that translates into HTML. In addition to its ease of use and effectiveness, Svelte offers engaging tutorials that you can complete directly from your browser, well-written documentation, and an online playground.
To manage state, React uses useState() and setState(). It doesn’t feel like true reactivity, if you have to explicitly specify to the framework that you’re about to update the state. Svelte on the contrary has removed any kind of “state update” middleware, and just relies on variable assignments to detect state changes. Not only does this feel natural, but it is an example of true reactivity, since the update occurs automatically whenever a state variable is updated.
With Svelte, there is no need for complex third-party state management tools like Redux. Writable/Readable stores are provided as built-in features. To read the store you simply prefix it with the $ sign, which automatically subscribes you to the store, listens to changes and unsubscribes automatically.
<script>
import { writable } from 'svelte/store';
let count = writable(0);
</script>
<!-- By prefixing count with a $, we auto-subscribe to its updates -->
<button on:click={() => {$count++}}>
Clicked {$count} {$count === 1 ? 'time' : 'times'}
</button>If you want some code to execute every time a variable changes, you can use reactive declarations. It’s as simple as putting a $: label in front of the statement, and it automatically becomes reactive!
<script>
let count = 0;
// A message will be displayed in the console
// every time count is updated
$: console.log(count);
</script>
<button on:click={() => {count++}}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>Svelte is more than just a web framework: it’s a compiler. It converts your code into vanilla JavaScript, which runs in the browser without any additional dependencies. This seemingly simple shift in architecture makes Svelte fundamentally different from other non-compiled frameworks. Out of the box, Svelte unlocks more power, speed, and smaller bundle sizes while simultaneously enhancing the experience both for end-users and the developers themselves.
Unlike most frameworks such as React that do most of their work in the browser, Svelte compiles into framework-free vanilla JavaScript, converting your components into highly efficient code that efficiently interacts with the DOM. This allows you to create applications that are lightning fast, load in milliseconds, and have impressively small bundle sizes.
The compilation step allows Svelte components to be truly portable. The components built with Svelte are small, fast, and do exactly what you intended; nothing more, nothing less. The end result is so lightweight and performant that it can be easily incorporated into existing projects. That’s right, you can start using Svelte with any project right away. By using Svelte Components alongside React or Angular, you can phase out a legacy application at a fraction of the cost of rebuilding it from scratch.
Not only can Svelte be used with any project alongside your existing codebase, but it can also be executed wherever you want it to be executed. Svelte can be executed in the browser, on the server or even on a low powered device. It makes no assumptions about your environment and it can adapt based on your requirements. Svelte is an excellent candidate for code running on the Edge, such as Cloudflare Workers, or in a smart appliance such as a SmartTV. Thanks to its very small size Svelte can stay responsive, snappy & agile across any hardware.
If you want to use Svelte to build web applications consider using Sveltekit, the official meta framework for Svelte, offering flexible filesystem-based routing. Sveltekit is to Svelte as Next.js is to React and Nuxt.js is to Vue.