Sneak Peek at Svelte 5 | Learn to Embrace Change

Svelte 5 is coming and with it the addition of Svelte 5 Runes, a replacement for the let, =, export, and $: that we use in Svelte today. Runes replaces this old syntax with function syntax to achieve the same old things and more. In this episode, Matt and Mike discuss a brief history of Svelte before diving into what was shown off so far about Svelte 5 Runes. The duo then discuss the learning experience for those studying Svelte 4 and whether they should stop and wait for Svelte 5. This leads to a debate about keeping websites up and running with maintenance, and how updates like Svelte 5 can help or hurt a site in production.

Show Notes

What you'll learn in this episode

Svelte 5 Runes
Embracing change
Our thoughts on upgrading from Svelte 4 to Svelte 5 for production apps and people still learning
Keeping sites maintained versus upgraded to the cutting edge

How to support the show

Patreon

Prices subject to change and are listed in USD

Support the show from as little as ~$1/month
Get a shoutout at the end of the episode (while supplies last) for just ~$3/month
Help support the HTML All The Things Podcast: Click Here

Scrimba Discount!

We receive a monetary kickback when you use our link

Learn to code using Scrimba with their interactive follow along code editor
Join their exclusive discord communities and network to find your first job!
Use this URL to get 10% off on all their paid plans: https://tinyurl.com/ScrimbaHATT

Topics

History of Svelte

Released November 26, 2016 (6 years ago) created by Rich Harris
The biggest difference from other frameworks is that the code runs through a compiler which removes all the unnecessary Svelte framework code and outputs just what is required in terms of HTML, CSS and JavaScript to run the application
It also had a very simple and JavaScript-like syntax that was easy to get ramped up on
Let x = 2 on the top level of a Svelte component immediately made that variable reactive. Meaning you could use it in the html template and whenever it was updated in javascript it would automagically update the UI

Svelte 5 Runes

https://svelte.dev/blog/runes
$state
$derived
- computed*
$effect
- On DOM content loaded + state change
$props
The paradigm shift from simple magic to explicit magic
- The actions are much more defined now
Ability to use any of the runes outside of .svelte files (.js .ts)
- Huge for library authors to externalize and reuse logic
Signals vs Hooks
- Hooks are referring to how React handles state changes
- Usually hooks are limited to be used explicitly within the react components and potentially their children (useContext)
- Signals are easier to externalize into different files and will work regardless of what component they are in
- Easier to manage the state in a simple way

Don’t be afraid of change

Discussion with Matt on how he feels about change while learning something new
The pushback this is getting and why

Sneak Peek at Svelte 5 | Learn to Embrace Change

Listen

Who’s in This Episode?