I discovered Svelte by watching this talk by Rich Harris on YouTube (which I highly recommend you go watch too). At the time, I just joined SpringTree and I was researching React for my first project. In his talk, Rich inspired me to look deeper into Svelte, which I did. Here's what I've found.

Svelte is an open-source, front-end JavaScript framework used to develop interactive web pages and web apps. Svelte was created by Rich Harris and first launched in 2016. It’s picked up popularity in the last few years. You can fit Svelte in with names like Angular, React and Vue, but it does some things very differently.

Reactivity

The main difference that distinguishes Svelte from the "big three" is the fact that it doesn't use a virtual DOM. Svelte gets most of its superpowers from the fact that it's actually a compiler. Instead of continuously checking the DOM for updates at runtime, Svelte moves all of that complexity to the compile step. This not only makes bundle sizes smaller, but can also make the deployed application much more responsive.

Beginner friendly

Svelte doesn't need elaborate syntax or imports to accomplish reactivity, because the compiler handles all that logic. This makes Svelte's syntax relate closely to native JavaScript. Novice web developers can be up and running with Svelte in no time, especially with the great tutorial on their website.

Some complex concepts are also really well thought out and made exceedingly simple. Let’s take a look at this example I swiped from Wikipedia.

<script>
  let count = 1;  
  $: doubled = count * 2;
</script>

<p>  {count} * 2 = {doubled} </p>

<button on:click={() => count = count + 1}>Count</button>

In this example we have a count that doubles at every button press. The count is stored in a regular variable, just like in vanilla JavaScript, and the button has an inline anonymous function that just adds one to the count. The real magic happens at line 3, where we experience something Svelte calls reactive declarations. We can use these reactive declarations for computed values, so they update when one of the values it’s based on changes. Cool trick, right? Admittedly the syntax is a bit unconventional, but you’ll get used to it soon enough.

This is just one of many examples, but I'll stop here to keep this post concise. I highly recommend doing the tutorial. Additionally, I've provided some links for further reading at the end.

So why aren't we all using Svelte already?

As an intern at SpringTree I would have loved to have worked with Svelte, but I do understand why some companies aren't ready to adopt this latest entry in the list of JavaScript frameworks just yet.

For the longest time, Svelte survived exclusively on community effort. It's only recently that it received backing from Vercel, by hiring Rich Harris to work full time on Svelte (and related projects). This also means that the library of packages is not as extensive as that for, let’s say, React. Personally, I think these pain points will fade with time. As the usage of Svelte becomes more widespread, the number of NPM packages will increase, and that will in turn increase the usage. Thus, answering the chicken and the egg question.

At SpringTree, we'll keep our eyes peeled for new developments surrounding Svelte and the possibility to use it in future projects. So, if you have a great idea that you would like to realize, feel free to contact us. Maybe we'll build your app in Svelte!

Are you interested in learning more about SpringTree? click here.