Runes: The Solution to Svelte's Magic Problem?
HTML-код
- Опубликовано: 8 окт 2023
- Svelte Runes: Are they the answer to Svelte's magic problem? Don't get me wrong. Svelteis a great framework. It uses its compiler to augment vanilla JS syntax with reactivity and state. But that compiler magic is also a problem. Why? We’ll dive into that in a second.
Because to solve that problem, the Svelte team is leaning into the magic, not shying away from it, with a new feature coming in Svelte 5: Runes.
Runes use the function syntax to provide more expressive reactive magic.
What are Runes? Are they making Svelte more magical? Or is Svelte becoming un-svelte-like? Do Runes make Svelte more like… well, the framework which must not be named?
What does this mean for the future of Svelte?
We’ll look into all that and more. To understand all that, we first need to understand the problem Runes are trying to solve.
#svelte #runes #frontend #webdevelopment
----
Want to go into further depth? Head to kodaps.dev/en 
Наука
2:46 You CAN.... It's called a Store.
You took your time to make this video, and the quality definitely shines through!
The adoption of Signal in FE frameworks new and old (besides React haha) is probably one of the few times the FE land agree on something common. I hope it's a sign that the FE javascript world is maturing/converging to an optimal solution for reactive state management.
People are realizing that the State and the DOM should have always been tightly coupled through a reactive primitive like Signal (or its more complicated async counterpart, RxJS Observable), rather than being decoupled by a slow, heavy middle-man runtime in between, like React VDOM + Diffing or Angular Zone.js.
I like the way Svelte (and FE frameworks in general) are heading, and hopefully the Svelte community do not look at this like a "regression" towards React-like hooks. In fact, Rune (Signal) is far far apart from React, a much different mental model underneath.
I believe they are going away from the magic and not leaning into it. _let value = 5;_ this been reactive is magic, adding $state isn't Magic anymore, it's Vue, React or Solid... The magic is gone.
2:30 The compiler clearly sees multiplyByHeight in here, it's just been lazy and not going inside it to know what's happening there, and to know if it's return value will affect area and grab other dependencies while doing so.
Beautiful explanation for this topic. In no case could it be a step backwards. Preference, whether you like it more or less is another thing.
Finally after this long, your video among others have made it easy to understand exactly what runes were trying to fix
I'm glad I was able to be helpful :)
@@KodapsAcademy I hope this doesn't make learning svelte any more complex, I like the simplicity of svelte over react, but yes svelte seems to be getting more complex now
@@blackpurple9163 it should't, but it does require that you change your mental model a little, so that might be a little difficult
@@KodapsAcademy then I'm lucky, I just started learning and so far it's pretty new to me so I'll adapt pretty fast, just that there's no job scope for it in my country yet, but I'll prepare just in case, it seems fun to make things in svelte since it's basically going back to HTML and js
Everything in svelte is magic ✨
Thank you for the explanation
Fantastic, could not explain better
In svelte diynamic state management was big gotcha especially with $:, so i guess this new runes will solve that problems.
I don't know how many people have the ability to listen and read the different contents in the same time, but definitely not me.
i was looking a long list of videos and then this started playing and the audio is completely different to everything else, was this recorded with a binaural mic? what is the magic here?
I'm not 100% sure which mike I used for this video - I used to have a Rode NT1A before it broke (after about 10 years of faithful service) so it might be that :) I have a Sure SM 7B now so it could be that (but it is hardly original :) ).
happy to see them leaning into a more Vue 3 approach 🙌🏼