How Svelte runes syntax is better than plain JavaScript with signals

source code: github.com/rya...
website: earbetter.ryan...
Discord: / discord
Svelte 5 runes: svelte-5-previ...
Svelte: svelte.dev/
Preact Signals: github.com/pre...
vods channel: ‪@webdevladder_vods‬
Svelte REPL with signal difference demo: svelte-5-previ...
vods channel with raw programming: ‪@webdevladder_vods‬

[@webdevladder]

I made a mistake here around 6:37 - the Svelte derived stores do glitch in the way I'm showing Preact signals stores glitch, but only for updates that occur after the store has been read the first time.
With hindsight I would have omitted builtin stores from the example because the point of this video was to compare Preact signals to Svelte signals, and that extra information makes it harder to follow, even if I had correctly demonstrated the behavior. I'm working on a followup where I go more in-depth on some subtle reactivity differences between Svelte 4 and 5, including stores. update: here's the video - ruclips.net/video/lcnimZTNOCA/видео.html
By reading the store and logging inside the derived calculation, you can see it in the logs - svelte-5-preview.vercel.app/#H4sIAAAAAAAACq1WyY6jMBD9lRoUiUQNyWku2TQ9t77PrdOKbFwEq42N7IKeKMq_j9g6YclymAMHXK9eles9G05eLBU6b_l-8jRL0Vt6r1nmBR4ds_LFFagIvcBzJrdRubJ2kZUZbXd6RzLNjCU4OXnQTAUQmTTLCUUAGMcYETAHmUUW0b5eCIAzipIzxNak4P-qg4s634WRseivrpm_rCTGFQYg0MoCRZtaN7Zw9J1SPpHRziicK3OY-mG4RU1o2xZyXRVH4c9WLZgGwT2DDdQNTX12H8qvoPwBa4lt5zOdzmCzHQHNC6ZyhBfwwYeXkYI1oK7UmWxDeaom0Z3DeC-j_KxT4NypM2xzA_6rPw7hF8hvfzWQZh2G-FcOx1TP8JGQd2R8WsSnJXxCwAfy_Q_xbkl3V7gq2OW-0fFFyQFkqOR59lDQ5-Ssz_DPvc01umb2Cqm7Xkk5ccQIL1IOUfwK1dWxx1YBm8tk2q_UKtfjrukmD8UaKTVkY7wj0nCzrRTDDd49SyPT1DtaLOBNAyUIhRRo4A1SJhAYpNIR-0RI0CKE7fUK1YXqQBiQGmIWERyUpCgpXymRDr7YMWiIeU5gtDoCi0s5KcGjXyBwRA0WmajKxtI6ApIpzpu0PyWNwLRUxzJCB_xY4aU-AMfYWKwy80xUUaYFKHM4lGFZ76XtNmJKcRZ9Lh-ZbF_va8QYTaSafPu16d8ZXSTvIMfM9s1ZQluvvfdiQZ_2I4DpOwuAf_QNRlDABi725Kub5uuULrHFrAFbpNxqKK7NN-knja5eeXIyHMUTprye_npx-YHQ6x9hCK-iUp4SdAjCoNM-QZQwfSi9lLBCGgscI5Y7rE1mEbJcKawd5liKlcHK343mkM53ei1ksR35wi3hNBlZPq8XZUI3bzTrVk7_mC_h1F8aT_iefllksNjkQBhuvcBLjZCxROEtyeZ4_jj_A1azbVvCCQAA
More about glitches - wikipedia.org/wiki/Reactive_programming#Glitches

[@figloalds]

You can still do like
let midi_access = $derived(app.midi_access)
Though it may be a pain in the ass compared to the simple destructuring, you wouldn't have to write app. every time you use midi_access

[@webdevladder]

Thank you, that's a good alternative that I'll probably prefer that in cases where it gets repeated often, or maybe if I prefer the props shorthand to the declaration shorthand for whatever reason and don't care about the slight performance difference. To clarify this means I was incorrect starting around 17:41 implying that we necessarily lose the shorthand passing to props to components in some cases. We do lose the shorthand overall because like you said you have to repeat the identifier name twice, but usage can be shorthand.

[@Venyl]

Regarding feedback - I think some elements being way more rounded than others looks a bit weird, and in my opinion the fact some of these buttons don't have any gap between them also looks a bit off

[@webdevladder]

Thank you, I did a pass to hopefully address these issues, I appreciate the notes! earbetter.ryanatkn.com/trainer

[@mikejohneviota9293]

svelte is a language for html, css, js

[@thedelanyo]

The Language

[@thedelanyo]

I think the .peek() it's equivalent is .snapshot()?

[@webdevladder]

They look similar but have some important differences and are used for different things:
- peek is a non-reactive read, $state.snapshot is reactive - untrack is the equivalent for Svelte 5
- peek shallowly accesses the underlying value without any changes, whereas snapshot unwraps proxies deeply
- peek gets the value without the wrapper and changes no other references, whereas snapshot clones everything
- peek has a negligible performance cost whereas snapshot is expensive