Workshop: 1 day
Svelte 5 & Runes
Workshop description
Svelte 5 is a major step forward from version 4 and simplifies how Svelte applications are written. Concepts like snippets and runes, Svelte 5's new set of primitives for controlling reactivity, will replace a number of current concepts that will no longer by required with runes. Yet, as these concept are newly introduced, developers need to learn and them before they can leverage them. This workshop serves as an introduction to Svelte 5's new concepts, as well as a hands-on guide to migrating from old patterns to Svelte 5 and runes.
From Svelte 4 to 5
We'll start with reviewing the differences between Svelte 4 and 5 before looking into the main changes in more detail.
The $state rune
The $state rune is at the core of Svelte 5's runes system so we start with that. We'll cover it's core behavior and implement some examples together.
The $derived rune
The $derived rune replaces Svelte's $: syntax. We'll look into how the rune works, subtle differences to $:, as well as how to migrate to it for typical scenarios.
The $effect rune
Next, we move to the $effect rune. Like for the $state rune, we'll implement some examples and talk about typical use cases.
The $props rune
The $props rune replaces a number of previous concepts around declaring, and receiving properties in components. We'll look into how the rune works as well as how to migrate to it for typical scenarios.
Introduction to JavaScript signals
Once we covered runes, we'll briefly look into JavaScript's upcoming signals primitive which runes are based on. We'll cover the fundamentals of signals and how they might eventually establish a cross-framework reactivity primitive.
From Slots to Snippets
Snippets are a new concept in Svelte 5 that replace slots which are less powerful and flexible. We'll look into how snippets work, what new patterns they enable, and how to migrate from slots to snippets.
Automating the Migration
At least parts of the migration from Svelte 4 to 5 can be automated. We'll look into how that works, what to be aware of, and how to resolve situations where automatic migration fails.
Your mentor
