Svelte 5 Is A Triumph

This video is a comparison of the changes between Svelte 4 and Svelte 5.

🔖 Timestamps

0:00 Intro
0:22 Reactivity
2:26 Computed State
3:22 Effects
4:18 Abstracting Logic
8:46 Templating
9:01 Events
9:53 Referencing The DOM
10:44 Conditionals
11:14 Lifecycle
12:14 Props
13:02 Sending Events
14:04 Slots
15:13 Context
17:06 Binding Form Input Values
17:52 Initializing Svelte
18:34 Fetching Data
21:03 SvelteKit
21:17 When Is Svelte 5 Going To Be Released?
21:53 Outro

#joyofcode #sveltekit #svelte

[adhec]

This is what I expect when Runes is release, the comparison between the old version. Thank you for making it crystal clear!

[pm]

Thank you for the breakdown! It confirms that I don't like Svelte 5, haha. Svelte was SIMPLE, with an understandable syntax, now it becomes obscure.

[DJRikkiBee]

It seems that Svelte is becoming a lot less...well, svelte.

[stuvius]

I just don't understand. I have a massive project where I have literally zero issues with the current Svelte, so I'm not sure what problems are being solved by doing a complete pivot with the design like this. I hope I'm wrong about this because I switched from React to Svelte to get away from this paradigm.

[stuvius]

onMount and onDestroy literally express what they do, and now instead there is a cryptic "effect".

[TimurMishagin]

As a Lead Angular developer who've been using Svelte for creating a landing to our main app I can say that I will miss the old syntax. This is the one thing which is very simple and it was one of the reasons why we chose Svelte for this task. Now I find Angular's approach to deal with signals more convenient than the Svelte's one. It feels more comprehensive as for me.

P.S. And yes, all of this refactoring in near future... Gorgeous.

[laztheripper]

What's the point of this? You could have used writable() and derived() in components before, and they do the same as $state() without muddying the waters with implicit getters and setters.
Getters and setters are a trap, they fool us into thinking we're simply accessing memory, but instead they're running a new function adding more overhead.
Creating a new object for every piece of state to avoid defining getters/setters is also not a good solution when GC is already a problem in JS, not to mention deep reactivity implies these objects will have to be iterated for changes, instead of a single primitive.

[diegoulloao]

Children is now unique? What about named slots? Before it was much simpler.

[damnnn.]

what was wrong with on:click that they deleted the two dots and made it onclick? a very unnecessary move.

[alejkun]

Hey, How's and why is render() better than slots? No reason was given, if anything it looks worse since it involves more code.

[aexelm]

I step beside React because I found simplicity on Svelte. But now, I am not sure if now Svelte are complicating the things like others JS libraries. I loved svelte because its naturallity with JS, HTML, and Now, I am not sure at all!... I feel that I need to break a paradigm....

[Gambit]

This seems like more work for the same results imo. Writables are just too easy to work with instead of having to write your own getters and setters. Please correct me if i'm wrong

[nomadshiba]

9:40 it think this also makes the client side code and compiler code simpler, i believe, before we had to have a code that handles "on:" directive, but its just the field name on the element now.
so putting a signal of a function there will just keep updating the element's onclick field when signal changes, so now you can have signal of a function as listener. and also removed the code for "on:" directive from everywhere.

[mikhalpalych]

(7:03) I've been messing with making classes reactive in vue 3 and i've actually made it, but the thing is, if we are going to make watch-effects on an instance of a class that accepts reactive dependencies, there will be an infinite call.
Is there some specific handling in svelte to this or is example presented just to show possibilities?
(i don't know svelte at all, just peering and familiarizing myself with it)

[DeviantFox]

I hope when svelte 5 releases you'll go over a few more of these examples in depth like some of your other videos for those of us who aren't JS pros and more hobbyists... that's always my biggest concern when these packages get major changes

[jaunathang]

Many of the improvements presented make me smile. I've been working with React for quite a while and I definitely recognize some of the terms and patterns borrowed from it. It's not that the new features don't make sense. I have absolutely no problem learning more complex frameworks when it comes to performance and flexibility. The problem is that Svelte sold simplicity and now they're falling into the same zone as the competition. They're slowly moving away from what made them popular in the first place.

[bn]

I'd like to see a practical example of runes in action. Say, a shopping cart or something, rather than just a counter.

[KDX]

Hi Joy, sorry if this comment is a bit out of context, but I had a project in mind but I'm having particular problems, just to make you understand, I would love to replicate your website, not all of it obviously, but the "style", I'd like to make a sort of documentation for the italian community, since I'm Italian, hence the bad english, but the point is that I followed your markdown + sveltekit tutorial but it's not turning out like I envisioned, so I was wondering if you could make a video explaining how you've built your website, specifically the blogs section, that's all, thank you for all your videos, they're really helping me a lot 😊

[jrgensneisen]

Im sorry i dont really see it yet. There were never any problems with onMount and onDestory, they were well named and really intuitive, the $effect is not for me. The context example is really not much different, the only difference is really writable vs $state, and then mixed in some getters and setters....

[mnmr]

Svelte 5 is basically an admission that S4 was never really a compiler that understood your code but just a regex parser or some similarly stupid processing logic. S5 is one step forward in flexibility and three steps back in usability.