Svelte 5 Preview | Runes 

All the magic is in the $ for that nostalgic feeling of when you first discovered jQuery after trying to write IE6-compatible plain js for the first years of your webdeveloper life 😂

That trick to break into out of the outer loop from an inner loop at around 04:00 was great. I have definitely found myself having to break out of an inner loop in the past and didnt know how to do this!

For those not a fan of this: `$state` is just a compiler hint! It doesn't actually affect the value of the variable _at all._ The variable still literally equals its value. If you do `let count = $state(0)`, then `count === 0` will be true. It's the `count` variable itself that becomes reactive, not its value. If you assign its value to a different variable, its reactivity isn't copied. *I'm still not a fan of the `$state(...)` syntax because it doesn't make that clear at all.* Due to this common confusion, I think putting runes on the right-hand side of the equal sign was the wrong move, since it has nothing to do with what the variable is being set to. This would be much clearer and simpler imo: let $count = 0; Then it clearly communicates it's the variable that's reactive, not its value. And as a bonus, then dollar signs would explicitly indicate everywhere reactivity is present in your app. (But then you'd also have to think of better syntax for `$derived` which has the same problem.)

Vue did not start SFC. Vue modeled its API and single-file components after Ractive.js, the predecessor of Svelte.

Feature sets do seem to be converging among Svelte, Vue, Solid (React is not signals based) on the surface. The difference is Svelte is a compiler. Runes are first and foremost hints that can be optimally compiled for reactivity or server side use. Didn't Rich show runes compiling to noop in simple cases? It's vanilla JS at that point.

Basically Svelte is becoming in Vue 3 and I can finally also add another JS framwork to my CV :)

Hmmm... Svelte is becoming a compiled version of Vue 3 now...

Svelte, be careful with my heart. Please do not become React. Don't make me write code just to tell your library how to function.

Runes have two connotations for me - spending far too long in Lower Kurast or laying land mines in Skyrim… neither feels good to have involved in my code base.

Thanks for teaching me about labels! That's gold!

if $effect had another name, people would stop to make references to React. The concepts are not the same.

I’ve been dealing with the $ and stores quirks first hand. Very excited for svelte5 to drop. I used to be excited for new games to release… now I just patiently wait for rich to send dopamine. Pls don’t make us wait sveltekit long for this

With all these new frameworks coming out and these major changes to existing ones, I'm more confident by the day that Vue was right all along.

They say knockout was right but you can change it to Vue. It’s exactly the same as composition api

svelte is my framework of choice, but what keeps it out of a lot of projects is the UI libraries just aren't up to snuff for it yet. So quick & dirty often is easier in other languages. Soon as a couple better libraries popup for it probably be the only UI library I use.

I'm always confused about HTMX. Internally I feel like it appeared two weeks ago, but Prime is acting like he was building large scale production apps with it for years. Is it really that good or it is just new and no major flaws were found yet?

They fixed all the things that bothered me about Svelte.

I'm into svelte because of the author; that's pretty much the only reason (and it easy to sling up a svelte websites in 30 minutes compared to reactjs). I can comeback to the code in 2 months and recall svelte better than reactjs. Ecommerce doesn't need crazy JS libraries. I don't know what the heck everybody else is doing with a website. **UPDATE**: Oh yeah, I remember. All this JS craziness came when Steve Jobs killed off Flash. And still to this date, we don't have a flash replacement for the the creative types.

So svelte is now vue? They're nearly 1:1 now in look and feel and behavior. I think it's crazy no one ever talks about vue on these channels (like it's the red headed step child), but then it's like all these frameworks are becoming more and more vue like, and they are praising them, but still ignore vue?

Maybe I'm wrong about this, but I'll never use loop labels instead of found variables. In fact I try to avoid control statements in general.

Appreciated your honesty. Svelte 5 runed Svelte.

hilarious in the comments that moving from let count = 0 to let count = $state(0) means that Svelte is dead and lost its simplicity. interesting priorities if you've written/refactored enough reactive $ statements in the current version of Svelte you'll understand why unifying this part of the API makes sense. signals seem to be the most clear way to offer reactivity

Svelte is finally growing up!

Runes look interesting but I can't shake off a feeling of deja vu. It feels like an admission that the previous scheme didn't really work, in the same way that React introduced functions/hooks to "fix" classes. Also, not keen on "features" that seem like a different way to do the same thing. Starts to taste like syntactic sugar.

so the svelte team built vue 3 but backwards? 😂

So in other words it's taken six years, but the Svelte team is finally taking Evan You's famous "svelte-script" tweet to heart. Glad the Vue team also took the tweet to heart and abandoned the reactivity transform proposal.

Svelte is amazing... was amazing. Just like Vue, Svelte had an original and unique idea of how to handle state and build pages. It was its own thing, different from Angular/React/Vue. But now, just like Vue 3, Svelte 5 is slowly changing into React. This thing about "$derived", "$state", "$effect", is all just React useMemo, useState, useEffect. Vue stopped being Vue on version 3, and so its originallity lasted 2 versions (up to Vue 2). Now Svelte's originallity would've lasted 4 versions, because version 5 just proved, yet again, that React has been right all along. Two amazing frameworks, Vue and Svelte, who started gorgeouslly doing their own thing and making devs around the world fall in love and have faith in modern JS, have now copied React and become what they were originally trying to defeat. What a sad time for all JS devs. I'll have to keep with Svelte 3/4, just like I've kept with Vue 2. Knockout was right all along. Svelte... was amazing.

so svelte made a full circle back to Vue 3 🤔

its rethinking 'rethinking reactivity'

Name reactivity functions with fancy word and make marketing) Now it's code looks even more like vue3 =)

Strangely I remember Knockout. Planetary Annihilation's UI uses it, so I've used Knockout when writing PA mods. I never used it for web dev.

5:40 that's why I love vue. You can extract component code into plain js by just copying it. That's what threw me of svelte. Using writeable was kinda weird.

„Knockout was right all along”? The joke’s on you, I’ve been just using Knockout all along!

I remember i once learned labels, maybe it was Java, then i missed it in some other language Usually you can replace it with functions and return if it's a simple one, like inner-outer loops only

it avoided react, now it's becoming react. NOICE.

I learned Python before I learned Bash, so imagine my frustration when I learned that breaking out of nested for-loops was very straightforward in Bash, but required extra work in Python. w=3 for x in {0..9}; do for y in {0..9}; do for z in {0..9}; do if ((x + y + z == 10)); then break "${w}" fi done done done printf "%s, %s, %s " "${x}" "${y}" "${z}" or some shit

I wouldn't use a coin to decide between React and Angular, I would use a 20-sided dice and pick Angular when it shows 21. For me the current hierarchy is htmx > Svelte > Solid > ClojureScript > React > a pile of horse manure > Angular.

So svelte 5 is vue 3. Ok.

"Needn't" upper class English english. Our colonists often think even the English of the plebiscite speak upper class english but the real thing is very rare. Rich Harris has it with I think a northern lilt (not sure about that). He sounds like he went to Harrow or Eton. Harrow is for the upper class upper classes, Eton for the upper-middle classes with pretensions, like Harry and William.

that minecraft kind of shit at 2:28 got me laughing so hard

Learning compiler - driven behavior is much worse than learning plain API-s. The fact that you don't even need to import $props or $derived should also be classified as "magic". In e.g. React I can observe every available API by pressing Ctrl + Space in the import block which is a native language feature.

Interesting, I put Svelte in my pocket to playing later!

Best framework is state on the backend and dom manipulations when needed ❤

Every library is converging towards the React model. About time.

I saw their demo for declaring props, which is def nice since it has additional features and is a good option. That said: I still really like the elegance and simplicity of “export let” as your means of defining props. At least aesthetically. 🤷‍♂️ Hope that doesn’t go away in Svelte 6, for example.

$ brings me nightmares from my 17 years of PHP. Ugh! Also, is Svelte turning silently into React?

Nice, exactly appeared at the start of the segment

"This works well... until it doesn't." Describes literally the entire design of Svelte. Something like $derived is just plain wrong. It doesn't solve the problem. area = $derived(width + height) is not any more ergonomic than area = computed(() => width.value + height.value) all it is is simply worse. Because if I look at the latter, I actually know what it is. There is no magic. I can refactor it, it works just like any other javascript. There are no red functions and blue functions.

*chefs kiss*

Svelte Power!

The “$” syntax just reminds me of AngularJS, so much trauma.

1:30 That's Rich lol

Don't like this direction of Svelte, so far never had any issues with the way I use Svelte now. At least current API is not deprecated, so that's a plus+

Yet another atomic store like reatom. Reinvented. Congratulations 🎉

Svelte is going from a soft magic system to a hard magic system. People are smad about it

Isn’t rune a data type that stores codes that represent Unicode characters, aka code point?

The appearance of the word colour most likely means Rich Harris himself wrote it.

Svelte becoming Vue

I like Angular

Svelte's syntax seems to become worse every time

instead of outer i always use "break dance"

Most important part of the video 2:28

How to loop WITHOUT loop in GoLang import "fmt" func main() { A: fmt.Println("A") fmt.Println("B") goto A // i love the fact that goto statements are available inside go }

So basically Svelte is becoming React

The coin flip hahhahahha

I'm not sure I like the direction svelte is taking

always hated 'effect' as a name.. feels like it makes sense to be named something else

11:33 lmao funny af

I dont think i like the direction svelte is going with this. This feels like Vue3. And what about TS?

Looks like Vue 3 now has shorter syntax for state than Svelte let count = ref(0) let count = $state(0) Idt this matters though. The code golf people like to play with stuff like this is so silly

Thoughts on angular breaking changes??

Vue 3? Yay 🎉

Mobx and chill going on 7 years.

this guy works at Netflix btw

this new reactive update looks good

> signals have been popularised by Solid ACHKUTALLY, the first doing it after knockout was Vue3's composition API, which is identical to Svelte 5, but people be hatin' on that ecosystem lmao

How come no one mentions Qwik also has these already with the additional benefit of breaking stuff up into chunks and improving time-to-interaction? $state = signal $effect = useTask$/useVisibleTask$/useResource$ $derived = useComputed$ $props = just normal function args

thank you for the minecraft slurp

Quik too buddy!

finally the svelte claim that they make a witchcraft; how magically cool it is

Funny, vue tried to become svelte with $ref() and ditch '.value' using reactivity transform though they canceled it. Everything is just going circle lmao.

Svelte #1

Turns out the: Svelte is just "let count = 0;" was a mistake just like the React guys where telling you for years. :d

Am I missing something, I thought the whole point of svelte was that you could just write vanilla JS and it'd be reactive out of the box? Now it just seems like it's a version of react which requires less typing and if that's the case it's not that compelling.

How can I achieve routing in htmx?

I am glad I'm investing time into Solid instead of Svelte haha No point to learn Svelte 5 when you already know Vue 3, especially when their syntax is horrible...

I don't care about who came up with what first... but as a Vue developer as soon as I saw $derived and $effect on the screen I immediately knew what they were. like without a doubt. Vue & Svelte should just unify... It really doesn't make any technical sense to be two different projects.

7:09 they finally killed React

i choose vue because had nice router but now seems like i made right choose

When I'm going to see Elm-like things ?

Svelte saved my fucking life!

Is Svelte 4 becoming React?

Please tell me why is manually creating a wrapper function for state a good thing all of a sudden? It's like a custom hook, what is all the hype about?

Yo Svelte runes look like Knockout

Softcore React

Js using $, finally you can get as much dolars as in php taking the joke aside, it's like you write code in C with pointers

And those who don't know about function use two nested for with a break. 😂

Solidjs continues to be infulential.

What makes htmx better than hotwire, other than being newer?

svelte is nice