tldr; Out of every JavaScript framework out there, why Svelte?

Foreward

If you have at all been involved in the JavaScript game for the past five or so years, you have witnessed the birth of a metric ton of new frameworks. Stealing a meme from Fireship, this is how it feels sometimes as a JS dev:

Every two weeks in the JS ecosystem

I can promise you that this churn isn't going to stop anytime soon. By the time you finish reading this, I bet the framework comparisons will be out of date, and like all design decisions: choosing a framework incurs tradeoffs. In this post, I will try to explain why Svelte in combination with SvelteKit is the chosen JavaScript framework for 🦄.

What even is Svelte?

As a primer, I highly recommend you watch the below video:

So why not React?

I do not consider myself a React expert, but I have used it for a few years now.

I started out as a React web dev in the very first training cohort from the Airmen Coders program, and most people who go through bootcamps like this one end up using React. I have nothing against React, and I think it's a great framework; but it does possess some major downsides:

  • React is a library, not a framework. This means that you have to bring your own router, state management, and other tools. This is fine, but it means that you have to learn a lot of different tools to get a React app up and running. This is a big barrier to entry for new developers, and it means that React apps tend to be monolithic and hard to maintain.
  • React is a DSL. This means that you have to learn a new language to write React apps. (JSX + React Hooks + React Functional/Class Components)
  • React gets slow too quickly (opinion) I have found that React apps tend to get slow and bloated with time and require additional dev cycles to optimize. This is partly due to the fact that React utilizes the virtual-dom pattern, a core design decision that isn't going to change anytime soon.
  • React's ecosystem is huge. wait you may be saying, isn't that a good thing? Well, yes and no. It is great that there are so many tools and libraries to choose from, but it also means that for every tool you npm install, you are adding that much more vulnerability surface area to your app. (just using create-react-app adds 1,500+ packages to your app)
  • React's lifecyle management is a mess. I have found that React's lifecycle management is a bit of a mess, and it's easy to perform bad state management practices to get to a working app. (yes if you are performing good code reviews, following best practices, have a thorough understanding of JavaScript + React rendering, and are using a linter, you can avoid this, but it's still a pain point)

There are other reasons why one would not choose React in 2022, but these are the biggest ones for me.

React's popularity isn't a factor in my mind for adoption. Usability, performance, developer experience, vulnerability, and maintainability are much more important factors.

Why Svelte?

Some of these key points were stolen borrowed from https://escape.tech/blog/from-vue2-to-svelte/

Per the Svelte website, it champions three key features:

  1. Write less code - article
  2. No virtual DOM - article
  3. Truly reactive - article

With this, Svelte is designed around writing as little, but still readable, JavaScript as possible while delivering high performance.

For instance, this is a simple counter app in React:

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
}

export default Counter;

And here is the same app in Svelte:

<script>
  let count = 0;
</script>

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

Much easier to read right? This is because Svelte is a compiler, not a library. It compiles your code down to vanilla JavaScript.

In addition to readability, Svelte also has a few other features that make it easier to write less code:

  • No need for any <div>, <> </> or <template> wrappers like in React/Vue
  • Styles are component scoped by default
  • Conditional logic and loops are built in (no need for ternary operators or map functions)
  • Since Svelte makes vanilla JS apps, you can use any JS library you want (no need for React hooks or Vue composition API)
  • Easy cross-component communication with stores, context, etc...

SvelteKit

SvelteKit is the official Svelte framework for building web apps. It is a primarily server-side rendered framework that uses Vite under the hood for building (think of it as the Next.js for Svelte).

For current 🦄 design patterns, we are using SvelteKit with the static adapter and server-side rendering (SSR) turned off.

I have omitted some of the SSR features from this post because they're not relevant to our current design patterns.

The main features SvelteKit provides are:

Why not Vue/Angular/Solid/Blazor/Next/Insert Framework here?

Yes I know that there are other frameworks out there that are great:

State of JS 2021

At the end of the day, design decisions are all about tradeoffs. I have found that Svelte w/ SvelteKit is the best frontend experience because it combines the best features of many others, while minimizing the downsides:

  • Great performance + small bundle size (the less JavaScript you ship to the client, the better)
  • Simple syntax (closest to vanilla JS as possible) that combines the best parts of React and Vue
  • Minimal dependencies
  • Excellent documentation + tutorial system
  • Easy state management (an oxymoron if there ever was one) in combination with data fetching
  • Easy routing (after learning some SvelteKit concepts)
  • Easy to learn (if you know JavaScript, you can learn Svelte in a day)

I am available at all times to answer questions about Svelte or convince you why your framework sucks isn't the best for 🤺🦄.