The Easiest Way to Build Web Apps
Vložit
- čas přidán 26. 05. 2024
- 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/
Svelte is on a good way to becoming a go-to framework.
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.
Haha!
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.
Well said!
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
@@TechBuddy_ Good to know it’s not a problem now in newer frameworks
I'm a backend dev and svelte is my goto frontend when I need to.
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.
"THE LEAST HATED FRAMEWORK" hahaha
"for now" 😅
@@awesome-codingand "now" 😅
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
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.
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.
@@ValipPowa tell me how a library nearing a billion downloads is dead 🤔
@@theklr it's user's hate it. No one uses it by choice 😂
@@Daddytronics still doesn’t mean it’s dead. People have been declaring Wordpress, php, and even jquery’s death and yet…
Svelte 5 + tailwind is so easy 👌
Have you tried TW v4 yet? It's so dope
great, time to rebuilt my app for the 7th time
I love your attitude and energy. Youre a legend! Ethan Hindmarsh
Svelte is so pleasing to use. Things just make sense.
Svelte is the future ❤ great video
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.
Some of us are still making a living thanks to Java 6!
@@awesome-codingmaybe better be dead than use Java 😅
@@QueeeeenZ everybody has a price!
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.
@@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.
svelte makes web dev fun again
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
Sold
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
Nice! I didn’t know this one
Runes seems like a copy pasted from Vue 3 reactivity. Directly modify arrays & objects is not a new
Try it and then think....
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.
That vault boy on the thumbnail….,We are living in an age of after the final JavaScript framework war.
😂✌️
Will it be easy to migrate, started a bigger svelte project on v4 in april. Am already quite deep in it.
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.
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}
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.
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
@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.
@@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.
@@mpiorowski but React can run 10 year old code even now. their backward compatibility is something why companies prefer to use it.
What is the different between making a component and using a snippet and why does components create an overhead?
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
Svelte 4 life!
No 5?
@@awesome-coding whoops, I meant to write Svelte 4 life, not Svelte 4 for life 😅
@@iDarthGigi Haha! I thought you just decided to stick with Svelte 4 no matter what.
@@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.
how much do you charge to feature things? i want to market my tailwind library
Hey! You can reach out to me at hi@awesome.club
@@awesome-coding thanks, i''ll reach out in a couple weeks because i have to finish the website/docs
Ok cool. I'm rebuilding my app for the Nth time
you and me both!😅
Why should I use Svelte over Next JS?
It's SvelteKit over NextJS not Svelte over NextJS and yes I don't know why
@@thecoolnewsguy Its more intuitive and preformat
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
@@statuschannel8572 Correct 💯% !
NextJs is bullsh*t
But for an ML engineer with 0 webdev xp such as myself looking to create a micro saas, is it still the easiest?
Yes, I believe it is.
Feel free to reach out via email or X if you need any guidance :)
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.
@@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.
@@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
MY EYEEEEEESSSSS!!!!!
is it safe to start building with svelte 5 now? Or should I wait until it's oficially released?
Is your project in production already? If not, sure - go ahead and use Svelte 5
snippets says: 1000 file lines is not limit!
Just the way I like it.
@@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
@@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..
@@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
nah I'm sticking with plain js.
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.
You should use my "Not a Framework" framework then ✌️
github.com/awesome-club/not-a-framework
@@awesome-coding that's very similar to vuejs 😅
plain js using a small external library here and there called React
Dude you crazy lmao. Who would want to createElement('div'), appendChild() everywhere 🤣🤣?
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"
like, with new improvs in react, what will be the "benefit" of using svelte?
A more efficient reactive system (signal based instead of dirty checking) and no VDOM overhead. So basically a much liter, more efficient client implementation
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
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.
Not runes, hooks 😉
rooks
Less hated because less used ..it's that clear
“There are only two kinds of languages: the ones people complain about and the ones nobody uses.”
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.
It has become like react
What do you mean? I believe they are pretty far apart.
@@awesome-coding they have introduced states, effects and other thing similar to react hooks?
@@suryaprakash-sh5bf They are still widely different in how you would use them .
@@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)
No it hasn't
Of course React is dead last
Yep…
Easy? When you have to learn new syntax just for it? No thanks!
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)
Knock off Vue with daddy vercel money
😂 you guys find a way to hate on anything.
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
@@awesome-coding ;)
Except is better
@@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
❤ = svelte + go