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.

[@seethruhead7119]

can do the same thing with a factory function

[@grenadier4702]

Svelte 5 also uses event delegation. Now instead of adding an event listener to each element, it creates an event context for each element and when any event is dispatched, svelte detects what event context to execute

[@pjc825]

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

[@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".

[@ozgurNY]

Svelte 5 is pain after Svelte 4. They runed Svelte DX.

[@adriablancafort]

@@ozgurNY You have no idea what upi talk about. They removed the last ugly syntax there was.

[@C4CH3S]

​@@adriablancafortthe svelte 4 syntax is great until you want to know what is reactive or not in a big page. Honestly I'm a fan of slightly more boilerplate in exchange of readability.

[@adriablancafort]

@@C4CH3S That's why Svalte 5 is amazing and we love it!

[@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

[@pjc825]

@@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 👍

[@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!

[@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

[@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!

[@Animadroids]

"Svelte 5 production is not landing when you think" is more accurate title

[@bmdavis419]

XD

[@nro337]

Really great coverage on this one!

[@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

[@XRENDERMAN]

It's not a win, it's the main and only thing that differentiated Svelte - concise syntax. Now I see no reason why to pick it over Vue for example.

[@HariPrasad-mn5vu]

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

[@bmdavis419]

Github Dark

[@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

[@prashlovessamosa]

I have a question whenever svelte 5 releses are we able to use version 5 features in sveltekit I am little bit confused with the ecosystem as we dont have react router for svelte than how can we do routing in svelte we have to use sveltekit correct please guide me

[@just_a_dev_023]

How do I get started with Svelte 5??

[@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!

[@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.

[@seethruhead7119]

would prefer a factory function rather than a class

[@ozgurNY]

Compare your Svelte 5 code with Svelte 4. Svelte 5 runed all DX. It was such a joy learning Svelte 4.

[@mbokil]

For devs coming from React it is like a breath of fresh air and makes it easier to understand.

[@jingle1161]

@@mbokil which is a bad sign.

[@XRENDERMAN]

@@mbokil yes but React is the worst thing that ever happened to dev world, any step on making Svelte closer to it - is a bad step.

[@mbokil]

@@XRENDERMAN depends how you define worst. I don't find React very intuitive but the idea of function composition is now a standard for component frameworks. If you just want to make money React can be very good since it is used everywhere.

[@XRENDERMAN]

@@mbokil I can't think of a less pleasant way of earning money than working with React.

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.

[@prix4638]

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

[@racapella]

github theme

[@bmdavis419]

Github Dark Default

[@mikelchannel4080]

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

[@bmdavis419]

idk what ur talking about ;)

[@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

[@BhideSvelte]

Amazing 🎉🎉🎉

[@DavidSmith-ef4eh]

hmmm.. mobx did that since forever and doesn't require special $ sign syntax and is cross librarry. you can use mobx in react/flutter/react-native/angular etc...

[@meka4996]

Amazing! I am SOLD!

[@anth0ni33]

jack harlow teaching svelte

[@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

[@WebDevCody]

Looks like mobx to me

[@bmdavis419]

kinda does lol

[@BhideSvelte]

Which vs code theme do u use ?

[@bmdavis419]

Github dark

[@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.

[@dei8bit]

aguante svelte ♥

[@buiquockhoi]

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

[@bmdavis419]

Geist vercel.com/font

[@HowPortal]

The instability of this library send frameworks are just insane. you don't have anything to do other than upgrading upgrading upgrading.

[@seanknowles9985]

looking more and more like react lol

[@StephenRayner]

Zustand

[@lordxan1]

Basically svelte5 is vue3

[@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"?

[@debugger4693]

Conclude whatever you want, i'm still using svelte and you can't stop me :D

[@mohabedr5030]

why do you talk too much ?

[@a7kerkh]

What?

[@TheHermitHacker]

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. ;)