[solarkraft]

Time for a very naive question.

As somebody looking for a more effcient (less re-rendering) and nicer DX (template based, stuff like exit animations) alternative to React, what actually makes Svelte measurably better than Vue? On first (and very naive) look the two seem pretty similar, with the biggest difference being that Vue seems to have the much bigger ecosystem and more mature tooling (I keep hearing about Svelte's flavor of JS basically being its own language now and it not playing all that well with Typescript). From what I remember they even once had a virtual DOM-replacing Ahead of Time compiler, so that might not be the biggest moat either.

Both can be fiddled around with to support rendering using JSX, but it seems to easier and better supported for Vue.

Edit: The AOT compilation was called "Reactivity Transform" and dropped due to the aforementioned shift away from "real" JavaScript: https://vuejs.org/guide/extras/reactivity-in-depth.html#runt...

Now I wonder whether the performance benefit is big enough to justify using Svelte, especially since Vue already uses a "compiler informed virtual DOM".

Anecodally all Vue apps I have used felt fast while the React experience was more mixed, but the sample on the Vue side is also just really small.

[bananapub]

> I keep hearing about Svelte's flavor of JS basically being its own language now and it not playing all that well with Typescript

it's a weird habit on HN to refer to random rumours that have discouraged you from trying something, and then explicitly not link to even the source of the random thing you're thinking of.

I would guess you're misremembering something about the *developers of Svelte* saying they didn't think Typescript was worth it for *developing libraries*, and so they were switching to using JSDoc annotations for developing Svelte, which has no impact at all on Typescript or Svelte or Svelte users using Typescript?

e.g. https://devclass.com/2023/05/11/typescript-is-not-worth-it-f...

anyway, Svelte is fairly similar to Vue, just a subjectively slightly nicer style. do both tutorials and see which you like I guess?

[rco8786]

> it's a weird habit on HN to refer to random rumours that have discouraged you from trying something, and then explicitly not link to even the source of the random thing you're thinking of.

I don't know about you, but I don't keep a map of "random thought" to "url" anywhere. It seems totally fine/normal in a discussion forum to say "Hey i heard this thing, any substantiation to it?" without needing a source.

[phist_mcgee]

Gonna need a source on why you think that bud.

[johnfn]

But Svelte obviously doesn't play well with TypeScript, and is kind of its own language - you don't need a source for that. Good luck e.g. getting reactive declarations to play well with TS's type narrowing or null analysis.

[npn]

you clearly don't know what you are talking about.

reactive declarations do not change the type of the objects. it just that they can rerun when the dependencies change.

sure for the convenience of the users you do not need to type `let vars...` for every new variable declared in the reactive statement, but no one forbid you to write it before hand, or let the language server/plugin do it for you.

but Svelte indeed do not work perfectly with typescript, because it allows you to write code inside html template, which currently only support javascript expression.

[Volundr]

Data-point of one, but I have definitely run into issues where Typescript can't understand what's going on in a reactive expression, and had to aggressively refactor my code to make everything happy. Most of the time it works great, but when it doesn't it can be really annoying. I wouldn't go so far as to say it doesn't play well, but the seams are definitely visible.

[npn]

Could be the plugin was broken somehow. Happen all the time for me. Even now the syntax highlighting and code formatting feature would break if I write the code the wrong way.

from my understanding the plugin does some clever tricks like insert some dummy code or create some dummy files to be consumed by the typescript language server. so it is not guaranteed to be correct 100% of the time.

[MrJohz]

I mean, that sounds like a data point of two now to me - you're also saying that Typescript and Svelte don't play that nice together if the plug-in breaks "all the time" and you need to be careful how you write code just to get correct syntax highlighting and code formatting, no?

[johnfn]

This simply isn't true. For instance, if you narrow a variable from `1 | 2 | 3` to `1 | 2`, then trigger a reactive declaration, the reactive declaration can't understand that you've narrowed the variable, and you lose that information. Same thing happens if you go the opposite direction and broaden a variable. TS assumes that program flow roughly goes from top to bottom; if you break that invariant you lose a lot of handy features.

> you clearly don't know what you are talking about.

huh?

[OJFord]

I think the claim is that it breaks TS parsing, not that it changes the type.

[npn]

Then it's wrong too. Because it is perfectly valid js code. It is just that they repurpose the label syntax (used for breaking out of inner loops) for the reactive statement.

[losingthefight]

I couldn't disagree more. Compared to the mess of hooks in React, Svelte is closer to JavaScript in the script portion and closer to normal html in the markup portion. I use vite and TypeScript with each project and never once had a typing issue. Ive built several production apps and consider it far better for my brain than other libraries I tried, and I've been using React since before Redux was mainstream. Svelte is my go to now.

[johnfn]

> I couldn't disagree more. Compared to the mess of hooks in React, Svelte is closer to JavaScript in the script portion and closer to normal html in the markup portion.

Come now. Only one of React and Svelte needs a custom compiler to run in the browser, and it isn't React...

[croes]

https://svelte.dev/blog/svelte-and-typescript

[nailer]

I literally hack on TS 5 on Svelte all day and have for a year now (was 4.x originally). Never had a problem with reactive declarations.

[WuxiFingerHold]

Vue 3 (with <script setup> is quite close to Svelte in terms of DX, but Svelte has the edge here. Svelte is so simple, elegant and concise.

The biggest advantage of Vue is the ecosystem. However, Svelte is catching up. Some interesting UI component libs have recently arisen, e.g. https://skeleton.dev.

Performance wise, both are super fast.

Make sure to check out Sveltekit, even for building pure SPAs. The routing and data loading are worth it alone.

[civilitty]

The performance difference is huge. A few years ago I launched an interactive consumer app on very resource constrained devices that would have been impossible with React or Vue (I empirically tested both). Think dual or quad core 1Ghz arm processors with zero GPU acceleration running electron.

The only optimization I had to implement was virtualization when showing hundreds of off screen images (an optimization I would have had to implement regardless of framework).

[solarkraft]

That's fascinating. Could you elaborate on how big the difference is? I'd also be interested in a comparison with Vue's vapor mode.

[codeptualize]

Would it be possible to share your tests and results?

[swyx]

> From what I remember they even once had a virtual DOM-replacing Ahead of Time compiler, but walked back on it for some reason.

nope, its still there, just is less complicated than you make it sound with those adjectives in front of "compiler"

in the days of svelte 3 vs vue 2, i'd say the authoring experience was a lot more straightforward as vue had constraints around being a drop in framework. but then vue 3 came with "script setup" and other svelte inspired improvements that brought it a lot closer to svelte. am a bit uncomfortable with the 2->3 churn in the vue ecosystem (https://twitter.com/swyx/status/1482778158537801728) but havent actually tested it out since

[solarkraft]

But Reactivity Transform is gone, isn't it? Isn't that what pre-compiled the reactivity and obsoleted the virtual DOM?

[adamnemecek]

I have little experience with Vue but to me Vue is very similar to React.

What sold me on svelte is the fact that I learned like all of it in maybe 3 hours. I have tried to pick up React here and there and I get the fundamentals but I hate that you need an architecture framework, a router framework etc. Svelte has a standard way of doing that.

Writing Svelte, I actually had "fun" building stuff, I can't say the same thing about my React attempts.

[jawngee]

If you compared svelte to vue to react, vue is much more like svelte than it is react.

[naet]

In my limited experience Vue felt more like React than Svelte felt like React. But I only used Svelte for a small personal project, and mostly only used Vue 2 + Nuxt for a couple of client marketing sites, so my experience might not be the best view into each.

[samwillis]

Vue dropped "reactivity transform" but they are working on a new "Vapor Mode" which is inspired by SolidJS, i.e. not having a VDOM.

https://blog.vuejs.org/posts/2022-year-in-review

[solarkraft]

Thanks for the link!

> Vapor Mode will only support a subset of Vue features. In particular, Vapor Mode components will only support Composition API and <script setup>. However, this supported subset will work exactly the same between Vapor and non-Vapor components.

> Building an app with only Vapor components allows you to drop the Virtual DOM runtime from the bundle, significantly reducing the baseline runtime size.

This seems like a clear push in the direction of Solid and Svelte in this area.

[aerio]

That's super exciting news, i only use composition API and script setup with Vue anyway!

[h0l0cube]

> especially since Vue already uses a "compiler informed virtual DOM"

Not diffing at all against a virtual DOM and instead executing the pre-compiled DOM manipulations is an order of magnitude better in terms of processing. It also avoids diffing entirely. At a casual glance, the compiler hints and other VDOM optimisations in Vue reduce but do not obviate this burden (e.g., don't re-render static nodes, flatten the DOM tree to avoid traversing) But as ever, it's best to measure these things and I can't seem to find any recent benchmarks between the two platforms, and any benchmark would vary wildly depending on use-case, and with the exigencies of real-world development.

[cjblomqvist]

I haven't worked with Svelte (but with Vue, so def biased) but my feeling is that where Vue really shines (and always have, compared to other frameworks) is it's data reactivity system, making data (including but not limited to) stores very nice to author.

The composability of Vue 3 data stores makes it imo really nice to work with for anything a little bit more complex, and I've yet to see anything as good.

[pier25]

I've used both for years. Reactivity and stores in Svelte are much simpler and elegant IMO.

[dist-epoch]

Vue 3 is kind of dead. Almost no features in the last year. Look at the GitHub repo, little activity, mostly maintenance stuff.

I suspect author (Evan) lost interest, given the Vue 2/3 situation (similar to Python 2/3) and the lost battle against React.

[barrongineer]

Really? Feature realease v3.3 was released just last month...

https://blog.vuejs.org/posts/vue-3-3

[dist-epoch]

Look at the GitHub commits in the 6 months before 3.3

[dodyg]

What I like about Vue is less churn. Vue stayed in 2.6 for a long long time. It's fine.

[1123581321]

Vue 2 is getting backported features, but that will increase Vue 3 adoption in the long run as the migration hurdle becomes smaller.

[rafael-lua]

I'm not sure what you mean. Vue 3 is very healthy and alive, and so is Evan.

[s__s]

Svelte is more like a compiler than a library. The code you ship is plain JavaScript without any svelte dependency. That’s why svelte has always been simple and fast.