Тёмный

The Easiest Way to Build Web Apps 

Awesome
Подписаться 45 тыс.
Просмотров 37 тыс.
50% 1

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/

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

 

26 май 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 129   
@ukaszjonasiak382
@ukaszjonasiak382 2 месяца назад
Svelte is on a good way to becoming a go-to framework.
@wojciechosinski5927
@wojciechosinski5927 2 месяца назад
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 2 месяца назад
Well said!
@TechBuddy_
@TechBuddy_ 2 месяца назад
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 2 месяца назад
@@TechBuddy_ Good to know it’s not a problem now in newer frameworks
@capncrypto7518
@capncrypto7518 Месяц назад
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 Месяц назад
Haha!
@trietang2304
@trietang2304 2 месяца назад
I'm a backend dev and svelte is my goto frontend when I need to.
@ryo_5748
@ryo_5748 2 месяца назад
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 2 месяца назад
"THE LEAST HATED FRAMEWORK" hahaha
@awesome-coding
@awesome-coding 2 месяца назад
"for now" 😅
@tanoryjakaperdana1419
@tanoryjakaperdana1419 Месяц назад
​@@awesome-codingand "now" 😅
@forno_nicolas
@forno_nicolas 2 месяца назад
Svelte 5 + tailwind is so easy 👌
@justinoneill2837
@justinoneill2837 2 месяца назад
Have you tried TW v4 yet? It's so dope
@gamer-gw9iy
@gamer-gw9iy 2 месяца назад
I love your attitude and energy. Youre a legend! Ethan Hindmarsh
@abyzzwalker
@abyzzwalker 2 месяца назад
Svelte is so pleasing to use. Things just make sense.
@feba33
@feba33 2 месяца назад
great, time to rebuilt my app for the 7th time
@jamie_SF
@jamie_SF 2 месяца назад
Svelte is the future ❤ great video
@theklr
@theklr 2 месяца назад
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 2 месяца назад
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 2 месяца назад
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 2 месяца назад
@@ValipPowa tell me how a library nearing a billion downloads is dead 🤔
@Daddytronics
@Daddytronics Месяц назад
​@@theklr it's user's hate it. No one uses it by choice 😂
@theklr
@theklr Месяц назад
@@Daddytronics still doesn’t mean it’s dead. People have been declaring Wordpress, php, and even jquery’s death and yet…
@Lemmy4555
@Lemmy4555 2 месяца назад
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 2 месяца назад
Some of us are still making a living thanks to Java 6!
@QueeeeenZ
@QueeeeenZ 2 месяца назад
​@@awesome-codingmaybe better be dead than use Java 😅
@awesome-coding
@awesome-coding 2 месяца назад
@@QueeeeenZ everybody has a price!
@ThePandaGuitar
@ThePandaGuitar 2 месяца назад
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 2 месяца назад
@@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.
@SoreBrain
@SoreBrain 2 месяца назад
svelte makes web dev fun again
@zayne-sarutobi
@zayne-sarutobi 2 месяца назад
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 2 месяца назад
Nice! I didn’t know this one
@vutruong4164
@vutruong4164 2 месяца назад
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 2 месяца назад
Sold
@yutoriotsu8848
@yutoriotsu8848 2 месяца назад
That vault boy on the thumbnail….,We are living in an age of after the final JavaScript framework war.
@awesome-coding
@awesome-coding 2 месяца назад
😂✌️
@alisherdotdev
@alisherdotdev 2 месяца назад
Runes seems like a copy pasted from Vue 3 reactivity. Directly modify arrays & objects is not a new
@SilvestreVivo
@SilvestreVivo 2 месяца назад
Try it and then think....
@hamm8934
@hamm8934 2 месяца назад
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 2 месяца назад
What is the different between making a component and using a snippet and why does components create an overhead?
@Perer876
@Perer876 2 месяца назад
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
@gomi-hako
@gomi-hako 2 месяца назад
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 2 месяца назад
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 2 месяца назад
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}
@ayoubMazouz
@ayoubMazouz 2 месяца назад
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 2 месяца назад
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 2 месяца назад
@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 2 месяца назад
@@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 2 месяца назад
@@mpiorowski but React can run 10 year old code even now. their backward compatibility is something why companies prefer to use it.
@actioN1337
@actioN1337 2 месяца назад
Why should I use Svelte over Next JS?
@thecoolnewsguy
@thecoolnewsguy 2 месяца назад
It's SvelteKit over NextJS not Svelte over NextJS and yes I don't know why
@Fallingstar-yy5iv
@Fallingstar-yy5iv 2 месяца назад
@@thecoolnewsguy Its more intuitive and preformat
@statuschannel8572
@statuschannel8572 2 месяца назад
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 2 месяца назад
@@statuschannel8572 Correct 💯% !
@silas-bv1ql
@silas-bv1ql Месяц назад
NextJs is bullsh*t
@crab-cake
@crab-cake 2 месяца назад
how much do you charge to feature things? i want to market my tailwind library
@awesome-coding
@awesome-coding 2 месяца назад
Hey! You can reach out to me at hi@awesome.club
@crab-cake
@crab-cake 2 месяца назад
@@awesome-coding thanks, i''ll reach out in a couple weeks because i have to finish the website/docs
@iDarthGigi
@iDarthGigi 2 месяца назад
Svelte 4 life!
@awesome-coding
@awesome-coding 2 месяца назад
No 5?
@iDarthGigi
@iDarthGigi 2 месяца назад
@@awesome-coding whoops, I meant to write Svelte 4 life, not Svelte 4 for life 😅
@awesome-coding
@awesome-coding 2 месяца назад
@@iDarthGigi Haha! I thought you just decided to stick with Svelte 4 no matter what.
@iDarthGigi
@iDarthGigi 2 месяца назад
@@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.
@bernardogalvao4448
@bernardogalvao4448 2 месяца назад
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 2 месяца назад
Yes, I believe it is. Feel free to reach out via email or X if you need any guidance :)
@valentinsaik6754
@valentinsaik6754 2 месяца назад
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 2 месяца назад
@@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 Месяц назад
@@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
@argempusrecords
@argempusrecords 9 дней назад
is it safe to start building with svelte 5 now? Or should I wait until it's oficially released?
@awesome-coding
@awesome-coding 9 дней назад
Is your project in production already? If not, sure - go ahead and use Svelte 5
@cccccc864
@cccccc864 2 месяца назад
MY EYEEEEEESSSSS!!!!!
@melvins126
@melvins126 2 месяца назад
Ok cool. I'm rebuilding my app for the Nth time
@awesome-coding
@awesome-coding 2 месяца назад
you and me both!😅
@snatvb
@snatvb 2 месяца назад
snippets says: 1000 file lines is not limit!
@awesome-coding
@awesome-coding 2 месяца назад
Just the way I like it.
@snatvb
@snatvb 2 месяца назад
@@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 2 месяца назад
@@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 2 месяца назад
@@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 2 месяца назад
nah I'm sticking with plain js.
@allisterfiend_2112
@allisterfiend_2112 2 месяца назад
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 2 месяца назад
You should use my "Not a Framework" framework then ✌️ github.com/awesome-club/not-a-framework
@pixiedev
@pixiedev 2 месяца назад
​@@awesome-coding that's very similar to vuejs 😅
@SzaboB33
@SzaboB33 2 месяца назад
plain js using a small external library here and there called React
@AveN7ers
@AveN7ers 2 месяца назад
Dude you crazy lmao. Who would want to createElement('div'), appendChild() everywhere 🤣🤣?
@ppcamps
@ppcamps 2 месяца назад
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 2 месяца назад
like, with new improvs in react, what will be the "benefit" of using svelte?
@awesome-coding
@awesome-coding 2 месяца назад
A more efficient reactive system (signal based instead of dirty checking) and no VDOM overhead. So basically a much liter, more efficient client implementation
@fruitypie
@fruitypie 2 месяца назад
Not runes, hooks 😉
@awesome-coding
@awesome-coding 2 месяца назад
rooks
@ThePandaGuitar
@ThePandaGuitar 2 месяца назад
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 2 месяца назад
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.
@mihirdharangaonkar6916
@mihirdharangaonkar6916 2 месяца назад
Less hated because less used ..it's that clear
@awesome-coding
@awesome-coding 2 месяца назад
“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 2 месяца назад
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.
@suryaprakash-sh5bf
@suryaprakash-sh5bf 2 месяца назад
It has become like react
@awesome-coding
@awesome-coding 2 месяца назад
What do you mean? I believe they are pretty far apart.
@suryaprakash-sh5bf
@suryaprakash-sh5bf 2 месяца назад
@@awesome-coding they have introduced states, effects and other thing similar to react hooks?
@user-zy4yh8iw1f
@user-zy4yh8iw1f 2 месяца назад
@@suryaprakash-sh5bf They are still widely different in how you would use them .
@awesome-coding
@awesome-coding 2 месяца назад
@@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 2 месяца назад
No it hasn't
@IStMl
@IStMl 2 месяца назад
Of course React is dead last
@awesome-coding
@awesome-coding 2 месяца назад
Yep…
@codyrap95
@codyrap95 2 месяца назад
Easy? When you have to learn new syntax just for it? No thanks!
@awesome-coding
@awesome-coding 2 месяца назад
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 2 месяца назад
Knock off Vue with daddy vercel money
@awesome-coding
@awesome-coding 2 месяца назад
😂 you guys find a way to hate on anything.
@arianitteamaxess674
@arianitteamaxess674 2 месяца назад
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 2 месяца назад
@@awesome-coding ;)
@nullpointer1755
@nullpointer1755 2 месяца назад
Except is better
@hamm8934
@hamm8934 2 месяца назад
@@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
@cristophermoreno2290
@cristophermoreno2290 16 дней назад
❤ = svelte + go
Далее
One Codebase For All Screens
8:01
Просмотров 14 тыс.
Svelte 5's Secret Weapon: Classes + Context
18:14
Просмотров 14 тыс.
The Simplest Tech Stack
9:38
Просмотров 58 тыс.
The Right Way To Build REST APIs
10:07
Просмотров 82 тыс.
i didn't know these svelte tips
18:56
Просмотров 4,3 тыс.
The Most Legendary Programmers Of All Time
11:49
Просмотров 542 тыс.
The Svelte 5 Guide: Runes And Universal Reactivity
21:41
Svelte 5 is Bigger Than You Think
9:35
Просмотров 17 тыс.
5 Design Patterns That Are ACTUALLY Used By Developers
9:27