Svelte is like vanilla JavaScript, but better.
JavaScript. A programming language that no one likes to write vanilla code for. It's not abstract or fun to use vanilla JavaScript when making a website. Svelte changes this. It's a JS framework that's similar to vanilla JS but has features that make it superior to vanilla JS. It's mainly praised by the "Vanilla JS-like" users.
Example (Vanilla JS)
<!DOCTYPE html>
<html>
<head>
<title>Counter</title>
<meta charset="UTF-8" />
<style>
#counter {
font-family: sans-serif;
}
</style>
</head>
<body>
<h1 id="counter">Count: 0</h1>
<button id="button-counter">Increment</button>
<div id="app"></div>
<script src="./index.js"></script>
</body>
</html>
And the following ./index.js:
const button = document.getElementById("button-counter");
const title = document.getElementById("counter");
let count = 0;
button.onclick = () => {
count++;
title.innerHTML = `Count: ${count}`;
document.title = title.innerHTML;
};
This makes a basic HTML page with a button that increments the number inside the h1 element.
However, making two (or one or three, depending on whether you split the HTML, CSS, and JS into separate files) and writing this code is unfun
For one, you can accidentally mistype an id on the button or h1 element, resulting in an error when clicking the button. Maybe you wrote
// This will make the `onclick` event throw an error!
const button = document.getElementById("counter-button");
instead. HTML IDs are specific on what you are trying to grab from the DOM (Document Object Model)
Secondly, it's not type-safe. What if you accidentally write
title.innerHTML = count;
title.innerHTML is a string, but it's being assigned a number value. That's not good.
Lastly, Vanilla JS won't scale well for large projects. This is a simple HTML page, when you make a large page, it starts to suffer, horrendously.
Example (Svelte)
SvelteKit already makes an HTML file for you, so I'll go straight into the Svelte part.
<script lang="ts">
let count: number = 0;
// This is a reactive statement
$: document.title = `${count}`;
function increment() {
count++;
}
</script>
<h1 id="counter">Count: {count}</h1>
<button on:click={increment}>Increment</button>
<style>
#counter {
font-family: sans-serif;
}
</style>
See how beautiful 💅 it looks? Concise, type-safe (thanks to TypeScript), and all are inside one file. Plus, no HTML IDs to target anything. 😎
Example (React)
Why not? React is the most used framework (So used in fact that this website uses it, albeit with Next.js)
import { useState, useEffect } from "react";
const Page = () => {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `Count: ${count}`;
}, [count]);
function increment() {
setCount(count + 1);
}
return (
<>
<h1 style={{ fontFamily: "sans-serif" }}>Count: {count}</h1>
<button onClick={increment}>Increment</button>
</>
);
};
This is better than Vanilla JS, but it's not Vanilla JS-like. Vanilla JS lacks useState and useEffect hooks.
React JSX is more so its own thing than Vanilla JS.
Should you use Svelte?
Yes. It's fun, Vanilla JS-like, and supports TypeScript. Highly recommend it for anyone interested.