Svelte 5 Preview | Runes
HTML-код
- Опубликовано: 26 дек 2024
- Recorded live on twitch, GET IN
/ theprimeagen
Reviewed article: svelte.dev/blo...
MY MAIN YT CHANNEL: Has well edited engineering videos
/ theprimeagen
Discord
/ discord
Have something for me to read or react to?: / theprimeagenreact
Hey I am sponsored by Turso, an edge database. I think they are pretty neet. Give them a try for free and if you want you can get a decent amount off (the free tier is the best (better than planetscale or any other))
turso.tech/dee...
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 😂
And the magic of angularjs (1.x) for me.
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!
i = j = 9000;
you break by using a "GOTO", I'm kidding
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.)
I prefer your way. The code even just looking like React makes me smadge
Exactly. You already have the $: x = y syntax. Just please use that.
No one is complaining about that. They're complaining about Language bloat
@@chudchadanstud Huh? How is this any more bloated than how it was done before? They just replaced the old system with a new one.
types would make it very clear what is reactive and what is not..
Vue did not start SFC. Vue modeled its API and single-file components after Ractive.js, the predecessor of Svelte.
Yes, many people have misconceptions about SFC. When svelte was announced together with how SFC works, Evan quickly explored the possibility and implemented it in Vue and that is how Vue compositions API was born (and the moving away from Vue2 options API began). Like how Evan took the better parts of react, the vue team also tried to explore implementing a compiler runtime which obviously would not be feasible because it will change the entirety of the runtime engine as mentioned in Vue 3 docs. Same thing with Quik and Astro, all those better parts cannot be implemented with Vue due to how the initial runtime is designed.
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.
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.
Also death knights button mashing in WoW
did not see that coming
That reference to D2 got me, i feel you!
Hmmm... Svelte is becoming a compiled version of Vue 3 now...
Vue OWNS svelte
Always has been. From its single file component architecture to its minimal syntax with script setup.
I’ll stick with Vue though because it’s 100% completely native JS, unlike sveltes compiler magic. Also, I can use Vue without a build step if need be.
I don't quite get why people prefer svelte over Vue. I use Vue at work and Nuxt is actually 🔥🔥
@@bobDotJS The killing feature for me personally is Vuetify.
@@bobDotJSnuxt 3’s dev tools are a game changer! It’s hard to work on frontend code without them
Also useFetch makes react server components look like a chump
if $effect had another name, people would stop to make references to React. The concepts are not the same.
It's literally the same thing now. 😂
@@fitemilkhero definitely no. You don’t have to deal with the useEffect craziness
🤔 it does have another name... `watchEffect` ... I think it's called.
What craziness? @@SilvestreVivo
@@noherczeg Manually managing reactive dependency arrays.
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.
Agree 100%
$store == useState 🤣🤣
Thanks for teaching me about labels! That's gold!
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?
In truth, HTMX is just a modern way to do something people were doing before the whole client rendering craze. I reckon he's excited about it because he's primarily a backend dev and it lets him control the state of the app entirely on the server and not have two copies of the same state that could go out of sync
It might be like how Rust was for him, he was head over heels for it for months and then one day he snapped and stopped recommending it
@@daliaredsThe Rust leadership took a giant shit in the punch bowl. He still recommends Rust for some stuff but yeah, he got out of the cult just in time.
HTMX the name and tiny scripting language is fairly new but the concepts it puts forwards are the literal building stones of the web with a bit more flexibility now that we have JS.
@@ryanleemartin7758 "just in time"? the rust drama is extremely overblown at this point. if it were as big a deal as you were implying companies would be dropping it. there is drama with every language.
@@crab-cake I referenced the leadership. The drama is just a symptom of the real problem with Rust which is: "Rust will always be political". That, in my view, is a poison pill and a breeding ground for cultish behavior and a wellspring for endless drama.
Some people don't want to deal with that crap, it's extremely offputting.. way more than tech related drama or individual personality drama. If you are into the politics that Rust supports then you think it's all good, nothing to see here and the world is being saved by Rust. to which I say.. good luck. It is a great language.
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.
uh, no. those doesnt use signal where svelte 5 uses signal. its funny when people judging without knowing the deep inside
Basically Svelte is becoming in Vue 3 and I can finally also add another JS framwork to my CV :)
They say knockout was right but you can change it to Vue. It’s exactly the same as composition api
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
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
Yes but this could have been unified far less cumbersomely if the APIs didn't already have all the baggage of Svelte's mistaken insistence of building in magic pixie dust.
I mean. Now it’s a runtime thing. Also, Vue still have a bigger ecosystem.. i kinda want to try Vue again after this news..
I think people just dont like the "$", (JQuery PTSD ?)
why not just make it "state(0)"
@@RiadDZz No, the $ is not the problem, the problem is that it really loses its simplicity. That's why I loved it, but now I am not so sure anymore.
@@RiadDZz php ptsd..
Svelte is finally growing up!
They fixed all the things that bothered me about Svelte.
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.
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.
what about skeleton ui?
flowbite is good
Appreciated your honesty. Svelte 5 runed Svelte.
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?
Yeah it's weird
Not quite. It's like Vue 3, but not quite as nice because of all the baggage tacked on from the old API.
what crack u smokin?
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.
Virtual DOM :/
I used to be a Vue guy, it's really good, especially compared to React and Ang**ar. But give Svelte a try, it's a breath of fresh air. You can just ignore runes
@@nooalovern they’re adding vapor mode this quarter which is signals that you can enable at the app or component level and will work without a build step as well
"right all along". You are aware that they did a huge change as well just a few years ago, right?
Vue has gone through 3 main phases as well; Vue options API (The old, ugly, domain-cutting syntax), Vue Class Components(The old, 2nd-party, class-based boilerplate-ridden syntax), and the most recent composition API.
All of the major languages have had major changes throughout the years; Svelte is far from alone in this. React has had the most
@@modernkennnern I think he’s referring to Evan You’s “svelte script” tweet about the problem with having a separate JS environment in the compiler
its rethinking 'rethinking reactivity'
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.
a feeling of deja Vue
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.
I think Webgl is cover the creativeness side of things.
Well we have (had, until its disastrous blunder) Unity on the game side, the animators moved on to Krita or other tools I don't know of (if they don't use Animate), and some of them who took a liking to as3 actually developed Haxe. Also social media as a whole developed such as RUclips or Soundcloud. And yes we have had WebGL for quite a while now, so I'm not really sure we need flash again.
„Knockout was right all along”?
The joke’s on you, I’ve been just using Knockout all along!
so the svelte team built vue 3 but backwards? 😂
Isn’t rune a data type that stores codes that represent Unicode characters, aka code point?
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.
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.
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.
Yeah I don't think a lot of people realize this. the power of writing the same code inside components and es-modules, is the most liberating thing.
it avoided react, now it's becoming react. NOICE.
So svelte 5 is vue 3. Ok.
and vue 3 is just worse react
@@buc991 I am curious what made you come up with this idea
@@buc991how can you be so wrong lol
yeah but worse, heavier, and slower and wrapper dependent
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
Interesting, I put Svelte in my pocket to playing later!
How can I achieve routing in htmx?
Name reactivity functions with fancy word and make marketing)
Now it's code looks even more like vue3 =)
that minecraft kind of shit at 2:28 got me laughing so hard
5:40 tf is `.js`???
"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.
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
so svelte made a full circle back to Vue 3 🤔
Nice, exactly appeared at the start of the segment
Thoughts on angular breaking changes??
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+
They plan to deprecate/completely delete it in svelte 6/7.
Theyve needed to fix this since the start
I'm also skeptical, it feels like we're losing the best parts of svelte and making more react -like. I like the store changes. But everything else seems unnecessary.
@@WinterHawke Yeah agreed, I already had a hard time convincing colleagues to use svelte over react, now there's even less reason to switch. And if performance was really an issue, solidjs would make more sense.
Look at the introduction video. It's still svelte. The termonology "signal", "effect" and "state" are unfortunate. You draw a connections with patterns that emerged in other frameworks you clearly dislike. But that is not what svelte is doing here. Watch the video. It's nothing like that signals/react/vue at all. Instead of highjacking javascript `let x = 1` and `$: y = 2 * x`, you write instead `let x = $state(1)` and `y = $derived(2 * x)`. You don't even import `$state` and `$derived`. Those are just markers for the compiler, not functions. Nothing else changes, except that those things now work outsite .svelte files and in nested code.
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.
I think about that tweet everytime i look at svelte code
instead of outer i always use "break dance"
The appearance of the word colour most likely means Rich Harris himself wrote it.
I like Angular
The “$” syntax just reminds me of AngularJS, so much trauma.
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.
Where does vue fit in?
And Vue has been trumping them all for years
why svelte > solid
Performance is better of solid
@@JakoTheWacko I did not comment on frameworks that I did not use, which is the case with Vue.
@@shrin210 Maybe, I but like the Svelte approach and syntax in particular more.
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
}
Svelte becoming Vue
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?
Reusing stateful logic across components required stores and the store contract is rather awkward. If you want to reference the current state of a store outside of .svelte file you have to use a helper function which comes with a warning that it is not efficient and should be avoided in hot code paths. Runes fix that.
Svelte is going from a soft magic system to a hard magic system. People are smad about it
Underrated joke
love this
What makes htmx better than hotwire, other than being newer?
I think they are just kidding about htmx.
1:30 That's Rich lol
Most important part of the video 2:28
$ brings me nightmares from my 17 years of PHP. Ugh!
Also, is Svelte turning silently into React?
always hated 'effect' as a name.. feels like it makes sense to be named something else
Mobx and chill going on 7 years.
I'm not sure I like the direction svelte is taking
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
Don't underestimate the burden of having to use `writeable` in your stores just to move it from the SFC to a composable.
99.99999% of stores in Vue can just use plain refs with composition API.
Even if you reach for Pinia for the added super powers, it's 100% compatible with the composition API which means it's a copy-past refactor.
@@fennecbesixdouze1794 I hadnt considered that. I've been with vue since the start of the vue 3 beta and haven't found any reason to switch
You can skip the .value in Svelte when updating the value
count.value++
count++
@mkvetny vue is removing the .value when they release vapor mode. But even still, count is a proxy object, so .value makes sense
So basically Svelte is becoming React
The coin flip hahhahahha
thank you for the minecraft slurp
When I'm going to see Elm-like things ?
Is Svelte 4 becoming React?
"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.
i agree but there is one problem
when you have it inside a function, within the html template, you can't narrow types well
i have been writing my own hobby ui framework, its a problem, solid has the same problem as well.
its not about its ergonomics
its not nice, but a good solution for narrowing issue
I guess when you don't go to college and you are simply a braindead frontend dev I can see how compilers can be magic to the plebs.
Funny, vue tried to become svelte with $ref() and ditch '.value' using reactivity transform though they canceled it. Everything is just going circle lmao.
this new reactive update looks good
11:33 lmao funny af
Vue 3? Yay 🎉
this guy works at Netflix btw
Svelte's syntax seems to become worse every time
finally the svelte claim that they make a witchcraft; how magically cool it is
but I support the lifecycle instead of just $effect,
7:09 they finally killed React
*chefs kiss*
I dont think i like the direction svelte is going with this.
This feels like Vue3. And what about TS?
Svelte saved my fucking life!
Quik too buddy!
Every library is converging towards the React model. About time.
React but signals, solid was right
Converting to Vue, not react
@@hamm8934 vue just taking stuff from react and renaming it
because react is the best one, almost no point to use anything else
@@buc991 a case for using anything else: you have a large GUI table and need up update values reactively in the table. Good luck doing this with your vdom
Best framework is state on the backend and dom manipulations when needed ❤
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
" useTask$/useVisibleTask$/useResource$ " ---> what a strange names... duurrrrr!!!!!!!!!
Yet another atomic store like reatom. Reinvented. Congratulations 🎉
Svelte Power!
Svelte #1
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.
i choose vue because had nice router but now seems like i made right choose
Unless I'm mistaken, runes are analagous to Vue's `ref`, `computed`, `watchEffect`. From what I've read in blogs, SvelteKit is the reason to stay with Svelte over Nuxt+Vue.
And those who don't know about function use two nested for with a break. 😂
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.
Yeah, Svelte is dead.
Svelte was never vanilla js. It was a completely different JavaScript environment. These changes are making it actual vanilla js (or closer to it). For instance, let count = 0 being reactive state is not vanilla JavaScript. If I write this in a js file, this will not be reactive. If however, I create a proxy function to reflect state changes (such as in Vue) and call it ref(), this is vanilla JavaScript.
Goodbye svelte
Softcore React
svelte is nice
Turns out the: Svelte is just "let count = 0;" was a mistake just like the React guys where telling you for years. :d
Yup. I’m a Vue guy, but I’ve been saying since 2020 that svelte’s decision to make its own JS environment in the compiler is absolutely a misstep that’ll cause more headache down the road.
Lol. My thoughts exactly.
One positive sideeffect runes will have is for the first time Svelte devs will have an aha moment and understand/learn React.js😂 I know the underlying reactive model is different but at that time Svelte absorbed many people who jumped straight into Svelte without knowing JS and they where easily confused/distracted by simple function calls or destructuring and the same devs will now for sure feel more ready to write more complex code without complaining.
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...
Add some bass into your mic, ears can't handle this much treble
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
JQuery vibe