Svelte 5 is Bigger Than You Think

Svelte 5 is (basically) here, and I wanted to go over the major changes that have made this framework SO much better.
Some great videos going deep on runes:
- [Svelte 5: Introducing Runes... with Rich Harris]( • Svelte 5: Introducing ... )
- [Let's Make A Todo App Using Svelte 5 Runes]( • Let's Make A Todo App ... )
- [Svelte Runes: Awesome or Awful?]( • Svelte Runes: Awesome ... )
- [svelte now has magic]( • svelte now has magic )

[@lcarv20]

Keeping the title of “The best fontend framework” for a few years in a row. Love to see it. Nice video.

[@stephanpio]

Awesome video, I started using classes for most of my shared state and it was a game changer. Realizing I could export the class (for local state specific to a component) as well as exporting an instance of the class and reusing it basically covers all of the typical use cases I have for shared state. I didn't really comprehend the value when I first started using Svelte 5 but I think the pattern you described in the video will become the norm. Thanks to you, JoyofCode, and Huntabyte for providing a lot of helpful short videos on these topics.

[@adriablancafort]

Svelte 5 is amazing! I love runes and I love how cleaner the syntax looks now. Thanks Rich Harris for listening. Now I can confirm that it is "vibes optimized".

[@paulclarke4099]

Great to see you back to covering more Svelte 💯😃👍

[@nro337]

Really great coverage on this one!

[@zap813]

4:00 in practice you'll probably want to use the context API anyway by initializing the object within the top level layout or something, since globals could get reused on the server between requests and leak data. On the plus side you don't have to worry about context rerendering your whole application like you do in React.

[@bmdavis419]

yea its not something you are gonna be using all the time, its just really nice that it exists

[@paulclarke4099]

@@bmdavis419 Would love you to do a video on the proper usage of state in a multi user application using Svelte5/SvelteKit that uses server side data and the proper way to handle state so that data is properly isolated based on the logged in user so that no data is leaked or corrupted between multiple different users 👍

[@karolus__]

Svelte5 is awesome, but as for now it's not production ready. There is plenty of libraries that doesn't work with Svelte5 or u need some additional fixes to make it work. I can't wait for the release.

[@bmdavis419]

The nice thing is it is fully backwards compatible, you either opt in or opt our at the component level, so if u need a lib that does not work with it use svelte 4 syntax, but for new stuff you can adopt runes!

[@arnavshukla2408]

I'd love for you to do a Svelte 5 Tutorial. I'm really enjoying your videos, keep it up!

[@bmdavis419]

just uploaded my svelte 5 + supabase video!

[@RyoukenDofus]

Fuckk Ben you just convince me to start migrating my app to svelte 5 before releasing the mvp

[@bmdavis419]

i mean like u shouldn't but also i did so

[@rumble1925]

Bro don't churn just for the sake of it

[@JustSuds]

I’m using svelte5 in two production apps currently already, and I’ve got to say snippets are one of my favourite things.

[@moveonvillain1080]

Any way I can break into Svelte ecosystem.... Haven't seen many jobs for it. Currently working in Angular 16 have worked in Next.Js as well

[@rerere1569]

Thank you for the video, might check svelte 5 once it's fully released Btw have you tried Solid? I've been playing around with it for a while and it looks like better react in some ways

[@bmdavis419]

never used it, but yea "better react" is the vibe I get

[@HariPrasad-mn5vu]

Finally i found someone who keps that annoying sidebar on the left :-). Btw what theme are you using??

[@bmdavis419]

Github Dark

[@MadeInJack]

How would you create your Workout AI app using Svelte 5 (without RSC)? A video would be great about that, to show that you can build Generative UI apps using Svelte too! Thanks!

[@bmdavis419]

You would just need to do a lot more custom work, working on implementing it now, will cover it soon!

How is the experience of using Svelte5 with SvelteKit? I used Sveltekit a long time ago when it was quite early and got burnt by all the hard coding needed to leverage the unstable parts. Looking at using SvelteKit for a new project but Svelte5 not being stable it feels a bit like getting back in the risk of having to deal with breaking changes.

[@bmdavis419]

I have it in production and have not used svelte 4 in months, personally I've had zero issues and massively prefer it to svelte 4

@@bmdavis419@bmdavis419, your videos have convinced me to give it a try. thanks for sharing.

[@meka4996]

Amazing! I am SOLD!

[@prix4638]

hi, i rlly liked your vscode theme, how's it called? thanks and awesome content!

[@racapella]

github theme

[@bmdavis419]

Github Dark Default

[@BhideSvelte]

Amazing 🎉🎉🎉

[@dan-bz7dz]

Any better abstraction than using a class?

[@bmdavis419]

u can use a function, but I've been using it a lot over the last few days and I honestly think classes are the best

[@buiquockhoi]

Hi, what font are you using? It looks nice and clean!

[@bmdavis419]

Geist vercel.com/font

[@dei8bit]

aguante svelte ♥

[@mikelchannel4080]

look out, there´s a typo in the title, is Than, not Then

[@bmdavis419]

idk what ur talking about ;)

[@forno_nicolas]

Svelte 5 💯🎯

[@scott_itall8638]

Svelte 5 has taken so long to come out I went off and learnt Laravel lol.

[@maloxi1472]

It's actually Laravel that led me to learn Vue (when Vue was still a dependency of the project), before I drank the Svelte Kool-aid. I still like Laravel but would never voluntarily go back to it 😄

[@scott_itall8638]

@@maloxi1472 Laravel has become part of my job now so knowing it well is a must, still love Svelte. Been using Livewire which I'm finding pretty cool the similarities between Livewire and what the rest of the frameworks are trying to accomplish is cool to see. Cant compare them cause Laravel is a full batteries included framework.

[@WebDevCody]

Looks like mobx to me

[@bmdavis419]

kinda does lol

[@sean_reyes]

what brand and model is that keyboard behind you?

[@bmdavis419]

www.keychron.com/products/keychron-q4-pro-qmk-via-wireless-custom-mechanical-keyboard?variant=40487284605017

[@sean_reyes]

@@bmdavis419 I’m honestly grateful with your reply, but I was actually talking about the other keyboard 🎹

[@bmdavis419]

@@sean_reyes oh lmao my bad roland fp-60x

[@nomadshiba]

still uses compiler

[@BhideSvelte]

Which vs code theme do u use ?

[@bmdavis419]

Github dark

[@lordxan1]

Basically svelte5 is vue3

[@luka1790]

Can you store state in a snippet?

[@bmdavis419]

I don't think so, I tried importing them from a seperate file and that did not work, so I think their state is tied to the in their file

[@luka1790]

@bmdavis419 i like Svelte, but snippets feel redundant to me without being assign to state within. They might aswell adopt jsx, then maybe typescript finally works properly within a svelte component.

[@bmdavis419]

@@luka1790 I actually had a real life usecase that was really nice yesterday Basically in the new insiderviz we have a company screener, and a form screener. Both of these use the same sidebar "screener" component, but each need to have a different "Save screener" section based on the page. So what I did is create a snippet on each page, then pass it into the component and render it out there.

[@EladBarness]

For me it’s becoming too much react

[@bmdavis419]

I agree, but I actually think its a good thing. To me runes feel like react hooks without the annoying parts (no dep arrays, no getter/setter, etc)

[@zap813]

I don't get why people are saying this when the only similarity is the use of the word 'state' and 'effect'. How you use them and how they work under the hood is completely different.

[@bmdavis419]

@@zap813 under the hood 100% they are completely different, but as end users the abstractions FEEL pretty similar

[@adriablancafort]

It has almost nothing to do with react. It is much more similar to solid, which looks just like react but works completely differently. Runes are all about signals, which are clearly the way to go for reactivity. And they remove all the ugly syntax of $: in svelte 4.

[@EladBarness]

I don’t have any experience in solid however I liked the ease of use of old svelte and the straight forward approach, however I definitely understand your point, the limitations are clear but I liked the way that the work arounds are plain js without any abstractions, I feel the new approach is the reason why I don’t like react but again I definitely understand the point.

[@gadgetboyplaysmc]

first

[@mikelCold]

I knew nothing about Svelte before watching this, and while you've explained things well, I've concluded that Svelte is in fact garbage. I assume as such, now it's confirmed. Svelte geeks are like the ruby geeks of the php days. Nerds need to learn to type with their keyboard and stop coming up with awful ways of programming.

[@MetalGuruSvk]

Would you care to provide at least one reasonable argument why you think it is "garbage"?

[@mohabedr5030]

why do you talk too much ?

[@a7kerkh]

What?

[@NicholasMaietta]

There it is! They say there are no stupid questions, but I just discovered one in the wild.

[@bmdavis419]

being more succinct is definitely something I'm working on!

[@edenassos]

@@bmdavis419 You don't have to worry about being cancelled, just say what you really mean when someone comments something like this. ;)