Coding with Jesse

Svelte 5 is here!

In case you missed it, Svelte 5 was finally released!

It's been here for a while as a pre-release, but I held off on using it until it was finalized. (I didn't want to learn how to use the new syntax and then have to un-learn and re-learn as the team reworked things and added or removed functionality. But now these decisions have been finalized, the syntax is cemented, and I'm excited to start trying out these new ways of doing things.)

Svelte 5 marks a significant change in the language itself. "Runes" are a new way of writing reactive code with Svelte. This allows a major simplification of the API and surface area of Svelte, making Svelte easier for beginners to learn and use. I think it was a smart move, as it surely makes it easier for people to switch to Svelte.

For those of us who are already deeply invested in Svelte, the new syntax will take some getting used to. Fortunately, the old syntax will continue to be available until Svelte 6 or 7 is released, so we have some time to adapt and learn. Also, there is a migration script. I haven't tried it yet, but it should automatically switch your code over to the new syntax.

Some of the more "magic" Svelte features, like the reactive $: statement, are now deprecated. So are some features I really loved, such as being able to add modifiers to event handlers like on:click|preventDefault. Stores will continue to be supported, but there is some pressure to switch over to using runes instead. I haven't made up my mind yet as to whether I'll rewrite all my stores with runes, or whether I still prefer how stores work in some cases.

I'm also excited that this marks the beginning of a new chapter in the Svelte story. I think it's similar to when React introduced hooks, and changed the way we write React code. I can't imagine hooks will ever go away, and similarly I think runes are here to stay.

If you still haven't tried out Svelte, I think this is the perfect time to learn it. It's already a very mature platform, and this recent change means things will likely be quite stable from here on out. I started using Svelte in production in 2019, and I haven't looked back.

To read more about migrating to Svelte, including all the new syntax, check out the well-written Svelte 5 migration guide. Be sure to click on the "Why we did this" sections for more background and context on the reasoning for the changes. I found these to be very helpful to understand the logic around the changes.

Published on October 29th, 2024. © Jesse Skinner

About the author

Jesse Skinner

Hi, I'm Jesse Skinner. I'm a web development coach & consultant. I teach web development teams how to scale up their server infrastructure, improve automated testing and monitoring, reduce costs, and modernize their legacy systems. I focus on empowering teams through customized training and coaching.

Feel free to email me. I'm eager to hear about your challenges and see how I can make your life easier.