Rich Harris | Svelte 5: Beyond Components | ViteConf 2024

(upbeat music) - Hey friends, Rich here from the Svelte team. I'm gonna keep this video nice and quick because the team is currently in crunch mode putting the finishing touches on Svelte 5. Svelte 5, you say? Tell me more. Well, okay, I'm a little offended that you even need to ask, but I'll explain. A little over a year ago, we started doing something that you should almost never do, a ground up rewrite.

Why would we do something so controversial and yet so brave? After all, according to survey after survey, developers love Svelte. People can't get enough of it. I mean, look, if React is Taylor Swift, then we are more of a, I don't know, Phoebe Bridges. She's critically acclaimed. You've heard of her, but you probably can't name that many of her songs, but we're clearly doing something right, right? Well, yeah, but after working on Svelte for a few years, we came to realize that we're also doing a bunch of stuff wrong. So let's rewind.

What is Svelte and how did it work up until now? Svelte is a framework for describing user interfaces on the web. We've got some markups, some styles, and some JavaScript all working together in harmony, but Svelte is also a compiler. It takes it coders input and generates some vanilla JavaScript as this output that surgically updates the dom when state changes. For example, it knows that it needs to update this piece of text when doubled changes, and it knows that doubled changes when count changes because it can see this count times two expression,

and it knows that count changes when we click the button because it can see the count plus one assignment. In other words, we've turned JavaScript into a reactive language without all of the overhead of rerunning code and diffing stuff. Now this idea works pretty well. It's easy to learn, easy to write, it's very fast, very memory efficient, and people have been very successful building stuff with it. But it comes with some limitations. For example, if I move this code into a function, the compiler can no longer see it and the text doesn't update.

If I have my very large object with many properties and I update one of them, anything that cares about my other stuff will also get invalidated. And if I mutate an array, nothing happens until I tell the compiler that it's been invalidated. But perhaps the biggest limitation is that the variables that become reactive like this are the ones that are declared at the top level of a component. If I wanna have some reactive state that's, for example, shared between multiple components, then I need to offer things in a completely different way.

Svelte 5 fixes all that. Instead of having implicit component-based, compiler-driven variable level reactivity, we now have explicit universal runtime-driven fine-grained reactivity. If we migrate our example component from before, we are now annotating count and doubled with something we call runes. And beyond components, we can also use runes in JavaScript and tight script modules as long as they have .svelte in the name. So we can easily share reactive state and encapsulate logic. In some ways, we're becoming more like other frameworks in

that we're using signals as the basis for our reactivity, but we're also very much doing our own thing. Because we're a compiler, we can have better ergonomics around signals. Candidly, we don't think other frameworks have nailed this and we can have better performance, at least according to this third party benchmark. There's so much more that I'd love to share with you about Svelte 5, but for now, I'll leave it at this. Svelte 5 is gonna be easier to learn. The framework is simpler than ever. It's gonna be easy to use. You'll be able to write even less code, and you'll be able to write better apps smaller, faster,

and more robust. And perhaps biggest of all, this rewrite is a foundation for a ton of ideas we have for the coming years of web development. It's coming real soon, and I hope you'll give it a try. Before I go, because this is ViteConf, I'm gonna talk momentarily about SvelteKit, which is our Vite powered application framework. One of the things that we're most excited about is the environment API coming in Vite 6. When you build a SvelteKit app, you can run it wherever JavaScript runs on Node, on Bun, on Dino, on Cloudflare. Or if you're a person of good taste the cell,