Remote Workshop: Svelte 5 & Runes
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.
Tickets
Additional Information
Mainmatter Workshop: Svelte 5 & Runes
Duration & location
The workshop takes place over two afternoons on February 6th, and 7th, 14:00 to 18:00 CET each. That allows participants to use the mornings to exercise or keep up with work.
The workshop is run completely online and remote.
Number of participants
To ensure the highest quality, we accept up to 20 participants.
For whom?
The workshop is designed for software developers who have a general understanding of Svelte and want to update their apps to version 5 and adopt runs.
Prerequisites
We will send a detailed list of instructions for preparation, including the installation of tools, etc. Additionally, we will share a Github project with workshop materials. This information will be provided closer to the workshop date.
Workshop Contents
- 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
$staterune: The$staterune 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
$derivedrune: The$derivedrune 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
$effectrune: Next, we move to the$effectrune. Like for the$staterune, we'll implement some examples and talk about typical use cases. -
The
$propsrune: The$propsrune 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.
Workshop facilitator
Paolo Ricciuti is a huge nerd, Senior Engineering Consultant at Mainmatter and our in-house Svelte expert. Paolo is also a maintainer of the Svelte project and one of the creators of sveltelab.dev - a REPL for SvelteKit.
About Mainmatter
Mainmatter is an engineering consultancy that helps teams adopt and succeed with Svelte and SvelteKit. We offer strategic advice, training, and team reinforcement.