13 Svelte Concepts you Need to Know

Svelte 5 - A hands on pragmatic crash course.
💬 Topics:
- What is Svelte;
- Single file components;
- Svelte Compiler;
- Runes, Signals, effects & derived state;
- Templates & rendering;
- Data binding & event listeners
🎖The Yes JS Course - www.yes-js.com/
🥇 Become a Member - / @awesome-coding
✉️ Join the Newsletter - newsletter.awe...
📖 Blog Article - www.awesome.cl...

[@awesome-coding]

Check out my upcoming "I'm too old for this sh*t but I have to finally learn it" frontend course - yes-js.com/
I know... I'm not good at naming things 🤦‍♂️

[@nevsy_1573]

Website looks great on desktop but be careful about responsiveness. On my phone it doesn't look to great (input + button not centered, background not covering whole screen). Theyre simple fixes, but theyre definitely worth it :) Loved the video though, very inscructive! Honestly can't wait for this type of full course :)

[@awesome-coding]

@@nevsy_1573 Thank you!

[@owhut2956]

damn, that like the exact same syntax of vue

[@nanashi7726]

The way to pass type to $props is wrong
Also onMount should be replaced with $effect

[@QueeeeenZ]

please do a video on Nuxt (Vue)

[@awesome-coding]

Will do!

[@davifreire833]

Svelte is the only good frontend framework. ALL frameworks turns simples things into absolute unnecessary chaos.

[@dqrk0]

every framework is vue now

[@awesome-coding]

😅

[@vaisakh_km]

XD and vue is the middle child that does all the work but no one takes about...

[@SilvestreVivo]

Let's say that Vue3 learned from Svelte3, and now Svelte learned from Solid. Svelte is still the winner.

[@vaisakh_km]

@@SilvestreVivo in past 1y, for almost all project i opted for svelte... such a awesome framework

[@madmaxdev]

svelte is optimized for vibes. -Rich Harris

[@wlockuz4467]

Your animations are so clean, what software do you use for editing?

[@awesome-coding]

Thanks! Premiere pro.

[@Jrd-ug5cm]

The only thing I hate about Svelte is that it's so good I don't want to use anything else!

[@awesome-coding]

😅

[@jitxhere]

As usual Awesome video!

[@awesome-coding]

Thank you!

[@ryo_5748]

Props type is written as "let { ... }: Props = $props()", not the generic type of $props().

[@mbahmusalto]

Svelte 5 is looking more like React. I prefer SolidJS if the thing look like React, otherwise Svelte 4 is my cup of coffee

[@SilvestreVivo]

What???? I think React19 is looking more Svelte and Vue, not in the way around.

[@bryamalfaro]

Good video man, thanks for share us

[@awesome-coding]

Glad you liked it!

[@ameypendokhare3832]

you are the official "Deno" channel's voice aren't you 🤨 ?

[@awesome-coding]

Yep ✌️

[@marceloguzman646]

so... vue

[@ashleyfreebush]

Yes js course? tell us more???

[@reubenjunior512]

which software did you use to showcase the code like that?

[@awesome-coding]

Premiere Pro and a lot of work 😅

[@mdkawsarislamyeasin4040]

How do you edit this video?
Animation on your code

[@awesome-coding]

I’m using Premiere Pro

[@saeidex]

reactive php 😅

[@awesome-coding]

😂✌️😅

[@ChichaGad]

Solid JS is the future

[@awesome-coding]

you might be right.

[@ChichaGad]

​@@awesome-coding Btw I love your videos
Keep up the good work

[@IainSimmons]

Really great summary of Svelte 5 features. I've been recently playing with it while building a Tauri app.
It's been surprisingly easy to get going, and when I have to look up something in the new Svelte 5 preview docs, it's usually what I would expect, or just very close to regular JS syntax.
Pretty refreshing. I might even like it a little more than Solid, but I haven't had to make lots of components and compose them together yet, so we'll see if that changes as the app becomes more complex.

[@jitxhere]

Hey I have a question like how far can we go with only JS in tauri? Like is rust necessary??

[@fallingseasy]

@@jitxhere most Operating System APIs are wrapped with JavaScript. If you don't need to do custom system stuff, you will probably be fine with JS only

[@IainSimmons]

@@jitxhere I'd say pretty far, there's a ton of JS APIs in Tauri for a lot of what you'd need. I'm sure there's things that would arguably be better in plain Rust code, but I'm sure you could find a solution.

[@DaPaBe1999]

@@jitxhere That is not the correct question, first you need to think of why is it a necessity in the first place, as well why Electron exists.
Rust is only the backend in a Tauri App if you choose to.

[@codingwithjamal]

@@jitxhere you dont have to use much rust code at all. You can use normal js todo almost anything on the file system it just might not preform as good as in rust. However you can use rust only for the desktop window if you want

[@lazyh0rse]

one thing to note, is that mutating arrays don't nessesary cause the ui to reflect the changes. you have to assign a new array. Like this
array = array;
or
array = [...array];

Not anymore, in Svelte 5 that is no longer the case, however if you are using svelte 4 or bellow, then yes, you need to assign the value.

[@didiercatz]

Not in Svelte 5! It just works without reassignment.

[@vaisakh_km]

🥲 it pains me that you haven't shown the result

[@fuzzy-02]

Kekw

[@awesome-coding]

@vaisakhkm783 sorry 😅