SvelteJS: The Framework Of The Future

Alright, I’ll admit it: the title of this article was a little clickbaity. However, I still fully believe that SvelteJS has to be one of, if not the most, beautiful web frameworks. In this article, I’ll be sharing why I use it, and some of my pain points with it.

The Good

If you go to the SvelteJS website, it states three really good reasons for using SvelteJS over other frameworks, especially ReactJS:

• No boilerplate code
• It’s a compiler, not a framework
• Easier state management

No Boilerplate Code

This is probably one of the biggest reasons I use Svelte: there’s little to no boilerplate code. Let’s take a standard “Hello World” React component, for example:

const App = () => {
 return <p>Hello World!</p>
}

This is just an average React component. Notice now it’s three lines, just to draw a simple paragraph to the page. Now, what if we introduce state management? It gets rather complicated:

const App = () => {
 const [name, setName] = useState("John");

 return (
 <>
 <input onChange={(e) => setName(e.target.value)} />
 <h1>Hi, {name}!</h1>
 </>
 )
}

Let’s compare that to the equivalent Svelte code:

<script>
 let name = "John";
</script>

<input bind:value={name} />
<h1>Hi, {name}!</h1>

Notice how much more easily the Svelte code reads? While in something like a Fortune 500 company this might not be too much of a big deal, where everyone has their Ph.D.’s in their hand and have, like, super brain powers, if you’re the developer for a little startup, it’s much easier to learn Svelte as it’s structurally very similar to plain HTML.

It’s A Compiler, Not A Framework

SvelteJS is actually not a framework per se, it’s a compiler. To show the difference, let’s take ReactJS as an example. If you’re using React, you have to bundle the framework along with your code, which adds a lot of extra code and overhead. Svelte, on the other hand, compiles your files into plain HTML, which doesn’t incur any overhead.

Easier State Management

I’ve actually already shown this to you, in code examples. Notice how in React, you’d need to use all the useState shenanigans and stuff? Well, in Svelte, it’s impossible to overstate the simplicity of state (pun intended): it’s literally a JavaScript variable! Again, it’s hard to find an advantage React has over Svelte in this area.

The Bad + The Ugly

While I have been talking about the ways in which Svelte is the greatest of all time, there are still annoying points about it. The most important of which is that Svelte is still a relatively new technology. Its actual framework, SvelteKit, only got to version 1.0 not even four months ago at the time of writing, and sometimes it’s hard to find a good component library for something even though you’ve found 50 for React.

However, I really don’t have much else to criticize here. Svelte really is an amazing technology, and I’ve barely scratched the surface of what it can do. Really, the only way you can understand its possibilities is by using it yourself.