Speed Tally

This is a minimal Sveltekit SPA that I created when trying out Svelte for the first time. I use this application weekly to calculate point totals for board games.

What do I like about Svelte so far? Runes syntax is refreshing, especially after working with React for more than a year. This framework feels like it has all of the power of React without any of the restriction. Specifically for this app, there are just a few runes that make it work:

//All we need is a single piece of state
let enteredValues: number[] = $state([]);

//All other values are derived from enteredValues
let totalValue = $derived(enteredValues.reduce((a, b) => a + b, 0))
let valueCount = $derived(enteredValues.length);
let averageValue = $derived(totalValue/valueCount);

The built-in transitions are also nice. You can remove an element from the dom AND apply a transition without additional CSS.

The only thing I don’t love is the templating syntax, but even that is just cosmetic. It’s very similar if you’re coming from something like Handlebars or Liquid. I’ll hopefully do more with Svelte in the future.