The Easiest Way to Build Web Apps

  Рет қаралды 34,899

Awesome

Awesome

Ай бұрын

A quick overview of Svelte 5.
💬 Topics:
- What is Svelte?
- Advantages of Svelte;
- The Svelte Compiler;
- Svelte Reactivity;
- Runes;
- Snippets;
- Svelte 5 updates.
📖 Blog Article - www.awesome.club/blog/2024/sv...
🥇 Become a Member - / @awesome-coding
✉️ Join the Newsletter - newsletter.awesome.club/

Пікірлер: 126
@ukaszjonasiak382
@ukaszjonasiak382 Ай бұрын
Svelte is on a good way to becoming a go-to framework.
@wojciechosinski5927
@wojciechosinski5927 Ай бұрын
Snippets sound very useful. I hate overcomponentisation. Especially that every one of them has its own update cycle that affects performance. For the case like this image element it’s completely pointless to encapsulate it so I support the snippet feature wholly.
@awesome-coding
@awesome-coding Ай бұрын
Well said!
@TechBuddy_
@TechBuddy_ Ай бұрын
Yes but in solid and svelte 5 the extra performance cost is that of a single function call because of runes/signals and the compiler
@wojciechosinski5927
@wojciechosinski5927 Ай бұрын
@@TechBuddy_ Good to know it’s not a problem now in newer frameworks
@trietang2304
@trietang2304 Ай бұрын
I'm a backend dev and svelte is my goto frontend when I need to.
@ryo_5748
@ryo_5748 Ай бұрын
My favorite front-end framework is Svelte. The evolution of HTML and CSS has significantly reduced the amount of JavaScript required for common UIs. I believe 2024 will be the year of Svelte5, as the current role of front-end frameworks focuses on managing in-app state in a simple and maintainable way.
@aLfRemArShMeLlOw
@aLfRemArShMeLlOw Ай бұрын
"THE LEAST HATED FRAMEWORK" hahaha
@awesome-coding
@awesome-coding Ай бұрын
"for now" 😅
@tanoryjakaperdana1419
@tanoryjakaperdana1419 22 күн бұрын
​@@awesome-codingand "now" 😅
@gamer-gw9iy
@gamer-gw9iy Ай бұрын
I love your attitude and energy. Youre a legend! Ethan Hindmarsh
@jamie_SF
@jamie_SF Ай бұрын
Svelte is the future ❤ great video
@feba33
@feba33 Ай бұрын
great, time to rebuilt my app for the 7th time
@abyzzwalker
@abyzzwalker Ай бұрын
Svelte is so pleasing to use. Things just make sense.
@theklr
@theklr Ай бұрын
Feel like svelte 5 is ready to give the challenge to react. Nothing against it, but if the business is to move fast, svelte has the most simplicity than its bigger brethren. Just excited to see its changes reflect in other frameworks
@awesome-coding
@awesome-coding Ай бұрын
Yep, you might be right! Interesting to see that a lot of frameworks are fully updating their reactivity models, while React is doubling down on its dirty checking VDOM based solution. I don't think that's the best decision on React's part.
@ValipPowa
@ValipPowa Ай бұрын
react has been dead for long lmao you have svelte and vue which are WAY better in terms of everything. react will still be used by majority just like php which explains why popularity and ecosystem shouldn't be the factors for how good a framework is.
@theklr
@theklr Ай бұрын
@@ValipPowa tell me how a library nearing a billion downloads is dead 🤔
@HonkletonDonkleton
@HonkletonDonkleton 19 күн бұрын
​@@theklr it's user's hate it. No one uses it by choice 😂
@theklr
@theklr 19 күн бұрын
@@HonkletonDonkleton still doesn’t mean it’s dead. People have been declaring Wordpress, php, and even jquery’s death and yet…
@forno_nicolas
@forno_nicolas Ай бұрын
Svelte 5 + tailwind is so easy 👌
@justinoneill2837
@justinoneill2837 Ай бұрын
Have you tried TW v4 yet? It's so dope
@capncrypto7518
@capncrypto7518 12 күн бұрын
As someone who is currently learning React, I may or may not have gasm'd when snippets were explained. Can't wait to finish learning React so I can build with Svelte.
@awesome-coding
@awesome-coding 12 күн бұрын
Haha!
@SoreBrain
@SoreBrain Ай бұрын
svelte makes web dev fun again
@Lemmy4555
@Lemmy4555 Ай бұрын
I just switched from Svelte to React because of the damn job and it's traumatizing, I feel like switching from Deno to Java 6 EE.
@awesome-coding
@awesome-coding Ай бұрын
Some of us are still making a living thanks to Java 6!
@QueeeeenZ
@QueeeeenZ Ай бұрын
​@@awesome-codingmaybe better be dead than use Java 😅
@awesome-coding
@awesome-coding Ай бұрын
@@QueeeeenZ everybody has a price!
@ThePandaGuitar
@ThePandaGuitar Ай бұрын
skill issue. used react, svelte, vue, it's all the same slop. if you can't create something substantial that you couldn't technically do before, it doesnt really matter. react has ecosystem and it's the most important thing for any library. if tomorrow svelte has a bigger ecosystem, ill use that. i'd actually use solid over any of them tbh.
@QueeeeenZ
@QueeeeenZ Ай бұрын
@@ThePandaGuitar Vue and Nuxt also have great ecosystem and much better DX than react. I think DX is just as big a factor as the ecosystem.
@zayne-sarutobi
@zayne-sarutobi Ай бұрын
2:11 You can achieve the svelte behaviour in solid (updating via mutation, no reliance on reference) by setting the equals options on createSignal to false
@awesome-coding
@awesome-coding Ай бұрын
Nice! I didn’t know this one
@vutruong4164
@vutruong4164 Ай бұрын
I mostly worked in Angular, but am trying out Svelte and really like its simplified approach. I think Svelte and Angular shared many similarities in their approach: html first, svelte actions/angular directives, control flow (angular copy svelte), signals/runes, svelte snippet/angular template ... I still hate Angular EventEmitter and wished they would one day ditch it for normal event handlers like Svelte
@YariRu
@YariRu Ай бұрын
Sold
@yutoriotsu8848
@yutoriotsu8848 Ай бұрын
That vault boy on the thumbnail….,We are living in an age of after the final JavaScript framework war.
@awesome-coding
@awesome-coding Ай бұрын
😂✌️
@alisherdotdev
@alisherdotdev Ай бұрын
Runes seems like a copy pasted from Vue 3 reactivity. Directly modify arrays & objects is not a new
@SilvestreVivo
@SilvestreVivo Ай бұрын
Try it and then think....
@hamm8934
@hamm8934 Ай бұрын
Yup. In so many ways, Svelte has just been a knock off of Vue backed by vercel. I think many people that love svelte just never tried vue.
@thomascarlsen8097
@thomascarlsen8097 Ай бұрын
What is the different between making a component and using a snippet and why does components create an overhead?
@Perer876
@Perer876 Ай бұрын
I don't know exactly, but maybe the snippets are just like 'copy & paste,' whereas using a component involves maintaining an entire instance of a reactive component to keep track of
@ayoubMazouz
@ayoubMazouz Ай бұрын
I love svelte and I still love it. but I can do the same mistake again building production application with a newly born framework that is bound to change more frequently.
@mpiorowski
@mpiorowski Ай бұрын
Yeah, cos the "BIG BOYS" don't change at all :D I would argue Svelte changed the least compared to any other framework :D React = classes -> functional -> hooks -> ssr -> new compiler with no hooks :D
@awesome-coding
@awesome-coding Ай бұрын
@mpiorowski Same with Angular :D Angular JS -> Angular -> New Rendering engine -> Zone JS -> Signals -> Built-in control flow and so on. Vue had: Vue 1, Vue 2, Vue 3 - All major overhauls, and now the Composition API for function components and Vue Vapor to ditch the VDOM. It's a sh*t show everywhere, pardon my French.
@ayoubMazouz
@ayoubMazouz Ай бұрын
@@awesome-coding I never used Angular, but I used React and Vue. I can pull my 4 year old repos and update the latest Vue and React with no changes. I can't do That with my Svelte repos. I don't use Nextjs outside of work for the same reasons, they are still evolving and I don't have time to keep up.
@statuschannel8572
@statuschannel8572 Ай бұрын
@@mpiorowski but React can run 10 year old code even now. their backward compatibility is something why companies prefer to use it.
@iDarthGigi
@iDarthGigi Ай бұрын
Svelte 4 life!
@awesome-coding
@awesome-coding Ай бұрын
No 5?
@iDarthGigi
@iDarthGigi Ай бұрын
@@awesome-coding whoops, I meant to write Svelte 4 life, not Svelte 4 for life 😅
@awesome-coding
@awesome-coding Ай бұрын
@@iDarthGigi Haha! I thought you just decided to stick with Svelte 4 no matter what.
@iDarthGigi
@iDarthGigi Ай бұрын
@@awesome-coding tbh idk, I don’t like some of the syntax changes in svelte 5, they’re confusing me. But I think if I take my time and learn all the new stuff, that I will like it actually.
@gomi-hako
@gomi-hako Ай бұрын
Will it be easy to migrate, started a bigger svelte project on v4 in april. Am already quite deep in it.
@awesome-coding
@awesome-coding Ай бұрын
Rich Harris (the creator of Svelte) addressed migration in detail, and he outlined that this is one of their main priorities. So I believe we can expect a smooth transition.
@justinoneill2837
@justinoneill2837 Ай бұрын
V4 components are backwards compatible, so you should be able to update and everything continue to work.. however, you can't mix v5 with v4 code (within the same file). I've been updating my UI lib And I would say the hardest thing to get used to is the replacement of with {#snippet} and {@render}
@melvins126
@melvins126 Ай бұрын
Ok cool. I'm rebuilding my app for the Nth time
@awesome-coding
@awesome-coding Ай бұрын
you and me both!😅
@actioN1337
@actioN1337 Ай бұрын
Why should I use Svelte over Next JS?
@thecoolnewsguy
@thecoolnewsguy Ай бұрын
It's SvelteKit over NextJS not Svelte over NextJS and yes I don't know why
@Fallingstar-yy5iv
@Fallingstar-yy5iv Ай бұрын
@@thecoolnewsguy Its more intuitive and preformat
@statuschannel8572
@statuschannel8572 Ай бұрын
i don't know man Svelte is something everyone praises but no one seems to be using! React & Angular is dominating the job market so i'm going to stick to that. if Svelte becomes a thing in job market then i have no problem learning it
@sv3163
@sv3163 Ай бұрын
@@statuschannel8572 Correct 💯% !
@silas-bv1ql
@silas-bv1ql 16 күн бұрын
NextJs is bullsh*t
@crab-cake
@crab-cake Ай бұрын
how much do you charge to feature things? i want to market my tailwind library
@awesome-coding
@awesome-coding Ай бұрын
Hey! You can reach out to me at hi@awesome.club
@crab-cake
@crab-cake Ай бұрын
@@awesome-coding thanks, i''ll reach out in a couple weeks because i have to finish the website/docs
@bernardogalvao4448
@bernardogalvao4448 Ай бұрын
But for an ML engineer with 0 webdev xp such as myself looking to create a micro saas, is it still the easiest?
@awesome-coding
@awesome-coding Ай бұрын
Yes, I believe it is. Feel free to reach out via email or X if you need any guidance :)
@valentinsaik6754
@valentinsaik6754 Ай бұрын
For people without experience it's always better to go with a more mature ecosystem, go with react, you will find more ready to use solutions, libraries, instructions etc.
@awesome-coding
@awesome-coding Ай бұрын
@@valentinsaik6754 This is an interesting take. However, I feel like React is really tough for newcomers these days. It is mixed more and more with Next JS, and it is built on top of A LOT of complexity.
@SuperRobieboy
@SuperRobieboy 22 күн бұрын
@@awesome-codingdo you happen to know a good svelte kit tutorial with svelte 5 for creating a landing page and interaction with an API backend? Starting from 0 web dev knowledge
@cccccc864
@cccccc864 Ай бұрын
MY EYEEEEEESSSSS!!!!!
@snatvb
@snatvb Ай бұрын
snippets says: 1000 file lines is not limit!
@awesome-coding
@awesome-coding Ай бұрын
Just the way I like it.
@snatvb
@snatvb Ай бұрын
@@awesome-coding I don't like huge components with a lot of logic, it's difficult to maintain and this one more method to do it. But of course it can save your time or improve DX for lists for example, where you wanna avoid to create item component that should be used in several cycles
@awesome-coding
@awesome-coding Ай бұрын
@@snatvb I agree! However, it seems like I'm always ending up in projects where thousand line components are pretty much the norm 🤦‍♂ It must be a "me" problem..
@snatvb
@snatvb Ай бұрын
@@awesome-coding :D I had same problem, but I am tech lead and changed the problem) only in 2-3 old components exists this issue
@CoolestPossibleName
@CoolestPossibleName Ай бұрын
nah I'm sticking with plain js.
@allisterfiend_2112
@allisterfiend_2112 Ай бұрын
Well if you’re sincere, I can respect that sentiment! At least you did not post that your sticking with react and how wonderful it is and that everyone is using it because it’s the bestest framework in the whole world because you know, Facebook uses it.
@awesome-coding
@awesome-coding Ай бұрын
You should use my "Not a Framework" framework then ✌️ github.com/awesome-club/not-a-framework
@pixiedev
@pixiedev Ай бұрын
​@@awesome-coding that's very similar to vuejs 😅
@SzaboB33
@SzaboB33 Ай бұрын
plain js using a small external library here and there called React
@AveN7ers
@AveN7ers Ай бұрын
Dude you crazy lmao. Who would want to createElement('div'), appendChild() everywhere 🤣🤣?
@ppcamps
@ppcamps Ай бұрын
IDN svelte 5 seems just like a "copy" of react. Now you need to know runes, instead of "plain" js keywords. It makes it easier, but "uglier"
@ppcamps
@ppcamps Ай бұрын
like, with new improvs in react, what will be the "benefit" of using svelte?
@awesome-coding
@awesome-coding Ай бұрын
A more efficient reactive system (signal based instead of dirty checking) and no VDOM overhead. So basically a much liter, more efficient client implementation
@mihirdharangaonkar6916
@mihirdharangaonkar6916 Ай бұрын
Less hated because less used ..it's that clear
@awesome-coding
@awesome-coding Ай бұрын
“There are only two kinds of languages: the ones people complain about and the ones nobody uses.”
@smoked-old-fashioned-hh7lo
@smoked-old-fashioned-hh7lo Ай бұрын
i've used it in production for many startups and it's so much nicer. you don't need the ecosystem that react has because it's easier to build things from scratch.
@ThePandaGuitar
@ThePandaGuitar Ай бұрын
same old lukewarm updates. nothing wow, nothing you can do today that you couldn't do before. just quality of life, syntactic stuff. the good leap was jquery 2006 and react in 2013. this is just rewriting the same functionality in different flavors. we plateau'd
@awesome-coding
@awesome-coding Ай бұрын
I would argue we had another leap with Svelte and Solid, where we dumped Dirty checking and the Virtual DOM, basically removing an entire layer of complexity from web apps.
@fruitypie
@fruitypie Ай бұрын
Not runes, hooks 😉
@awesome-coding
@awesome-coding Ай бұрын
rooks
@suryaprakash-sh5bf
@suryaprakash-sh5bf Ай бұрын
It has become like react
@awesome-coding
@awesome-coding Ай бұрын
What do you mean? I believe they are pretty far apart.
@suryaprakash-sh5bf
@suryaprakash-sh5bf Ай бұрын
@@awesome-coding they have introduced states, effects and other thing similar to react hooks?
@user-zy4yh8iw1f
@user-zy4yh8iw1f Ай бұрын
@@suryaprakash-sh5bf They are still widely different in how you would use them .
@awesome-coding
@awesome-coding Ай бұрын
@@suryaprakash-sh5bf Ah, got it. To be fair, yes React introduced the concept of state and effects in the current "hook like" form. However, these were concepts present in all frameworks more or less for the past 15 years. I believe Svelte is just aligning themselves with the concepts everybody accepts as the status quo at this point (Angular, Vue, Solid and others, all have some sort of state, derived and effect variation)
@justinoneill2837
@justinoneill2837 Ай бұрын
No it hasn't
@IStMl
@IStMl Ай бұрын
Of course React is dead last
@awesome-coding
@awesome-coding Ай бұрын
Yep…
@codyrap95
@codyrap95 Ай бұрын
Easy? When you have to learn new syntax just for it? No thanks!
@awesome-coding
@awesome-coding Ай бұрын
If you are referring to runes, you are right. However, Runes are opt in, so you can still use the compiler based reactivity instead (that's pretty much Vanilla JS)
@hamm8934
@hamm8934 Ай бұрын
Knock off Vue with daddy vercel money
@awesome-coding
@awesome-coding Ай бұрын
😂 you guys find a way to hate on anything.
@arianitteamaxess674
@arianitteamaxess674 Ай бұрын
not really. vue 3 was launched after svelte was born. so, maybe vue was copying some things from svelte, like a compile step. listen to some interviews from both creators, and see how they respect each other and get inspired from their frameworks. they don't spread hate like some people here
@hamm8934
@hamm8934 Ай бұрын
@@awesome-coding ;)
@nullpointer1755
@nullpointer1755 Ай бұрын
Except is better
@hamm8934
@hamm8934 Ай бұрын
@@awesome-coding vercel is not a minor factor. They are fast approaching being full on anti-developer and i have no problem being critical of them
UI Libraries Are Dying, Here's Why
13:28
Theo - t3․gg
Рет қаралды 275 М.
Svelte 5 is Bigger Than You Think
9:35
Davis Media
Рет қаралды 13 М.
Мы никогда не были так напуганы!
00:15
Аришнев
Рет қаралды 5 МЛН
🌊Насколько Глубокий Океан ? #shorts
00:42
Неприятная Встреча На Мосту - Полярная звезда #shorts
00:59
Полярная звезда - Kuzey Yıldızı
Рет қаралды 7 МЛН
5 Things I Wish I Knew When I Started Using SvelteKit
7:27
Davis Media
Рет қаралды 10 М.
5 Modern Features That Make CSS Easy
3:49
Awesome
Рет қаралды 12 М.
Svelte 5 Preview | Runes
12:40
ThePrimeTime
Рет қаралды 74 М.
Svelte, Solid or Qwik? Who Won?
6:38
Awesome
Рет қаралды 37 М.
HTMX Sucks
25:16
Theo - t3․gg
Рет қаралды 104 М.
"The Life & Death of htmx" by Alexander Petros at Big Sky Dev Con 2024
23:01
Montana Programmers
Рет қаралды 26 М.
WHY did this C++ code FAIL?
38:10
The Cherno
Рет қаралды 191 М.
We can now write scripts using these languages, but is it worth it?
8:28
20 Programming Projects That Will Make You A God At Coding
14:27
The Coding Sloth
Рет қаралды 602 М.