Svelte 5 Surprised Me
ฝัง
- เผยแพร่เมื่อ 29 ก.ย. 2024
- Huge congrats to the Svelte team for this release!!! More like Solid is almost always a good thing, so I'm pretty hyped about this change
Link to the blog: svelte.dev/blog/runes
Link to Rich video: • Rich Harris - Rethinki...
ALL MY VIDEOS ARE POSTED EARLY ON PATREON / t3dotgg
Everything else (Twitch, Twitter, Discord & my blog): t3.gg/links
S/O Ph4seOn3 for the awesome edit 🙏 - วิทยาศาสตร์และเทคโนโลยี
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
Most JS frameworks are now finding out what the observer patter is?
Can't help noticing the similarities to Vue 3, which is certainly not a bad thing
Can you state the similarities?
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 ...
I actually think svelte 5's syntax is much more similar to Vue's composition API than anything. Lotta good improvements, will be interesting to test it out. I'm also curios if TS works better in Svelte these days. That's one of the biggest reasons I love JSX templating, the TS always seems to work better for me, I assume because Vue/Svelte have to manage there own LSP.
Svelte was literally built with ts in mind there is type inference between fronted and backend automatically
I've been using Svelte/kit for a long time and I have full typesafety front to back. Never had an issue. That being said, I also think that Svelte 5 syntax feels like Vue and I'm glad it does!
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 TH-cam video? You just did the same thing... Besides I was being sarcastic
"Besides you think you being sarcastic..."
I can't wait for svelte 6:
const [$data, $setData] = $state("test")
Exactly what i though. They are slowly realizing the React way is the best way to write things.
lol
JAJAJAJAJAJAJAJAJA ❤
@@HenriqueNewsted It's more like Solid than React, and a lot more approachable.
@@HenriqueNewsted But it's not like React in any way. It's more like Solid now
“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
@@minnh2094 lol
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).
this looks more like, not React, no Solid, but Vue
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 still don't understand the hype about svelte 5 when we already have Vue 3
they look the same.
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?
Yes please! ❤ More Svelte vids Theo!
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.
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.
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 ?
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.
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.
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.
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 :)
I live the fact that Svelte 5 makes these features opt in because I will not use these.
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
Would love to see a video where you explore using runes in Svelte 5!
Svelte is basically ditching its soft magic system for a hard magic system
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
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
Yes, to more content about Svelte. Looks like it has a lot of traction these dayd
Sveltel Equal Vue3 :)
Great video as always. Would be nice if you linked to the articles you're reading for easy access though
$ 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 ?
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 🤞
Literally vuejs
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
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.
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.
0:20 "I don't like when people change the syntax of javascript without really good reason."
Yet you like JSX?
I dont dislike the new Svelte, I just cant think of how different is Svelte compared with other frameworks now :/
Would love to hear your take on ElectricSQL and the whole local-first idea.
I enjoy svelte, but I also like jsx. Maybe I should try solid
The Carniatoization of the JS ecosystem continues unabated and I'm here for it.
lol :D Ryan is amazing.
Did Theo just hit puberty?
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 TH-cam land
@@minnow1337Same, was forced to watch because there aren't enough Svelte Runes video yet
Yes, please more svelte content
Would love to see more Svelte content out of curiosity
That's "it's more like React" comment hurt me, mostly because it's true.
3:57 Svelte becoming Vue actually
So Svelte's approach to describing reactivity actually turns into what Effector did 🤔
Vue 3 has all of this from years at this point and yet nobody talks about it anymore.
Yes to Svelte 5 video but only if you eat a pizza pocket whilst doing so
Yeah. I never loved $ but yeah, the dumped everything sub-optimal 🎉
Yeah bruh, React died in 2022. Long live Svelte
More Svelte/SvelteKit content please 💯❤🙏👍
these fake tweet thumbnails are very samey
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
We might be witnessing the t3 stack migrating to svelte boys!!!
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.
T3 stack on Svelte 5 wen?
The hair looks good here. Great vid
banger alert!!! time for me to take another look at svelte🙄
More Svelte!
Dude, shape up your moustache
We're SolidJS now!
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 want to look a lot worse than Weird Al Yankovic and make everyone who sees me uncomfortable.
Why we need sve when we have vue. Finally, I use Astro. Not next js, not nuxt js 😂
OK I don't even care about the video, wtf is this hairstyle and moustache combo theo
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)
1:25 how is it that you can't see that when count updates the markup updates as well but in react you can?
So it's basically implementing all the good Vue principles :D
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
As someone who does not like React. Svelte is not becoming react 🙂
Great improvements, those are exactly the things that have been bothering me.
The move away from JS hijacking is huge.
yes
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 😂
Do a video where you play with Svelte 5!!!
definitely do a video playing with svelte 5
Svelte is basically now react with jotai
Yes, more svelte please.
anyone else notice how he combed his hair
Feels like VueJS in steroids, i like it
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.
🔥
Very nice mustache sir!
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)
Nice haircut, Theo!
No to Svelte content 😳😬
WE LOVE YOU THEOOOOOO ❤❤❤❤
More Svelte pls
more svelte please
Not Theo tryna mimic Rich's voice😂
Not trying to mimic anything, guess I sound more like Rich at 7am 😅
Svelte 5: Vue 3
first
You stole first without commenting on the video?
Svelte is dead. It is just a wrong way. There's literally nothing in here.
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.
They are fixing the specific things that are holding me from actually adopting Svelte more often, very exited about Svelte 5.
Damn it. Svelte waa so intuitive for me while is react is the complete opposite. Not looking forward to it being more React-like
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
what happened to your hairs
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?