Svelte 5: Speed, Simplicity & Size

Welcome to Syntax on this.

What what What's going on? No. I'm I'm trying to be animated because of the it's gonna be on video now. Although, should we do a little bit of faces first?

To Yeah.

Let's just leave all of this in. Okay? Welcome to syntax, to And this is episode number 7/23. We're gonna be talking all about Svelte five, what you need to know, what's important, to what the big picture stuff is and and what it's all about. And you know what? Welcome, everybody. This is officially to The 1st video episode of Syntax. Now you may have seen some prior episodes being popped up. We we decided to just take some of our to Bos episodes of the past couple of months. Let me just throw them up. And those those weren't actually recorded as being a, quote, unquote, video podcast. So to This is going to be the format going forward here, and you may see some tweaks along the way. And what we're gonna be doing here don't fret for all you to Audio listeners out there, not much is going to change for you. We're not going to be describing things that you're seeing on screen.

To You know, perhaps in the future, if we are talking about code, we'll be showing some code, but we're not gonna speak about it any differently than we are currently. So to Welcome, Wes. How's it going?

Going good. Pretty stoked to be here. I've been fussing with my mic and everything. Have we even like, should we introduce Sanity, or or what what

Node do we introduce Randy? Maybe we should introduce him on the potluck episode Deno this is a hasty. To Randy, you're just gonna have to sit in the shadows for 1 more episode, and then we can introduce you into the next one.

That makes more sense, I think. And, to Likewise, if you're introducing any code into your application, which, you know, you're doing all the time, you're probably gonna wanna ensure that you have error and exception handling tracking because, hey, if you introduce anything, you could break your code. You know what to Breaks code writing code. And if you write code at all, well, you have an opportunity to have a bug slip in there. And more than just bug tracking, I think this goes right along with to Some of the messages of Svelte 5.

You wanna be tracking that speed in the size of your code base, to You know, what you're serving up to your users at any given point. So check it out JS century.i0forward/ syntax to And give it a try today.

Alright.

Svelte five. Wes, to give you some background here, I have been cranking on a real world app. To I've mentioned it a couple times on here. It says habit tracking app. That part's not important. The important part is is that to I've been getting my hands real dirty with Svelte five. I've been using just about as many of the APIs as I can in a real world context.

To I've been finding the, pain points. I've been, you know, really enjoying the experience.

To And then just yesterday, I got to talk with the Svelte five team a little bit about well, the Svelte five. The Svelte team a little bit about Svelte five and, to you know, where it's at and and what's going to change. So I feel like I have some pretty good info here.

Big picture here is that most of the APIs in to 5 are finalized.

Now granted there could be some new stuff specifically around animations, but for the most part, to You can take a look at runes today in the previews or the docs and have a pretty good idea of what to The end result will look like once this stuff is released.

The the big in my mind, and this is not from the Svelte team, by the way, that a lot of this is is my thoughts.

To My impression's that Svelte five is about 3 things. It's about speed, simplicity, and size, to Which tracks that it's s. Svelte team, if you wanna use the fact that Svelte 5 is speed, we could come up with 2 more s's to If you want, and then you could have 5 things Node start right away. Triangle.

A triangle. Speed, simplicity, and size. And you'll see this pop up in a lot of ways throughout the course of this. To Speed, it's very fast, like, very, very fast size. Bundles are very, very small. We will talk more about that.

To And simplicity in these APIs, what it's doing is it's essentially taking out a lot of the places in Svelte where it felt like to There may have been 1 or more ways to do things and, like, really nail it down to, like, here's the way in which you do things now, to Which is great, in terms of simplicity. Yeah. Alright. Let's hear it. I wanna know what all these features are because to We've got the syntax site, and I'm sure, I would love to implement

some of our new features with these these things. And, like so it's to it's released. Like, right, like, are we able to update our site to Svelte five? I know we updated to SvelteKit 2,

just a couple days ago. To This is not released. It's still in beta.

It may even be alpha. I'll let you know it's in the next flag. It's under the next flag. To Now I suspect a release candidate is some is coming sometime in the next month and a half.

To You Node, I I would imagine that you're gonna get to release candidate phase here shortly.

To So that's good news for anybody who's looking to adopt this stuff. That said, I'm running an app in production with this stuff right now using the next version of it, and to That's not a smart idea. But if you're like me, sometimes you forego smart ideas to do funny things. Yeah. Yeah.

To Yeah. Alright. So what are runes? Tell me. I'm dying to know here. Yeah. Okay. Well, a rune kind of refers to the idea that in Svelte you know how Wes patiently had, like, some weird magic symbols in Svelte. You had the dollar sign to indicate reactivity. Right? Yeah. And sometimes you did double dollar signs to get rest props.

To Well, ruins kind of, like, takes that idea and and defines, like, alright. We have the dollar sign, and that's going to be considered, to Like, the magic symbol. It's it's the rune. Right? It's it's the symbol that indicates, hey. There's something interesting going on here. To And it really tackles a couple of big areas. 1, state.

In Svelte before, you could do state by just having a variable, or you had a writable to or a readable. You had lots of ways of doing state. In Svelte five, state is being done through the dollar sign state to Rune. You create a state, and then you can update it, reactively within a component. You can create, to bigger, better global stores outside of components and have them use the exact same APIs, which was one of the problems before with Svelte to was that if you're pulling state outside of your component, now you're using different APIs than if you're working with state locally in your component. That was always a bit funky. Bit funky.

To And another thing is that, like, big custom stores become way easier to reason about and work in. So, like, you'll know that to We have a big old custom store for our audio player, which many of you have noticed occasionally causes, annoying bugs here and there. And many of that stuff is to Like, when I'm working in Svelte five, I'm thinking, man, that player code's gonna be great to refactor. It's going to feel awesome to use, using this new state route. To they're based they're based on signals, which is something that you don't have to worry about. They're under the hood. Oh, that's actually kinda nice.

To you don't have to really know what a signal is. You just you still have to know what a variable is. Right? Like, we're not moving to set state.

To Right? We're still using mutable variables. So if I make a a state and it's an array, I can still use to push and slice in all my mutating values just fine in its its reactive variables? Correct.

To Yes. Awesome. And that's really the benefit of this stuff is is when people ask me very frequently, hey. It looks kind of like React.

To And and and I think it does not feel like React because, one, you still get that variable of mutating reactivity.

You get, like, fine grain reactivity in, like, let's let's say you have an object full of a bunch of props. You can go in and reactively update just, like, one of those values. Right? And because it is to Signals based.

You end up getting a lot of benefits overall in terms of this fine grain reactivity.

But in reality, again, it just to It functions one way, and once you get used to it, it's very, very nice in many ways. You also have this derived rune where you can essentially track to a run to have a derived value. Let's say you have a state value that's 2.

You have a derived value that's, to your state times two, that derive will always be in sync with the state value. If you update that state value, derive will update as well. To that's a really nice way of doing things, I think. We have that on a couple Scott on the Syntax website where we take our state,

and then I need to, like, to derive some values. Right? Like, I need to I think in some spots, I think Wes filter an array, depending on on the values. And it it was always a little bit funky Wes you have to, like, sometimes wrap, like, do the dollar sign, colon, and then wrap a whole block Totally. Inside of that and then and reach outside and update another state variable.

To This derived is really nice because you can say, like, okay. Like, it's not a new piece of state, but you should be watching, to internally what your pieces of state are doing. And I actually went through not the Svelte state, signals, but I went through the PREACT signals.

So if you are ever wanna read a fantastic I don't know. It's probably 800 lines of code or or 500 lines of code. To go look at the preact signals. It's not our only react thing. It can be used with vanilla JavaScript, and it's a single to a single file for the entire library, and how they detect whether variables inside of to a derived function, our change is really interesting.

It's essentially just watching for variables that change, and then it says, oh, to something inside of me changed, I must then update my derived value. Yeah. Yeah. In, like, view, they're called, like, computed variables.

To This is something that I think works really well. I've I've been using it quite a bit.

You know, a lot of the runes kind of videos that people have been showing about them show, like, situations where, you know, when you console log something, your state can kind of get out of sync because of to Perhaps, like, it's in a closure or you're doing some you know, you're just trying to understand what this variable is at any given time. And I personally to don't always hit those. But when I do hit those issues, they are kind of confusing. Like, why is this value not what I'm expecting it to be? To And I think a lot of what this state variable or state run does, besides just giving you one way to do state, is it makes working with state more reliable to And generally more flexible.

There are some things where you have to do getters inside of, like, big old custom stores. To That will be a learning experience for some folks. You cannot export a primitive state. So if you do export const, variable to That is a state, and that state value is just a string that will not be reactive.

So you have to throw that in an object or a custom store. Something you could do with writables that you can't do anymore.

But, again, these are gonna be small learning experiences that people to are going to get passed, and there's there's most likely going to be errors in your Versus Node that says says, hey. Don't do that. Do this instead. To next is dollar sign props, and this is the new way of doing props.

Sorry. I just looked at the example before you even explain it, and I was like, this is I could if you go back to the 1st episode on Svelte,

I could not understand the export thing of the Svelte component. So to sorry. Go ahead. Yeah. And you're right. And not only can were were you, like, the type of person who'd be like, I don't I don't get this export const props, which is how you did props before, to Basically, you you say let, and then you destructure your values out of an object equals props.

To The reason why this rules is that, 1, you can do all of the types for all of your props at once. You don't have to type each prop individually. To So you can pass types in. That solves a lot of issues.

2, Wes props in Svelte were reared before. If you wanted to get the rest of the props maybe weren't exported. You did this dollar sign dollar sign props. Now you just use the spread operator like you would in normal JavaScript.

To That greatly simplifies it. That's gonna be really handy for like, if you have, like, a presentational component and then you have, like, the actual, like, a component that does your functionality, often, you find yourself passing hot potatoeing it just from the presentational component down to the functional component, it, and you're rewriting it many times. I found that really frustrating to do, and this will allow you just to to spread them all down. That's something we have been able to do in React for a long time. Will, I have a question. You might not you might not know the answer to this. Is that, to, is class going to be involved in those props? That's one thing that always drove me crazy is you can't pass, like, to a class from a custom component down to the the div unless you name it something like Klaz with a z. Oh, man. To That is not something I know, but I can actually test really, really quickly here. I'll I'll explain why I want this. To so often, I'll build a custom component in Svelte, and I wanna slap a class on it, because to I want to style it in a certain way, and you're kind of crossing the, like, style boundary there. Where you specify find the class, that's sort of done in, like, maybe that's done in your page layout, and your page styles will be applied there. And then you go inside of your component, and to And any styles that you write inside of that component will then be applied. And it I guess Svelte doesn't know that you to use a specific class, and it's being passed in. But I I do find that really frustrating because I often just wanna oh, I'm using this component, but to It's like a a different version of it, and and you find yourself just, like, reimplementing the whole class structure. Like, you make a a prop called to is big or, card layout or something like that, and it's just like, classes do this already. Yeah. So I in the preview,

to I am getting unexpected keyword class when I try to do that. That doesn't mean necessarily that that's the way it will be. I that's a great to thing that I think, we should ping the Svelte team about. Because, when I was talking to them yesterday, they wanted to know about all these little weird to things that you could think about. Yeah. And, that's a good one. I don't think you actually are able to destructure the word class to because class is a res it's a reserve word, and that's why React has class name, unfortunately.

Yeah.

To Yeah. Okay. But if you if you destructure it with a Wes, like, you collect them all with dot dot dot, it's probably not in there. Hey?

Let me,

to Let me actually try that. Because it's not a prop. It's a HTML attribute. To I don't know how they would be able to do, like, the they they tree shake your CSS. So in Svelte, if you don't if you have a class to That is not used in a component, and it has a bunch of CSS associated with it, Svelte doesn't it just throws that CSS out. Right? It's unused. To and it, like, it has to be statically analyzed. So if the class is written in a different file, I don't know how they would figure that out. And to maybe I'm just, like, not doing it right, but I always found that to be a bit of a pain. So I may able to pass class as a prop with rest,

to And that seems to work if you use the rest, but you cannot destructure class. Oops. But it is collected it in the rest. It is collected in the rest, and I was able to even output it into a template.

To I can make this available to anybody who wants to. I'm just working in the Svelte REPL here. So interesting enough. To Next one is going to be the effect, which I think this is the Node, the rune effect that, to people look at this and they say, yeah. It kinda feels like React, doesn't it? And I I'm here to say it does not feel like React because to I think the things that feel yucky about the React are the, dependency array and maybe not necessarily knowing what's going to set it off. With to Svelte effect essentially just replaces the dollar sign, colon, block syntax, and that is a good thing in my mind to Because it's way more predictable. Another cool thing about the effect is that it's removed entirely from server side rendered Node, so your to Server side bundle is smaller, which is great. Svelte can be smart enough to say, hey. We know this is only going to run on a side effect. To When something else happens, you can run. So what that means, Wes, is since it's removed from your server side code, you could throw, to

like a document dot whatever inside of there. Which Or an entire client side library. To

or an entire client side library. In their demo, they were doing, like, a Canvas style thing. And the reason why that rules to is because if you've ever worked in React, in a server side rendered context, you'll know that you can't use useEffect. You have to use

to Use isomorphic effect for server side content or you you know, the the if you try to throw a document anywhere in a React component like that, it's going to complain unless, of course, you're doing these new client side components. Yeah. Someone might be asking, like like, what's to who cares about how big your server side functions Yarn? Your bundles are on the server side. Right? Like, doesn't really matter, does it? To No. And the answer ESLint actually does matter. Now that we're going a lot more to, like, serverless and, edge functions, to the smaller they are, the faster they will be parsed and sort of boot up. And, also, there's there's a hard limit to how much code you can put to in a serverless function, edge function, and you you do end up butting up against them. Especially, sometimes, you you have these little libraries where you don't expect them to be huge. And in the next potluck, we have a a question exactly on that JS to things that accidentally don't get tree shooken,

to, can can actually really bloat your, your end bundle. Yeah. So the cool thing about effect here is, again, it functions kind of like the React use effect in which it runs to When something has changed. Now what does it run when does it run? It's it's not about component rerenders in Svelte. We're not, like, thinking about a function recalling itself like you do in React. To You're thinking more or Wes, is the stuff that's used inside of here, need to be updated or, you know, when something happens, when something changes to That's referenced inside of that effect. That effect will need to rerun.

And so that that's it. You don't have to worry about infinite loops. You don't have to worry about dependency arrays. To Another really neat rune here is the inspect rune. And, actually, I'm sorry. Before we get off effect, you can actually do nest effects too, which to It's kind of blowing my mind right Node. Okay. And I have it yeah. So in in Rich's example, he showed, like, both the initialization script as well as, like, the listening TypeScript for a Canvas drawing app.

So an effect would probably be handy if you were watching like, let's say you have a name variable, to, and somebody types into a text box and and changes their name, you might want to write an effect that then updates that value in the database whenever they type on it. Is that maybe an example of when you'd use an effect? To

Maybe.

Yeah. I'm gonna tell you what. Effect pretty much replaces any time you would think about doing dollar sign, colon, to a block.

Okay. Just Wes this code variables change so it's not derived. Like, you're not figuring out new state.

To Correct. In fact, that's a that's a a a thing they want you to know is that, like, if if you're thinking about to Changing state,

you know, when something when some state changes doing something when some state changes, you probably wanna use derived. Right? Kind of like a at event listener it for a piece of state when you wanna have a side effect. You wanna you wanna send some data elsewhere. You wanna log something or maybe not even log. We'll talk about the next one. To Yeah. But it makes sense. One of the ways that Svelte's different from React is that you're con you're more frequently working with the DOM itself. To And so I think useEffect

is going to be particularly useful when working with the DOM itself.

Next is inspect, which is kind of like console log, to But you'll know that because unlike React, Svelte isn't just a function that runs, console log would only run once unless you did the to Dollar sign, colon, console log, which was obnoxious, but it made sense.

Now we have this in Spectrum, which is actually way better than a console log to Because it gives you context. It says, oh, this was an updated event. So in your console, say, component or variable updated, to Or I'll just say updated or Sanity based on what the event was that caused this thing to change. So it it is essentially a reactive console log, gives you a lot of context, and there's, like, more freedom in here Wes there's even a callback. You can throw in a debugger statement in there. If you're if you're the type of, person who loves use the debugger. It works really, really well in that context as well. Oh, I like that as well. That's again,

that's something I use quite a bit JS you throw a console log in, like, the right before your your render.

And if you want it to rerun when the values change because you wanna see what the actual updated values look like, it seems like usually, I would think like, oh, yeah. Just

to an effect and put a console log inside of there. But this is even 1 step further because I realized that's something that is super common. To Pretty cool. And and that's you know, a lot of these things, I think, at first glance, you could say, ah, maybe this feels like you're adding more complexity. But in the end, I think every single thing here to Adds to the simplicity of of Svelte because there now becomes one way of doing things, and that way is both good, very good, to easy and very, very fast. So I love all of that. Next up is snippets. That can actually be the 4th s to in the the 5 s's that we were talking about. Speed, simplicity, size Scott. 5. Snippets, and Scott. There we go. Scott with Scott on the top. To Yes. I love that.

I love that for me to be included in this Vault 5 release. Snippets are are basically ESLint components. To this is something that I know Wes has been asking for for a long time. People in React land love to have multiple components per file. Like, maybe you're just breaking out a singular to section of a component that gets looped around. You don't wanna have to create a whole new file, a whole new component just to do that, the whole rigmarole of exporting and passing props. To Now you have snippets, which are essentially, you're defining a section of code that can be reused as a snippet, and then you call it like a function using the at render keyword.

To Which is fine because if you need more arguments passed in, you just pass them in as an object. So not really anything crazy or different there.

To Yeah. I know. It's getting there. But, like okay. So now I'm building components with multiple props. It. But then if I want multiple in a file, then I gotta, like, I gotta move it from multiple props to this, like, weird object. It's not a weird object. To just a object, but alright. I'll take it because I certainly hated having to put things in in a separate file when it's to especially with an if else. Like, you have the same component, and you wanna render you wanna render it this way if if this is the case, and this way if it's the case. And, to oh, I need to render this in 2 spots. Now I have to put this whole thing in a separate file.

So I'll take it. I think in practice, you'll like it. Okay. To I've I've been using it pretty gratuitously, throughout my app. And in fact, at one point, I think I had, like, 4 snippets in 1 file, and to It was really easy to reason about in that regard. I have since, chilled out a little bit on the snippets and moved things into actual components as the application has grown, to But I think that's a good indication of how you'll probably end up using this stuff. Right? Because oftentimes, when you are prototyping, you're just trying to throw something down. You're trying to throw it down, get it working, and then maybe as the application grows and you see, oh, wait. I actually need to use this component elsewhere.

Perhaps to I will turn it into an actual component.

And I bet I don't know if this is the case. I don't see anything, but I bet you can infer the types it from the props object.

So you could just, say, like, you could use TypeScript's partial to type of props.

I bet I bet that would work. So you're not, like, doing a whole bunch of typing. You could say, like, alright. Well, this this function is taking a partial or, to, pick. You're you're picking these 2 props out of all the props that were passed in, so I don't think it it'd be as bad as I'm thinking. To You're you're not going to have to individually type those props JS far as I know. Oh. That get passed into the yeah. And let me even double check that with my, to with my code base right now. Right now, it's not possible to add types to snippets, and the parameters, this is something we hope to address before we ship Svelte five. To Okay. Because it's you're essentially just making a function. Right? So you JS a function. Yeah. Would have to type the function itself. Right? Otherwise, it don't know what to pass it or to or what the type of the data is coming in. Yeah. That tracks. Okay. Cool.

Another cool thing about snippets is they can be passed as props. To So you could have, like, a wrapper component, and you could throw a snippet as a prop and then access that inside of the component itself. To And the neat thing about this is it kind of replaces the need for slots because past snippets are way more powerful than slots were. To I think we still need to see some code examples of about what that looks like considering slots are used throughout SvelteKit and all sorts of stuff. So, you know, who knows what that is, but to Slots will probably eventually be, removed in favor of snippets.

Makes sense. I was just about to ask, to can you pass can you export a snippet, from a file? But if you're doing that, you probably should just make a a component. Right? Yes. Probably.

I Node. There there becomes a whole thing there, right, where at at what point does it become a component? And if you look at my code base to Over time, you can see that most of my snippets did become components once I needed more out of them.

Next step is events, to Svelte syntax Node just becomes the straight up on click, and that's the same with all events for Svelte components. They all just become to The on whatever attribute that exists within the browser. Right? So you're now getting to, again, align yourself to With the browser, no more fancy naming special

situations there. Kinda like that, though.

To and Yeah. What I see here stood out or what? Yeah. I just I kinda like the the syntax of it. I never liked the fact that on click was not camel cased. To Yeah. I know. I get it too. It's just like a on blah blah blah. Right? Yeah. Especially, like, if you have custom events. And I just asked them about this. Yeah. This custom events. I'm also seeing here the to the the pipe to prevent default is gone forever.

I know. I love that. Let me let me tell you.

To In my conversation with the Svelte team, that was, like, one of the because it they mentioned it very clearly in the docs that the prevent default is gone. To And I had to ask just because I wanted to, like, truly make sure that it was gone.

The way they see it is that you can just do a wrapper function around it, to And they might even export those from Svelte. You know? It seems like It's not the it's not the same. But yeah. To all of these new

features that they've been rolling out are just JavaScript.

Right? All of Yeah. Yeah. Yeah. Yeah. They're all JavaScript.

To then Node they're getting rid of the custom syntax, and they're getting rid of some of the magic.

What's the

to what's the Svelte six endgame here? You know? The Svelte six endgame, I think, is more of a focus on this, the simplicity.

To And it does feel like you're aligning with the way they the way they're describing it is I think it's like to Magic, not magical or something. I believe that was the saying. I yeah. We're like they want it to feel like magic, but they don't want it to feel unpredictable.

To And so a lot of this is, like, aligning with browser APIs, and you saw that with SvelteKit a little bit. Right? Their usage of, progressively enhancing forms. You're aligning to With real HTML APIs, you're just enhancing them further.

Last little bit here are 2 new built in functions. There's a few, to built in functions to Svelte. Like, tick is one that, we've used before to,

you know, essentially get the next to tick in Svelte. It can be useful in context in which you just want to wait a frame. You know? Yeah. Like, you wanna put something at the end of the event loop. So I have a to I have a package that is incredibly popular called wait. That's essentially a promise that resolves after it. Over many seconds, you pass it in, and I use it all time for just wait 0. And Scott says, hey. You don't need that.

To so has that built in. Yeah. And it's great. It's one of my favorite APIs. I use it all the time, when I need it. But now there's 2 new ones called on to Track and unstate. Unstate just removes reactivity from a state variable, something that if you wanted to, like, really dive into maybe some perf there, you have something that you don't update. You can unstate it. And untrack, I think, is actually kind of interesting.

You use it in an effect, to But it removes something from being treated as a dependency. Because remember, in Svelte, you don't have to have the dependency array. To But let's say your effect is running too often because something is updating inside of your if you wanna remove something, you use the un to track function. And that's it's kind of like a reverse dependency array. Right? Oh, so But only if you want it. Let me let me think about, like, how that might to might work. So you have an effect

that is rerunning every single time the name changes.

And we also to need another variable inside of that effect, but that variable updates too often. Right? So Yes. You say, okay. Like, to you still pass the data in, but don't rerun me when, I'm when that variable changes. Only rerun me when the the rest of the tracked values are. Dead on. That's nice. I could I could see that, like oh, I have a good example.

Mouse x and mouse y. To right? Like, you do need the mouse x and mouse y, but don't rerun every single time Oh, yeah. Someone moves the mouse. You know?

To, so pass it in, but don't rerun. Yeah. Those those are nice little performance enhancing one. And there are several things that I didn't mention, like to state dot frozen or effect dot pre, effect dot active, effect dot root. There are nuanced to Tolinski here that you're not going to need to get into in 99% cases because, let me tell you, I built a whole app with user accounts and Database, and and I've I haven't had to use these ones. So for the most part, these are things that only advanced users are gonna wanna dive into and not stuff you're gonna need to think about too much. To So let's talk about the last benefits of this before I give my final thoughts.

Smaller output.

Here's a post from Reddit. I migrated a 100 and 47 components, and my output is 55% smaller.

So that How? Seems like a pretty huge win. To I I think they just removed a lot of the stuff from Svelte at least. Rid of it. Just got rid of it. Yeah. So that that's one of the big things they wanted to emphasize is that, to your code probably will be well, not probably. It will be smaller if you use these new APIs. Okay? And in the eventual to situation.

Like, who knows if this happens or not? But in the eventual situation where signals get added to the browser, you would then lose even that much more code to from your your end bundle. Right? So that's that's something to think about. Speed, it's very, very fast. I've included the benchmarks here. To The Svelte team did want me to let you know that, like, these benchmarks are you know, some people optimize their demos for these benchmarks, and, therefore, to You should take all of these benchmarks with a grain of Scott, but even taking them with a grain of salt, Svelte five version, next 35 to is approaching native vanilla JS speeds all around. And compared to to React or any of these other frameworks. It it blows them out of the water, so it's

shockingly fast. Yeah. I'll say that. Looking. To What's what is faster on this benchmark than Svelte five? So Solid is just beside it, above it. To vanilla.

Js. 1,000,000. Js

is really the only one that I've heard of on this list. To Right. Wes impressive. It's impressive. It's super duper fast. And they wanted me to let you know that it's faster even than to This kind of leads you on because it's going to be faster in normal use cases that are Scott, like, benchmark specific use cases. Right? Like, in real world use cases, you're gonna notice the speed. But they also said the the framework shouldn't be the bottleneck ever. That's not going to be your bottleneck.

Going to be other things. So we're approaching a situation here with many frameworks, whether that is Solid or Svelte, where the framework is not the bottleneck. It's that fast. To suspected release, like I said. Hopefully, we're gonna see an RC sometime before March. Could be around March. Who knows? To nothing official there.

There will be a code mod of some kind as well to help you update. To Who knows what that looks like, but it could probably be taking care of a lot of the easy stuff for you, like changing props to be the props room. Who knows? My thoughts overall, to This stuff kicks ass.

I do like it a lot in usage. I think, you know, there is maybe a little bit of a learning curve, but I found myself to Wishing that I was working in these Svelte APIs when I was working on some of the writable bugs that I was having.

I feel like the state's way more Predictable, easier to reason about. It does not feel like react if that's your concern. The word effect does not make it react. To There's a lot of, like, really svelte y things about, this overall. You can also try today the preview app. I'll have a link to that in the show notes if you wanna just your hands dirty with some of this Vercel. What about

backwards compat with the older APIs? Is it is that it stuff gonna stick around, or is it gonna be a big, like, no. You gotta move all your stuff over in one good Yeah. Big go? Almost nothing is, like, removed from Svelte. Wes Svelte 5. So

there are situations where you become in rooms mode where things don't work anymore.

To So it will allow you to migrate 1 component at a time. And, again, hopefully, with that Node mod, eases some of the pain if you have a lot of components to that you're working with. But, yeah, you can do incremental adoption. You could say, oh, all my new components are gonna use this stuff or whatever, to Or you can do it all in 1 fell swoop.

I have found again, most of this time, I'm removing code. To My code feels easier to write, and there there's less foot guns, I think. There's less, like, weird special circumstances.

Sweet. I I think this looks to Very, very simple. Like, it's I feel like I understand it. You know? Not I've I've built a couple things in Svelte. We built obviously built the syntax website in Svelte, and I feel like I know it pretty well, but,

this stuff seems very, very simple and very approachable, so I'm pretty stoked about it. Yeah. I think when I first saw it, I was concerned. To and then just like most things with the Svelte team, after spending some time with it, I really truly see their vision, and it all feels Yeah. More simplistic in the end. To I do have my code base that I'm working on too if you wanna see how I'm using this. Don't judge the code. A lot of this is scratchy stuff, to But, there's there's some, like, real world examples. Like, in mine, I have, like, a global state store, of dates and derived dates and getters and setters and more complex stuff. It. So check it out. Beautiful. Alright. Thanks, everyone, for tuning in. We'll catch you later. Peace. Peace.

To