Understanding how your framework works under the hood is the best way to write bug-free code, and save hours of pulling your hair out. This is part 1 of a 4-video series on Svelte 5's runes. In this video we discuss the basics of what makes Svelte 4's store-based compile-time reactivity different from Svelte 5's signal-based runtime reactivity. We take a brief look at the compiled code to give a general idea of how the framework works under the hood to track changes and call reactions. This video series is not a tutorial on the whole framework. It's just meant to fill in a gap that's missing in the docs.
For the visualisation purposes, I created a library/app (link below) that allows visualisation of the signals, reactions, dependency graphs.
Nano Signals Visualiser
github.com/petermakeswebsites...
Me
petermakeswebsites.co.uk
Special thanks to the folks at the Svelte discord and Dominic ( / trueadm ) for clearing things up for me!
0:00 Welcome
1:00 thoughts on magic
2:10 what we will cover
3:30 stores vs signals
7:45 how signals work
12:15 syntax outside components
13:45 evolving deps
20:50 gotcha traps
27:00 coming up