Dev it all

Rich Harris’ baby has been around for a while now and it’s gained steady traction along the way. I’ve had it on the back burner in my head as it’s definitely down my alley. I enjoy the SFC way of creating components, that’s why I’ve always latched onto Vue.

Svelte does this differently, in some ways better and some ways, slightly more complicated.

I’ve used it for some production-ish apps, like this blog and I dropped it into Astro for my personal site.

The blog was all bootstrapped with SvelteKit and it was a delight. I had some niggles with typing in my .svelte files at first but it wasn’t anything to do with Svelte or the editor, it was just me not setting a lang prop. Big dumb dumb right.

Some good bits

It was just a quick syntactical brain switch to get going. Props are handled elegantly and clearly like so:

<script lang="ts">
	export let thingy;
	export let hello = 'Hello World!';
</script>

You can see how default values would be set up and you can use TypeScript typing as you would expect to.

Both of these variables would be available in your template by default. Same for if you decided to set up a let in there for some other standard data! Just like you would the data() method or using a ref in Vue.

Another thing that was honestly just a nicety but felt.. not more natural.. just simpler:

<script lang="ts">
	export let thingy;
	export let hello = 'Hello World!';
</script>

<div>
	<h1>{ hello }</h1>
</div>

That’s the template added in. No template tag wrapping or anything like that, it just works like that. It feels like you’re just popping extra bits of juice into HTML and blasting off to magical future HTML JS magic land…

You can do that in pretty much any order. So, the script tag can be placed below the template instead.

How about styling?

Calm yourself young one.

That’s super easy too:

<script lang="ts">
	export let thingy;
	export let hello = 'Hello World!';
</script>

<div>
	<h1>{ hello }</h1>
</div>

<style>
	h1 {
		color: tomato;
	}
</style>

Just like that, you can drop in some scoped styles and they tag up with generated classes to keep them only for this guy!

Cool right!?

From here there is a lot you can do. You can use different CSS preprocessors; like Sass and Less, import all sorts of things; components, other packages, styles as .{css|scss|less} files, there are template controls; like {#if}, {#each} or {#await promise} (the latter acting essentially the same as Suspense from other frameworks).

All this baked in goodness.

If you want to see what it can do and learn it all as you go. There’s a great tutorial on the Svelte website.

A couple of bad bits

This just ties into how often you use it as once you’re swapped over it’s not a bother.

A computed value, akin to what you’d find in Vue with the computed property or composable goes like this:

<script lang="ts">
	let start = 1;
	$: doubled = count * 2;
</script>

<span>{ doubled }</span>

This is odd and if you’ve read anything about what that $ sign means you’ll know it’s an old-school but still useful JS feature called a label.

As I said, it’s weird. However, once you’re used to it you’re golden.

In summary

I should have done a bit more with the framework before writing this post but I got excited so here we are.

There are an absolute, metric houseboat-load of features that I haven’t covered.

Stores are cool and built-in, they are similar to other analogous features in other frameworks.

The Motion API is sound too and works pretty well. I’ve only used it on simpler animations but I’m sure it can be pretty useful before you extend your gangly arm into the npm-o-sphere for something more… powerful.

So yeah, give Svelte a try. It’s sweet and you won’t be let down. It’s also one of the fastest frameworks out there you know, it’s compiled and that makes a big difference.

I wonder if there’s anything faster though, with some other cool feature. I’ll have to signal out to the ether and see if I can find anything more Solid for you guys in future…