Svelte vs Vue - the Svelte compiler is AWESOME

[@MartinMasevski]

Nice video! Good job so i interesting 🐱 Just a small note, you can destructure an object in a v-for just like in svelte

[@jeffrey_codes]

You're right about destructuring - must have been a user error on my part when I was trying it. Thanks for the correction, and glad you enjoyed the video!

[@snowdane3920]

I have been a Vue developer for about 3+ years, and have used vue 2, currently using nuxt 3(vue 3)... But oh boy, Svelte has never looked more tastier than ever before to me. The DX looks great.

[@tomsour1s-oc6rb]

I feel this. I am using vue and nuxt for over years now. But svelte looks clean af

[@baka_baca]

I feel like you went really easy on Vue here. Svelte's syntax is able to get rid of a whole lot more complexity over Vue than what you showed. For example, using the "export let" keyword also handles prop definitions along with defaults. In 1 clean line you can express the same thing as like 5 lines of Vue. You also don't have so many life cycle hooks to think about, just labeling a variable or statement as reactive pretty much just solves all of that for you. You also don't need to think about "computed" vs "watch" vs "updated" or whether this should go in the "setup", slap a reactive label on what you need and I've had solid luck with everything just working with a tiny fraction of the code and cognitive complexity. I've rewritten a small app in Svelte from React as well and saw more than a 50% reduction in code and had pretty much zero boilerplate or framework type code. The logic I wrote was largely just the business logic I needed and that to me is a critical difference in why Svelte is so great to work with, I can just think about my business problems and much less about my tool.

[@jeffrey_codes]

Agreed, Svelte is incredibly clean, and I'm happy to hear it stays good to use. I'm wrapping up my first project in it and It's shocking how quickly thinking in Svelte seems like the right way (except form actions 😂 I get the reasoning but they're not natural to me yet)

[@mikesantiago_]

agree into this

[@mikesantiago_]

I've tried both too, but Svelte is more developer friendly in my opinion. and to mention also, the build version is smaller. There's no job in demand for Svelte right now, but who cares if you are working for yourself.

[@oboealto]

Thanks a lot for this side-by-side comparison. It helped me a lot.

[@RockTheCage55]

Doesn't that make debugging harder (especially in large components) if the code your debugging doesn't look like the code you wrote?

[@gamechannel1271]

Absolutely. The framework code being separate from the business logic in your component code is a big positive in Vue.

[@SteveABC123]

Your very first example could have used :alt="name+' dancing'" in Vue. Your third example could have used rather than placing the conditional on the component itself. You should probably understand Vue a bit better before attempting to compare Svelte to it.

[@pookiepats]

BURN 😂 caught bro reading off his notes

[@dev-workshop]

Hello Jeffrey, first of all I want to say a big thank you for the video and the work done. However, for me this video looked like: "hey, svelte is better than the view, because the svelte is better and there are fewer letters." It seems that this video touches only the tip of the iceberg and does not refer to the actual use of these tools on projects of varying complexity. Yes, vue is more verbose, that's absolutely true. But is it really that bad? Argument about different properties between v-if and v-else solved with linter + prettier + syntax-highlighting When such comparisons are made, one should not forget about typescript. Yes, not everyone uses typescript, but many do. And in vue, working with typescript is much nicer than in svelte. Also, the use of ref and similar constructions allows you to put business logic into separate files, write composables and services, reuse code, have a single syntax in component files and regular js / ts files. This is a very important feature, svelte has a problem with it. I also want to add that the RFC that was mentioned is the big evil. Since this syntax can only be used in SFC and cannot be used outside of it. Which can lead to having two syntaxes. I also noticed the phrase "ideal javascript" on the slide, but this is not always true, the javascript generated by the svelt compiler is good, but not always ideal. Well, in the end, I want to add that debugging code on view in the browser is much more pleasant than trying to debug svelte, at some points it turns into a pain

[@rey6253]

For me the vuejs is the winner, it uses purely js syntax, hence the domain knowledge is transferrable from one to the other js framework as long as they dont use some weird syntax like react. Swelte also suffers from the same issues.

[@danish2462]

Svelte is simple and elegant and gives great developer Experience. Vue is more powerful and gives more fine grained and controlled reactivity. I love working with both Vue and Svelte. It all depends on the use case that you want to implement. The best part about Vue is it can be injected in any existing applications as well. Even a normal html page can be injected with some Vue.js code. Svelte is amazing because of the DX and it is way better than react. On top of that Sveltekit just makes life so easy as dev with amazing SSR features.

[@jeffrey_codes]

If you saw two notifications - sorry about that. This is the correct one. Previous upload got stuck on the HD processing process and I hit 'publish' before catching the issue.

[@PopescuMarian]

Hi, can you also do a test for speed and size with a more complex app, with routes and state, equivalent of Pinia for Svelte?!

[@jeffrey_codes]

This is a great idea! I may do a longer tutorial-style video/series soon, and including the speed and size stats would be a fantastic addition

[@borjovsky3164]

After passing through a living hell with React for almost a year, Vue looked like the best thing ever (I'm a backend dev). This is the first time I'm taking a look at Svelte, and (correct me if I'm wrong) the syntax looks A LOT more backend-like, which is way better for me.

[@Ahmad_5000]

the only framework I can think of that is "backend-like" is Angular, definetly not Vue or Svelte lol

[@VperVendetta1992]

Amazing comparison, thanks!

[@cv3787]

Good comparison! It is easy to compare and understand

[@bartlomiejuminski]

Quality video, thank You :)

[@theretroman3862]

I tel you what: Vercel is greedy and I will not use Svelte for that exactly reason. Also, to much smartness is not good for readability. At least, this is my personal opinion. And one that it is insanely important: Vue community is large now and ecosystem is solid and stable.

[@sid__art_6614]

I've never used Vue or svelte. I'm new in frontend world so I started with react. But everywhere I heard vue is awesome. Seeing this react is easier than vue. svelte looks good.

[@yifeiren8004]

React is not easier than Vue...... It is one of the most difficult one. You should start with Vue or Sevlte, then go back to react if you really wish.

[@farodyne]

Coming from a long background of using Vue 2 and Vue 3, still when I do my best to keep an open mind about Svelte, I would never switch to it. Pragmatically this is for two reasons. Using the Vue 3 options API is many times cleaner than the Vue 3 composition API. Svelte's non-standard "JavaScript" is simply an insult to JavaScript as a language, so what you claim you gain in "cleaner" logic, is at the cost of learning a JavaScript-like notation that you will never be able to use anywhere else. For larger size projects, Svelte extremely soon collapses into pure spagetti code.

[@yalasta]

Thanks for the comparation video! Anyway is there any UI framework like vuetify on top of svelte? Im a vuetify lover, will consider svelte if it has one

[@BosonCollider]

Svelte has Skeleton which I like more than Vuetify. I also personally like AgnosticUI and Shoelace which are all usable from any framework, or just using a pure CSS framework that is naturally framework-independent. Framework-dependent UIs have their downsides.

[@IamSH1VA]

Looking at both sytax, if Svelte wasn't there I would have definitely chosen Vue over react, angular etc

[@gamechannel1271]

Why did you pick a ref instead of a reactive for Vue at 5:00? This is a misrepresentation.

[@surfingmindwaves]

Svelte is awesome!

[@jeffrey_codes]

Agreed!

[@BosonCollider]

This focuses _only_ on syntax and barely touches semantics = (

[@pookiepats]

let's write vue like svelte and wonder why svelte does it better lookin ahh

[@stuvius]

Svelte > everything else

[@nested9301]

not a big difference people complaining all the time and they will never be satisfied

[@meggi8048]

what annoys me with svelte is that you cannot do this click = () => list.push("value"); you need to do this: list = [ ...list, "value" ]; this annoyed me in react already.

[@ded-lok]

you can also do list.push('value'); list = list;

[@cgsman1]

😊

[@nicholaspreston9586]

HTMX.

[@pookiepats]

do it again with svelte 5 hahahahahahahahahahahahaha does it look simpler now? lmao this is why syntax verbosity are such poor arguments 😂😂😂

[@yooyo3d]

After watching this video I decided to stick with Vue. Vue and svelte have awful syntax so it doesn't matter which one is more or less readable. It's just bad.

[@jeffrey_codes]

If you think the syntax is all equally bad and unreadable, use React. React has more jobs!

[@yooyo3d]

@@jeffrey_codes React syntax is awful as well. Actually all JS frameworks is full of workarounds presented as features.

[@knarkzel2006]

@@yooyo3d You should make a better one to fix this 👍

[@nested9301]

@@yooyo3d javascript was never a good idea for the web

[@cryptoboy1461]

Then why use a framework? Just use vanilla JS so you don't have to deal with the awful syntax.

[@samuelmorkbednarzkepler]

I dont actually think the svelte syntax is that much nicer. Its more terse but why is terse always good? Reading $: is like looking at hyroglypics. ref and watch have a tiny bit more characters but they are much more clear. ref and watch says something. And they do this without changing the behavior of JS by overwriting things like the let keyword. Not to mention that the vue API works the exact same inside and outside components while Svelte needs to change into the stores API to go outside components. Thats a massive downside imo that puts Vue ahead. I also dont agree with you comments on the Vue directives compared to Svelte. I much prefer having them be properties on the html elements. It both looks nicer, feels cleaner, and mainly it also means that Vue works in plain html files without a build step because the Vue syntax is 100% aligned with html