Svelte Might Be the Only Front End Framework You Need

To be honest, when I came upon Svelte, I had a moment of hesitation to even check it out. I hovered my cursor over a link to the documentation and thought to myself, “I’ve already learned so many front end frameworks. Do I really need this?” With a deep breath, I clicked to view the docs and I’m certainly glad I did. Svelte is a framework in its own league.

What is it?

Svelte is a reactive, component-based, front end framework that compiles down to lightweight, vanilla JavaScript. Instead of requiring the entire framework to run, only the pieces needed get bundled with your app, making it small and performant. That’s because Svelte is essentially a compiler. The majority of the logic happens during build time—not during runtime.

Svelte developers don’t have to think about what’s under the hood for it to be useful however. Writing Svelte is super intuitive! It borrows great ideas from other frameworks, like Vue, React, and Angular, but simplifies them, making it easier and more comprehensive for developers. Here’s a simple component example:

<script>
  let count = 0

  function incrementCounter() {
    count++
  }
</script>

<p>Your count is at {count}</p>
<button on:click={incrementCounter}>
  Increment
</button>

As you can see, this is a basic counter that increments the count every time you click the “Increment” button. I think you’ll agree, the component structure is dead simple. It’s vanilla JavaScript with a little syntactic sugar.

Blend of Vue, React, and Vanilla

At first glance, Svelte components look strikingly similar to Vue single file components. They have optional script and style tags, which work similarly to Vue components; however, there’s no template tag in sight. This is because in Svelte, you can just plop your markup right in your component with no need for a redundant wrapping elements (I’m looking at you Vue). I never knew how freeing this could be.

No Boiler Plate

Unlike Vue, there’s no exported object literal, function, or class in the script. In fact, there’s no boilerplate in sight. You literally just write plain JavaScript in the script tag with zero encapsulation. Normally, I’d feel really gross about this, but Svelte components get encapsulated during the compilation process. This allows us to write lean, straight to the point, components.

Interpolating JavaScript into your markup feels a lot like React—you use single curly brackets to wrap code, which gets evaluated and its output gets injected into your document. I feel this feature is fairly self-explanatory, since curly brace brackets have been with us for nearly a decade, but it’s worth mentioning.

Compiles Vanilla JavaScript

The biggest win of Svelte, in my opinion, is that your entire app compiles down to a standalone JavaScript bundle. In other words, everything your app needs to run is included in your bundle—nothing more, nothing less. This means smaller bundle sizes, but also makes Svelte incredibly versatile.

For instance, maybe you’re not building a single page application and simply want some front end sugar on a page or two of your WordPress site. In that case, you can use Svelte to create mini applications and build them to separate bundles to be loaded on a page to page basis.

Or perhaps you’ve got a really cool Svelte component that you want to drop into a Vue or React application. The fact that Svelte compiles down to vanilla JavaScript means it will play nicely with other frameworks. I’ve done some experimentation with this. I recently wrote a simple Flesch Reading Ease Gauge app in Svelte that analyses text for its reading difficulty level. I made wrappers for Vue and React, so you can include the component in either framework or use it as a standalone. This gives multiple tech stack options, which makes it incredibly reusable. I haven’t done any performance testing; however, even if wrapping a Svelte component takes a small performance hit, it’s probably worth it. Imagine having a library of reusable components that just work everywhere!

To Sum it Up

Svelte is great framework option if you’re starting a new project or extending an existing one. Honestly, I’m looking for excuses to use it in production as often as possible. I recently added the Flesch Gauge app to my employer’s blog, which is built on Laravel and Vue, and despite it being written in a foreign framework, it blended in beautifully.

So, if you’re wondering if you should use Svelte on your project, I’d say go for it! It’s already on version 3, so it’s not exactly brand spanking new or lacking in development. However, it’s not completely without quirks either. I’ve run into issues that have since been fixed, but something to be aware of going in. Anyways, the documentation has tons of examples and tutorials, so it’s not very hard to get started. Go make something awesome!