This was exactly what I was thinking! We figured out that frontend code works better with a datadriven paradigm so we hack the whole functionality to make it work with virtual DOM or equal sign overload. HTML6 should maybe just make reactivity work by default.
@@saadhabashneh5587 I think what the comment auther means is that the main similarity is $derived in Svelte can be seen as computed in Vue Also $effect can be seen as watchEffect in Vue ...
Not really, do you know where where SFC came from? It was from Svelte. Just like how Evan took the better parts of react to make Vue, he explored the possibility of SFC by Svelte with Vue and that is how compositions API was introduced, there was a huge drama about the moving away from options API to the new compositions API. If you read Vue 3 docs, it was also mentioned they explored compiler runtime but did not push through it because of how vue runtime is initially designed (around react's virtual dom of course).
@@minnh2094the top level reactivity has obvious limitations as mentioned on the blog post. Other frameworks took the best parts in svelte and kit to their own, SFC in Vue and Server context in Next. I think it is fair enough svelte team realised the current limitations when it comes to reactivity, they just simply copied what is the best practice at the moment. If there is a better way, I'm sure the svelte team would go for it without a doubt.
It’s really incredible how you can read through and understand documentation so quickly and with such eloquence. As a Junior dev, I hope I can read docs as quickly as you & understand them like this someday 🤞
I'm also hyped for Svelte 5, but I love Svelte 4 and I never got the argument that is not JavaScript, implying that React somehow just is. How can people claim that JSX "is" JavaScript is beyond me. In that example, what does it tell you that "count" is updated in the DOM? You are literally mutating its value! Not such a stretch of the imagination.
I was wondering what's Theo's thoughts on Svelte 5 and runes. Now I'm wondering what you'll do when you first get your hands on it. Yes, absolutely make a video, preferably as you first try it out. Personally, I'm kind of hyped.
Vue initially copied SFC from Svelte. Svelte just saved their time and copied Vue reactivity instead since they already have SFC thing in the first place. And from what I know, Vue had a habit of copying the good parts of other frameworks, react's virtual dom is the first thing comes to mind. I think it's fair for Svelte also take a dip on the Vue's cake.
Yes, do more videos on Svelte and trying things out with Svelte 5... We're switching a legacy site from backbone/marionette to Svelte and would I'd like to see your thoughts on it once you have a chance to try it out... anyways, keep up the good work and content :)
Svelte 5 is cementing my belief in Solid's future being brightest. Runes are effectively signals. So not only is "svelte becoming react" but its also becoming Solid. EDIT: oh he says it too at 4:10 - dammit, why'd I comment before watching the video.
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.
Solidjs syntax doesn't even need a compiler for this exact thing to work. One can use solid signals like a library in any project. You should do more with solidjs since it's technically way more superior than svelte which is more hype than anything
Signals do not need magic, Runes are against the original idea of Svelte, it is a compiler. Solid is still the best piece of frontend framework engineering imo, it needs more adopters.
exactlyyyyyyyy, i still cant understand the hype over svelte 5, like they just killed it's uniqueness by making it similar to other frameworks in the industry (react,vue,solid...), the simplicitiy of svelte was indeed its selling point , but now why would anyone choose svelte over the others ?
Am I the only one who isn't excited about this? It's yet another new thing to dive into. While I have great respect for Rich Harris, for me, this feels like a framework where I'm not entirely sure what I'm doing.
count is a primitive, so you have to create a get method to access the local variable. Otherwise you would be getting the same initial value, and not the mutated one.
it's sad that we lost surgical updates tho, now it feels like render function in react. but maybe there's a performance benefit.. edit: surgical updates are kinda back (when you call function in your template)
2:19 Please explain to me how changin the syntax of `let count = 0;` to `let count = $state(0);` suddenly makes it more tracable? It is still let, it is still in the same place. let is not a constant but variable and you should expect it to change...
Yeah, when Vue copied SFC from Svelte and Next copied Server context from Sveltekit, jus a few lines of code and we can merge these three frameworks together 😂
Runes really looks like hooks, svelte 5 enable more clarity and code sharing The refactoring of svelte DX prove one thing, even if we come with a dozen of (fair) critiques on React, it was implemented with really good stuff especially the introduction of the hook in the framework, it was absolutly NUTS Encapsule the logic in a simple js function and use everywhere you need, it’s a very clever and useful feature Vue 3 implement a similar pattern with the composition API Even if we can do better, React stay a source of inspiration for the new frameworks
They are effectively just signals. Difference is that signals inverses the control. With hooks, you subscribe to the lifecycle of a component, whereas with signals, the component subscribes to the signals.
i like the amount of features that this makes obsolete: a simpler syntax and a less quirky implementation can make svelte even cleaner and more intuitive... you may call that reacty, but imo it only makes svelte more svelte, bc those were already some of svelte's strengths (and bc svelte is a word with an actual meaning)
The problem is that adding all this as an additive feature means that all the previous behaviour is still there. This seems like a really strange choice to me, it'll make learning the language really confusing. Imagine trying to explain to a newcomer the difference between `let count = $state(0)` and `let count = 0` where `let count = 0` can be reactive but "it depends". I feel like they should've ditched the old behaviours all together.
@@oscarljimenez5717 Template being "magic" while JSX being just JS is one of those horrible, hilarious and wrong statements. Both need to translate input to html, except JSX does it in a more ugly way.
When Vue copied SFC from Svelte and Next copied Server context from Sveltekit, jus a few lines of code and we can merge these three frameworks together 😂
I just hope it dosent move more towards React.. I enjoyed writing let and knowing that Svelte will take care of it. It's not that hard to learn and follow imo
The update is awesome for svelte, but imagine writing your app around everything Svelte 5 introduces and then needing to switch front-end framework later down the line...
@@sir.richardpound That's the point they were making. There's no difference, whether you use React or Svelte 5. So your original comment doesn't make sense.
Geezus again with the $-signs. It's my php/ jquery days all over again. My shift-key is gonna get demolished. Just go Vue at this point my guys. And your components will resemble your ts-modules-code almost 1:1. No jsx, non of this $-sign nonsense. Just regular "import {this} from that" and then using reactive variables in your html-templates. That what its suppose to be. That it!
Well... $ signs have a purpose here. They're "magic symbols" that tell compiler to do some compiler-specific tasks. So during compilation time, with $ sign they can easly split such an expression to: - what magic symbol was used - what was passed inside of it so that they can safely and easly apply some effect on what was inside
How can people get excited by announcements like this? Dude is literally admitting he has no idea what he's doing and completely overhauled his framework because of it. Js frameworks are a massive liability and it's genuinely scary to see people blindly adopting them without even considering the maintenance cost for a second.
we would be on mars by now if svelte was how the dom originally worked
Totally Jetsons style! 🚀
Can confirm.
This was exactly what I was thinking! We figured out that frontend code works better with a datadriven paradigm so we hack the whole functionality to make it work with virtual DOM or equal sign overload.
HTML6 should maybe just make reactivity work by default.
😂😂😂 noice one...
😅@@tedspens
Can't help noticing the similarities to Vue 3, which is certainly not a bad thing
Yea I too agree.
Vue has a PhD in reactivity
@@saadhabashneh5587 search "Vue Reactivity Transform"
Also composables
@@saadhabashneh5587 I think what the comment auther means is that the main similarity is $derived in Svelte can be seen as computed in Vue
Also $effect can be seen as watchEffect in Vue ...
@@saadhabashneh5587 ref() = $state(), computed() = $derived(), watchEffect() = $effect()
Definitely do a "playing with Svelte 5" vid
So excited to upgrade all my stupid sites to the new dope version lol
You must be fun at parties
@@isdeonf Why? Because I left a comment on a UA-cam video? You just did the same thing... Besides I was being sarcastic
"Besides you think you being sarcastic..."
“Svelte is becoming React” “Svelte is becoming Solid” “Svelte is becoming Vue”
Svelte is actually just becoming a better version of Svelte
That means the signals paradigm is good 😁
I feel like Svelte lost its uniqueness. Not sure whether it is good
Not really, do you know where where SFC came from? It was from Svelte. Just like how Evan took the better parts of react to make Vue, he explored the possibility of SFC by Svelte with Vue and that is how compositions API was introduced, there was a huge drama about the moving away from options API to the new compositions API. If you read Vue 3 docs, it was also mentioned they explored compiler runtime but did not push through it because of how vue runtime is initially designed (around react's virtual dom of course).
@@minnh2094the top level reactivity has obvious limitations as mentioned on the blog post. Other frameworks took the best parts in svelte and kit to their own, SFC in Vue and Server context in Next. I think it is fair enough svelte team realised the current limitations when it comes to reactivity, they just simply copied what is the best practice at the moment. If there is a better way, I'm sure the svelte team would go for it without a doubt.
Yes please! ❤ More Svelte vids Theo!
It’s really incredible how you can read through and understand documentation so quickly and with such eloquence. As a Junior dev, I hope I can read docs as quickly as you & understand them like this someday 🤞
Yes, to more content about Svelte. Looks like it has a lot of traction these dayd
I'm also hyped for Svelte 5, but I love Svelte 4 and I never got the argument that is not JavaScript, implying that React somehow just is. How can people claim that JSX "is" JavaScript is beyond me.
In that example, what does it tell you that "count" is updated in the DOM? You are literally mutating its value! Not such a stretch of the imagination.
Similar to Vue $derived in Svelte can be seen as computed in Vue...
Also $effect can be seen as watchEffect in Vue ...
k didn't ask tho
@@Aoredon ?
I was wondering what's Theo's thoughts on Svelte 5 and runes. Now I'm wondering what you'll do when you first get your hands on it. Yes, absolutely make a video, preferably as you first try it out. Personally, I'm kind of hyped.
Would love to see a video where you explore using runes in Svelte 5!
Svelte now looks like vue sfc
Vue initially copied SFC from Svelte. Svelte just saved their time and copied Vue reactivity instead since they already have SFC thing in the first place. And from what I know, Vue had a habit of copying the good parts of other frameworks, react's virtual dom is the first thing comes to mind. I think it's fair for Svelte also take a dip on the Vue's cake.
sfc?
@@daleryanaldover6545 Vue didnt copy SFC from Svelte. Vue has always had SFC.
this looks more like, not React, no Solid, but Vue
Yes, do more videos on Svelte and trying things out with Svelte 5... We're switching a legacy site from backbone/marionette to Svelte and would I'd like to see your thoughts on it once you have a chance to try it out... anyways, keep up the good work and content :)
Whoever is on the fence, you are missing out. I switched permanently from react to svelte and I don't regret it one bit.
all that pain just has gone away.
Would love to see more Svelte content out of curiosity
Great video as always. Would be nice if you linked to the articles you're reading for easy access though
Svelte 5 is cementing my belief in Solid's future being brightest. Runes are effectively signals. So not only is "svelte becoming react" but its also becoming Solid.
EDIT: oh he says it too at 4:10 - dammit, why'd I comment before watching the video.
I had the same feeling that this is highly similar to what SolidJS is achieving. Solid honestly deserves some more love and showcasing
I live the fact that Svelte 5 makes these features opt in because I will not use these.
Soooooo Sevlte 5 is secretly Vue 3
It's for us who don't like JSX or Virtual DOM a.k.a Solid and VUE.
I still don't understand the hype about svelte 5 when we already have Vue 3
they look the same.
Yes, please more svelte content
Svelte is basically ditching its soft magic system for a hard magic system
We're SolidJS now!
Svelte 5 looks a bit like Vue. $derived looks like computed, $effect looks like watchEffect. But overall looks great, going to give it a shot
Runes + stores for me felt even a bit nicer than vue piñata but still you are not far off
3:57 Svelte becoming Vue actually
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.
Would love to hear your take on ElectricSQL and the whole local-first idea.
The hair looks good here. Great vid
Yes to Svelte 5 video but only if you eat a pizza pocket whilst doing so
Solidjs syntax doesn't even need a compiler for this exact thing to work. One can use solid signals like a library in any project. You should do more with solidjs since it's technically way more superior than svelte which is more hype than anything
True
We might be witnessing the t3 stack migrating to svelte boys!!!
More Svelte!
🔥
Signals do not need magic, Runes are against the original idea of Svelte, it is a compiler. Solid is still the best piece of frontend framework engineering imo, it needs more adopters.
$ is fine. I always saw using JavaScript syntax to write JavaScript as positive of svelte.
exactlyyyyyyyy, i still cant understand the hype over svelte 5, like they just killed it's uniqueness by making it similar to other frameworks in the industry (react,vue,solid...), the simplicitiy of svelte was indeed its selling point , but now why would anyone choose svelte over the others ?
Am I the only one who isn't excited about this? It's yet another new thing to dive into. While I have great respect for Rich Harris, for me, this feels like a framework where I'm not entirely sure what I'm doing.
I enjoy svelte, but I also like jsx. Maybe I should try solid
So it's basically implementing all the good Vue principles :D
1:25 how is it that you can't see that when count updates the markup updates as well but in react you can?
I dont dislike the new Svelte, I just cant think of how different is Svelte compared with other frameworks now :/
The Carniatoization of the JS ecosystem continues unabated and I'm here for it.
lol :D Ryan is amazing.
The get at 3:15 is confusing. Everything else looks way better than before!
count is a primitive, so you have to create a get method to access the local variable.
Otherwise you would be getting the same initial value, and not the mutated one.
So Svelte's approach to describing reactivity actually turns into what Effector did 🤔
Sveltel Equal Vue3 :)
Yes, more svelte please.
Most JS frameworks are now finding out what the observer patter is?
Vue 3 has all of this from years at this point and yet nobody talks about it anymore.
0:20 "I don't like when people change the syntax of javascript without really good reason."
Yet you like JSX?
banger alert!!! time for me to take another look at svelte🙄
it's sad that we lost surgical updates tho, now it feels like render function in react. but maybe there's a performance benefit..
edit:
surgical updates are kinda back (when you call function in your template)
WE LOVE YOU THEOOOOOO ❤❤❤❤
definitely do a video playing with svelte 5
2:19
Please explain to me how changin the syntax of `let count = 0;` to `let count = $state(0);` suddenly makes it more tracable?
It is still let, it is still in the same place.
let is not a constant but variable and you should expect it to change...
Obviously declaring a variable in a function would not be accessible since it is encapsulated in its scope
More Svelte/SvelteKit content please 💯❤🙏👍
I want to look a lot worse than Weird Al Yankovic and make everyone who sees me uncomfortable.
Not Theo tryna mimic Rich's voice😂
Not trying to mimic anything, guess I sound more like Rich at 7am 😅
Great improvements, those are exactly the things that have been bothering me.
Svelte is basically now react with jotai
So Svelte 5 and Vue 3 mostly resemble React but with different namings? Hooks are observables or runes?
Yeah, when Vue copied SFC from Svelte and Next copied Server context from Sveltekit, jus a few lines of code and we can merge these three frameworks together 😂
Feels like VueJS in steroids, i like it
T3 stack on Svelte 5 wen?
That's "it's more like React" comment hurt me, mostly because it's true.
yes
Runes really looks like hooks, svelte 5 enable more clarity and code sharing
The refactoring of svelte DX prove one thing, even if we come with a dozen of (fair) critiques on React, it was implemented with really good stuff especially the introduction of the hook in the framework, it was absolutly NUTS
Encapsule the logic in a simple js function and use everywhere you need, it’s a very clever and useful feature
Vue 3 implement a similar pattern with the composition API
Even if we can do better, React stay a source of inspiration for the new frameworks
They are effectively just signals. Difference is that signals inverses the control. With hooks, you subscribe to the lifecycle of a component, whereas with signals, the component subscribes to the signals.
What's the point? What's fixing? Why change to be "reacty"?
i like the amount of features that this makes obsolete: a simpler syntax and a less quirky implementation can make svelte even cleaner and more intuitive...
you may call that reacty, but imo it only makes svelte more svelte, bc those were already some of svelte's strengths (and bc svelte is a word with an actual meaning)
Everytime i look at things happening in svelte i have uncontrollabe urge to make a statement that vue3>svelte
Virtual dom
@@lucasjames8281 yet its surprisingly fast on benchmarks
@@lucasjames8281 to be fair, vue is working on getting rid of their v-dom with what they call 'vapor'. that being said, i prefer svelte regardless.
vapor@@lucasjames8281
@@lucasjames8281Sheesh
The problem is that adding all this as an additive feature means that all the previous behaviour is still there. This seems like a really strange choice to me, it'll make learning the language really confusing. Imagine trying to explain to a newcomer the difference between `let count = $state(0)` and `let count = 0` where `let count = 0` can be reactive but "it depends". I feel like they should've ditched the old behaviours all together.
Did Theo just hit puberty?
Nice haircut, Theo!
Do a video where you play with Svelte 5!!!
More Svelte pls
anyone else notice how he combed his hair
What's the point of using svelte if it just do the same thing as other framework does?
more svelte please
Would love to see more svelte content, seems like it's still an underloved framework
It is a redundant framework lol that’s why no interest from the public
@@sdwvitit’s literally just react with better syntax and like 10x faster.
usually template based frameworks have a hard time, because have too much magic and feel like lock-in in some way.
@@oscarljimenez5717 Template being "magic" while JSX being just JS is one of those horrible, hilarious and wrong statements. Both need to translate input to html, except JSX does it in a more ugly way.
Yeah. I never loved $ but yeah, the dumped everything sub-optimal 🎉
Very nice mustache sir!
The move away from JS hijacking is huge.
They are fixing the specific things that are holding me from actually adopting Svelte more often, very exited about Svelte 5.
Literally vuejs
Why we need sve when we have vue. Finally, I use Astro. Not next js, not nuxt js 😂
i know it helps with the youtube algorithm but the thumbnails are getting out of hand
the clickbait stuff prevents me from watching ngl
That's the most basic thumbnail you'll find in UA-cam land
@@minnow1337Same, was forced to watch because there aren't enough Svelte Runes video yet
Yeah bruh, React died in 2022. Long live Svelte
Svelte 5: Vue 3
When Vue copied SFC from Svelte and Next copied Server context from Sveltekit, jus a few lines of code and we can merge these three frameworks together 😂
I just hope it dosent move more towards React..
I enjoyed writing let and knowing that Svelte will take care of it. It's not that hard to learn and follow imo
Theo, you're not usually the best judge of things, so this feels on par.
The update is awesome for svelte, but imagine writing your app around everything Svelte 5 introduces and then needing to switch front-end framework later down the line...
Imagine writing everything in react then needing to switch front-end framework later down the line....
@@JoeHartzell With svelte 5 what's the difference? Instead of the age of vendor lock-in, now it's framework lock-in
@@sir.richardpound That's the point they were making. There's no difference, whether you use React or Svelte 5. So your original comment doesn't make sense.
@@exactzero you want to be locked into a framework? That's nuts
@@sir.richardpounddo you even know how to read?
Geezus again with the $-signs. It's my php/ jquery days all over again. My shift-key is gonna get demolished. Just go Vue at this point my guys. And your components will resemble your ts-modules-code almost 1:1. No jsx, non of this $-sign nonsense. Just regular "import {this} from that" and then using reactive variables in your html-templates. That what its suppose to be. That it!
Well... $ signs have a purpose here. They're "magic symbols" that tell compiler to do some compiler-specific tasks. So during compilation time, with $ sign they can easly split such an expression to:
- what magic symbol was used
- what was passed inside of it
so that they can safely and easly apply some effect on what was inside
Svelte 5 remove the need of importing stuff. Biggest win! You mash your shift key importing funcs way more than the dollar bill sign
@@danvilelayou can do autoimports in Vue also. It even comes default in nuxt
OK I don't even care about the video, wtf is this hairstyle and moustache combo theo
what happened to your hairs
these fake tweet thumbnails are very samey
Damn it. Svelte waa so intuitive for me while is react is the complete opposite. Not looking forward to it being more React-like
As someone who does not like React. Svelte is not becoming react 🙂
How can people get excited by announcements like this?
Dude is literally admitting he has no idea what he's doing and completely overhauled his framework because of it. Js frameworks are a massive liability and it's genuinely scary to see people blindly adopting them without even considering the maintenance cost for a second.
Dude, shape up your moustache
No to Svelte content 😳😬
first
You stole first without commenting on the video?