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

[@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.

[@heyjitendra]

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

[@fallingseasy]

@@heyjitendra 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]

@@heyjitendra 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]

@@heyjitendra 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]

@@heyjitendra 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

[@heyjitendra]

As usual Awesome video!

[@awesome-coding]

Thank you!

[@wlockuz4467]

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

[@awesome-coding]

Thanks! Premiere pro.

[@madmaxdev]

svelte is optimized for vibes. -Rich Harris

[@bryamalfaro]

Good video man, thanks for share us

[@awesome-coding]

Glad you liked it!

[@QueeeeenZ]

please do a video on Nuxt (Vue)

[@awesome-coding]

Will do!

[@forno_nicolas]

Svelte 5 💯💯

[@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]

😅

[@ryo_5748]

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

[@dqrk0]

every framework is vue now

[@awesome-coding]

😅

[@vaisakhkm783]

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.

[@vaisakhkm783]

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

[@reubenjunior512]

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

[@awesome-coding]

Premiere Pro and a lot of work 😅

[@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

[@mdkawsarislamyeasin4040]

How do you edit this video?
Animation on your code

[@awesome-coding]

I’m using Premiere Pro

[@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.

[@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.

[@ashleyfreebush]

Yes js course? tell us more???

[@ameypendokhare3832]

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

[@awesome-coding]

Yep ✌️

[@davifreire833]

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

[@saeidex]

reactive php 😅

[@awesome-coding]

😂✌️😅

[@marceloguzman646]

so... vue

[@vaisakhkm783]

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

[@fuzzy-02]

Kekw

[@awesome-coding]

@vaisakhkm783 sorry 😅