2023-03-27

Over the span of a month I built a personal RSS reader.

For the web client I used Svelte and SvelteKit, mostly as a way to evaluate whether I’d use the tools in larger projects.

Here are my thoughts on Svelte.

TL;DR

I enjoyed the Svelte experience on the whole. Highlights are the component format, built-in stores, and the event dispatcher API. Lowlights are reactive statements ($), await blocks, and built-in transition and animation APIs.

Component format

Svelte’s component format is my favorite thing about it. When you write .svelte files, your default context is the same as the browser’s: HTML.

This snippet from the Svelte docs (with some example markup, JS and CSS added) is illustrative:

<script>
  
  function add(a, b) {
    return a + b;
  }
script>


<p>1 + 2 is: {add(1, 2)}p>

<style>
  /* styles go here */
  p {
    color: blue;
  }
style>

Contrast this with React, where JavaScript is the default context and HTML is interleaved via JSX:

import '../some-styles.css'; 

export function SomeComponent() {
  
  function add(a, b) {
    return a + b;
  }

  
  return <p className="some-class">{`1 + 2 is: ${add(1, 2)}`}p>;
}

It’s hard to pin down why this approach is great in real terms. You can’t really say “Svelte’s component format makes our team X times faster when building components than with Y framework” with any certainty.

I think that the component format is a big part of why people say they enjoy working with Svelte. There’s a temptation to explain it as there’s less context switching since the browser thinks about HTML first too, but I’m not sure that holds water. Either way, I like it.

Built-in stores

Svelte comes with built-in stores as an option for state management.

What should and should not be the concern of a user interface library/framework is a contested topic. I like that Svelte acknowledges that state management is a problem you will probably have and gives you a solution you can use or extend if you want to.

It’s also nice that this solution isn’t strongly linked to the component tree like React context is.

Event dispatcher API

Svelte has a built-in API that lets you create a CustomEvent, dispatch it, and listen for it on parent elements.

It’s difficult to have an answer for the web’s event model in systems that are built on the concept of a unidirectional data flow. By nature,