Workshop Content

1. 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.
2. 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.
3. 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.
4. The $effect rune: Next, we move to the $effect rune. Like with the $state rune, we'll implement some examples and talk about typical use cases.
5. 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.
6. Introduction to JavaScript signals: Once we've 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.
7. From Slots to Snippets: Snippets are a new concept in Svelte 5. They 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.
8. Automating the Migration: At least parts of 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.