Тёмный
No video :(

The Svelte 5 Guide On Runes And Universal Reactivity 

Joy of Code
Подписаться 30 тыс.
Просмотров 23 тыс.
50% 1

Опубликовано:

 

27 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 108   
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
Thanks for watching! You can support my work on Patreon or with a RU-vid channel membership. ❤
@RonnieDenzel
@RonnieDenzel 2 месяца назад
Im actually glad svelte is introducing runes,cause its kind of made it difficult to get which variable is reactive or not,the progress is worthwhile 💯
@Huntabyte
@Huntabyte 2 месяца назад
Love the Svecosystem plug 🔌 great video man!
@mikejohneviota9293
@mikejohneviota9293 2 месяца назад
hello sir decaprio!
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
thank you! 😄
@mikejohneviota9293
@mikejohneviota9293 2 месяца назад
@@JoyofCodeDev not you it was huntbyte he actually lookalike 🤣🤣
@LuKaSSthEBosS
@LuKaSSthEBosS 2 месяца назад
I use react at work, but your videos + svelte's runes introduction (fantasy nerd here) made me delve into svelte whenever I have some spare time. kidas brate!
@couragic
@couragic 2 месяца назад
The best and most comprehensive overview of reactivity in svelte as of now. Good job and thank you!
@forno_nicolas
@forno_nicolas 2 месяца назад
Bro your animations are on a new level 👏👏👏
@Wombosvideo
@Wombosvideo 2 месяца назад
He uses Svelte to create presentation slides with animations
@Wombosvideo
@Wombosvideo Месяц назад
You can see how he does it in his latest video
@ratsock
@ratsock 2 месяца назад
This is much clearer than the official documentation.
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
the preview docs for Svelte 5 are temporary and there's going to be official documentation and the tutorial when it's released
@anfytrion
@anfytrion 2 месяца назад
From the intro, you can perceive this video is going to be especial
@svelterust
@svelterust 2 месяца назад
Svelte 5 is really exciting, hopefully it launches soon!
@MadeInJack
@MadeInJack 2 месяца назад
Great production quality! Thanks for leading the Svelte 5 transition!
@emilwozniak6015
@emilwozniak6015 2 месяца назад
Before I learned Svelte, I used React, then SolidJS. When I learned Svelte 3, in my opinion, it was simpler and it was the best language and framework. In my opinion, Runes will destroy this framework, something that was simple now start going to React again. The only difference between SolidJS and Svelte now is where you have XML and where JS.
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
Svelte optimizes for vibes
@adriablancafort
@adriablancafort 2 месяца назад
Amazing video as always! I really love your content. I've noticed there isn't a good video explaining all the i18n options for sveltekit available and comparing them. It could be a good idea for a future video and I'm sure that your audience would be very interested to it.
@novaotp
@novaotp 2 месяца назад
I'm so excited for Svelte 5 😍.
@johannbitencourt
@johannbitencourt 2 месяца назад
Svelte is getting every day even better, thank you for such great content!
@cahva2
@cahva2 2 месяца назад
How beautiful is that my friend. I'll remember always you from that 😀
@cidrokp1
@cidrokp1 2 месяца назад
Amazing explanation video. It makes a svelte version upgrade much easier with all of these examples! Thank you 🙏
@anthonycarbone4253
@anthonycarbone4253 13 дней назад
Great video man 🤙
@mikejohneviota9293
@mikejohneviota9293 2 месяца назад
i smell svelte 5 is near !!!
@losing_interest_in_everything
@losing_interest_in_everything 2 месяца назад
88% complete
@mohabedr5030
@mohabedr5030 2 месяца назад
@@losing_interest_in_everything Not exactly.
@user-zy4yh8iw1f
@user-zy4yh8iw1f 2 месяца назад
​@@mohabedr5030it is, go check their GitHubilestones
@shu3684
@shu3684 Месяц назад
@@mohabedr5030 why not?
@Danielo515
@Danielo515 2 месяца назад
Showing the generated code was dope. Well done
@stepan_rybalka
@stepan_rybalka 2 месяца назад
It is a great video, clear and good comparing examples. And the slide change animation is also top.
@devonlamond
@devonlamond 2 месяца назад
Looks like MVC is back on the menu boys! Having written a diagram app using Svelte 3 and interactive components derived from class states, Runes look like a dream come true.
@liammcgarrigle
@liammcgarrigle 2 месяца назад
I love your content, I am about to start getting into Svelte and am super excited, this looks so much easier than other frameworks. You should start exporting in 4k. Even if you recorded in 1080 it increases the bitrate and makes it look much better. Your videos are beautiful they deserve max bitrate
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
I might try it out
@Airjaman
@Airjaman 2 месяца назад
You're amazing, the best svelte advocate Thank you!
@twentxx
@twentxx 2 месяца назад
Love your materials, they are contains a very useful information, thank you 👍
@dei8bit
@dei8bit 2 месяца назад
i love svelte, i am always afraid to dedicate myself to learn it fully because i feel i can't get a job with it, but i really enjoy so much developing in svelte.
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
listen to your heart
@dei8bit
@dei8bit 2 месяца назад
@@JoyofCodeDev Oh, sovereign joy of code, no matter how metaphorical or cheesy it may seem, I was waiting with the greatest subtlety for any response from you, and since you have heard this sentence, I must enjoy coding what I love. Furthermore, if UX and UI are for the user, from now on I proclaim DX & DI: Developer Experience & Developer Interface :) however, thanks a lot
@stuvius
@stuvius 2 месяца назад
This was great, thank you!
@covle9180
@covle9180 2 месяца назад
Great overview. I've spent a lot of hours on svelte and am quite comfortable with the quirks of the current version. I find it more kinda hard to wrap my head around what magic happens with $state. Especially the props thing doesn't seem super intuitive. I'm sure I'll get used to it but saying it's "easier" or clearer kinda feels like a lie.
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
I think `let count = 0` is more magic than `let count = $state(0)` which works the same inside and outside Svelte components - what makes Svelte special isn't `let count = 0` but `=` for reactive assignments.
@jingle1161
@jingle1161 13 дней назад
@@JoyofCodeDev "I think `let count = 0` is more magic than `let count = $state(0)`" Really? Ask someone who sees this for the first time.
@codewithguillaume
@codewithguillaume 2 месяца назад
I missed you my friend :)
@sledgex9
@sledgex9 2 месяца назад
I am just waiting for melt-ui to be runified. It would be a pain to start coding with its stores paradigm and then change to runes. The refactoring required is akin to rewriting the client code from scratch.
@dom8429
@dom8429 Месяц назад
14:29 is perfect
@herkulano
@herkulano 2 месяца назад
Thanks!
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
thank you! 🙏
@fyfoh
@fyfoh 2 месяца назад
Good explanation.
@acharafranklyn5167
@acharafranklyn5167 2 месяца назад
Please is there like a PDF document that one can learn about svelte 5 ... i really loved Real-World Svelte: Supercharge your apps with Svelte 4 by mastering advanced web development concepts By Tan Li Hau cant we have something like that for svelte 5
@voytxt
@voytxt 2 месяца назад
amazing video!
@tyu3456
@tyu3456 2 месяца назад
Svelte 5 is awesome, but if you're using any external Svelte libraries in your project, WAIT until it's fully supported before updating. Trust me 😭
@vaisakhkm783
@vaisakhkm783 2 месяца назад
Yea, it's a major version update, we shouldn't just update older version to new...
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
make your own library 🧠
@vaisakhkm783
@vaisakhkm783 2 месяца назад
@@JoyofCodeDev can you make a video about making svelte 5 libs ?
@Kreo-d6h
@Kreo-d6h 29 дней назад
Any issue with runes and form submission? On initial load I initialize form fields to the last record added, except one "index" field which is incremented by 1 - Its a read only field. Works fine on initial form load. I can change field value and using state, derived, effect everything works fine. When I submit, record gets saved fine but then the form fields will not reinitialize as when component first loaded,/ Instead fields values default as if I have no records despite setting them correctly. Worked fine with SK4 reactives. Any thoughts? (@ 11.56 on:keydown )
@AB-gx5zj
@AB-gx5zj 2 месяца назад
Lmao I fucking lost it at 14:30 😂 nice video!
@mylastore
@mylastore 2 месяца назад
I am confuse. What happen to stores in Svelte5? I have a store and could not figure out how to refactor to used Svelte5
@francoisbouchet9907
@francoisbouchet9907 2 месяца назад
stores are deprecated. you can just declare a variable as a state rune and pass it as a prop everywhere needed
@W4nn3
@W4nn3 2 месяца назад
@@francoisbouchet9907 Stores are not deprecated, they will work exactly like in Svelte 3 & 4. But in most scenarios they can be rewritten to signals.
@JJCUBER
@JJCUBER Месяц назад
@@francoisbouchet9907I’ve found that having side effects similar to subscribing to a store is a bit rough (outside of svelte components). Runes don’t really replace stores imo.
@Kreo-d6h
@Kreo-d6h 29 дней назад
@@francoisbouchet9907 Sveltekit 5 supports stores and even introduces local stores with .svelte.js extension. I am running SK5 Runes mode with local and global stores. No rewrites needed except local need that extension.
@Altessaire
@Altessaire 2 месяца назад
Great video, you are awesome ! How do you make these code snippets transition ? Which tools are you using to make your videos ?
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
I use Animotion which is something I made and I'm working on the video for it next
@Animadroids
@Animadroids Месяц назад
I am somewhat concerned about using typescript on my svelte 5 project. Is it any better for bigger projects or just pure coding overhead?
@JoyofCodeDev
@JoyofCodeDev 19 дней назад
typescript is useful on any project
@RyoukenDofus
@RyoukenDofus 2 месяца назад
What a beauty.
@alfredlotsu950
@alfredlotsu950 2 месяца назад
Hi, I have a question. Could I use a svelte store value, eg. $name, inside a svelte form action?
@adamjennings4797
@adamjennings4797 2 месяца назад
I don't really get the derived rune. Isn't anything you do with state by definition 'derived'? Count is state, so why do I have to say count +1 is derived? Obviously it must be..
@sledgex9
@sledgex9 2 месяца назад
Because you want the derived variable to be reactive too in the places you use it.
@adamjennings4797
@adamjennings4797 2 месяца назад
@@sledgex9 hm yeah I need to read more about it. It just seems odd to me that the state rune couldn't just do it all. Ie the very presence of state in any other function or statement would simply tell the compiler that this line of code must change along with the state it references.
@raenastra
@raenastra 2 месяца назад
the derived rune is for state that depends on another rune. in your example, it's derived so that the derived value is recomputed when count changes
@vaisakhkm783
@vaisakhkm783 2 месяца назад
​@@adamjennings4797 it's not reactive with in , it's only reactive to ui parts just think this -> count = count +1 create a infinte loop
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
the interesting part about derived is memoization and you can use `$derived.by` for more complex things but for example `count * 2` doesn't have to be derived and you can use an expression or regular function in your template
@hansiboy5348
@hansiboy5348 2 месяца назад
Why is the compression so blocky and ugly? Even at 1080p
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
RU-vid compression works in mysterious ways
@hansiboy5348
@hansiboy5348 2 месяца назад
@@JoyofCodeDev its very sad. Really good video otherwise. Im guessing its because of the dark nature of the video. These compression strategies usually compress many dark values together because its more difficult to distinguish between them. Next time i would recommend you upload in a higher resolution like 4k or use 30fps instead of 60
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
it just takes time 😄
@aellionnecalara3223
@aellionnecalara3223 2 месяца назад
subbed!
@AlanDanielx
@AlanDanielx 2 месяца назад
Great vid, now we need Material UI for svelte, not the trash its out there (outdated)(non-svelte5)
@fcnealvillangca7943
@fcnealvillangca7943 2 месяца назад
svelte 5 is not yet official in sveltekit 2 right? still have a lot of time to practice runes
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
you can pick Svelte 5 from the options and it's backwards compatible so it's easy to transition
@jooonmantv
@jooonmantv 2 месяца назад
great
@PanicAtProduction
@PanicAtProduction 2 месяца назад
So svelte discovered redux? 😅
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
I think you're lost
@PanicAtProduction
@PanicAtProduction 2 месяца назад
@@JoyofCodeDev no worries, everone has some skill issues
@omomer3506
@omomer3506 2 месяца назад
Was completely thrown off by the waifu voice 😂😂😂😂
@vaisakhkm783
@vaisakhkm783 2 месяца назад
🤔 at this point, anyone can be frontend dev in a week...
@osmancoskun95
@osmancoskun95 2 месяца назад
svelte is for lazy people like me who dont wanna dive into overcomplicated react bullshit and its stupidass ecosystem. if i have to use this effect and state fake ass react shit, i will use react directly
@nonefvnfvnjnjnjevjenjvonej3384
@nonefvnfvnjnjnjevjenjvonej3384 2 месяца назад
so its basically vuejs now?
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
I would say Vue is trying to be more like Svelte if you look at Vue Vapor
@nonefvnfvnjnjnjevjenjvonej3384
@nonefvnfvnjnjnjevjenjvonej3384 2 месяца назад
@@JoyofCodeDev mithril was where its at.. they should have developed more in that direction
@naranyala_dev
@naranyala_dev 2 месяца назад
the code too small
@funnynews341
@funnynews341 2 месяца назад
why in svelte 5 using two method, on: and onclick,.... Not simple, so complicated, svelte becoming sh*t
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
you can use both because Svelte 5 is backwards compatible making it easy to transition but it's going to be deprecated in a future version
@PaulSebastianM
@PaulSebastianM 2 месяца назад
Svelte 5 == Almost Solid.js but with $ prepended so they can continue to implement a compiler and experiment with abstractions instead of finding elegant ways to do simpler functional programming. In my opinion Solid.js is superior, simpler, more elegant, not because it adds terser syntax or more bells and whistles, but simply because it achieves the same things using just the programming language itself and well design, and just the right amount of, abstractions. It's also my opinion that learning the language itself is the biggest problem in the JS FE world. No offence but too many people learn JS by learning React first or some other framework, because that's what they want to do at work, but that's not what being a good programmer is. /endrant
@erickmoya1401
@erickmoya1401 2 месяца назад
Nope. Solid doesnt reach what Svelte can reach. Solid is just react with signals. Svelte is quite different, in the big picture it shows how simplicity at its finest can improve your day to day.
@SRG-Learn-Code
@SRG-Learn-Code 2 месяца назад
I like abstractions. I'm not a hardcore developer, just a hobbyist, so having some opinionated magic is great. No disrespect to solid, is a great framework, but it didn't clicked for me although it was on top of my list. To be honest, if not for some great svelte edutainers I would be using solid, or maybe vue.
@SilvestreVivo
@SilvestreVivo 2 месяца назад
I think you misunderstood completely how Svelte3/4 worked and how Svelte 5 it does. Just because Svelte5 is using Signals ( like Vue ) you think that is almost Solid. This is like the people who thinks that Svelte5 looks like React because has $effect(). Please, try to learn and read deeper: devs are responsible at some point about companies decisions in the future regarding tech stack to use.
@PaulSebastianM
@PaulSebastianM 29 дней назад
@@SRG-Learn-Code you're not a real developer until you learn to have a love-hate relationship with abstractions.
@PaulSebastianM
@PaulSebastianM 2 месяца назад
Too many gotchas with the API == React.
@JoyofCodeDev
@JoyofCodeDev 2 месяца назад
ignorance is bliss
@dogakoorkmaz
@dogakoorkmaz 2 месяца назад
If you don't use these libraries with your side-project as they would make your development easy, don't ever use them. They are dead for professiononal web development and you wouldn't learn anything about anything because you'd take everything as granted, React is popular because you do everything, it's plain javascript that poops html, thats it
@paolo-e-basta
@paolo-e-basta 2 месяца назад
I hope I'm misunderstanding your sense of humor, but I personally prefer my development to be easy rather than hard. As for not learning anything, how is that possible? After all, "these libraries" are open-source, and the code is there to be examined and learned from. And furthermore, I truly believe you need to learn, and learn well, how to use them despite their (apparent) simplicity.
@dogakoorkmaz
@dogakoorkmaz 2 месяца назад
@@paolo-e-basta yes, a javascript junior developer would go through source codes. React is not hard, nor Next, they are tools to make something work, if this something is too much for your project, of course don't use it, but then don't talk about it either.
@JJCUBER
@JJCUBER Месяц назад
⁠​⁠​⁠@@dogakoorkmazSvelte is also a “[tool] to make something work.” So what’s your point? Ironically, the layout of svelte is closer to vanilla html/js/css than something like react/jsx; if anything, a beginner learning svelte will learn more about vanilla html/js/css vs one learning react.
@dogakoorkmaz
@dogakoorkmaz Месяц назад
​@@JJCUBER React is not there to make you learn html, I was talking about normal people who are not 5 years old and jump to a framework without knowing basic concepts of frontend. You too know that frameworks like Vue and Svelte is out there because PHP developers didn't want to learn frontend, these are frameworks that gives everything out-of-box and can make basic projects that are mostly/strictly bound to some backend. Not so great for a student that wants to know how a real application should work and the inner concepts of a frontend system, they are great if you want "magic" with a one click though.
Далее
How I Make Coding Videos With Animotion
10:47
Просмотров 16 тыс.
Svelte 5 is a beast, but is it worth switching?
37:55
I Tried Every Svelte UI Library
20:57
Просмотров 46 тыс.
i didn't know these Svelte tips
18:56
Просмотров 5 тыс.
Svelte 5 Is A Triumph
22:04
Просмотров 63 тыс.
Svelte 5's Secret Weapon: Classes + Context
18:14
Просмотров 18 тыс.
Using Svelte Stores With Runes For Animations
18:59
Просмотров 6 тыс.
Turns out REST APIs weren't the answer (and that's OK!)
10:38
How To Not Suck At Design For Developers
14:23
Просмотров 82 тыс.