5 ms·

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) alternati

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#runtime-vs-compile-time-reactivity 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.

h0l0cube 3y ago
> 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.
s__s 3y ago
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.
swyx 3y ago
> 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 https://twitter.com/swyx/status/1482778158537801728) but havent actually tested it out since
- solarkraft 3y ago
  But Reactivity Transform is gone, isn't it? Isn't that what pre-compiled the reactivity and obsoleted the virtual DOM?
bananapub 3y ago
> 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-for-developing-libraries-says-svelte-author-as-team-switches-to-javascript-and-jsdoc/ 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?
- deleted 3y ago
  [deleted]
- johnfn 3y ago
  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.
  - nailer 3y ago
    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.
  - losingthefight 3y ago
    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.
adamnemecek 3y ago
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 3y ago
  If you compared svelte to vue to react, vue is much more like svelte than it is react.
  - naet 3y ago
    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 3y ago
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 https://blog.vuejs.org/posts/2022-year-in-review
- solarkraft 3y ago
  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 3y ago
    That's super exciting news, i only use composition API and script setup with Vue anyway!
civilitty 3y ago
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 3y ago
  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 3y ago
  Would it be possible to share your tests and results?
WuxiFingerHold 3y ago
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 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.
dist-epoch 3y ago
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.
- rafael-lua 3y ago
  I'm not sure what you mean. Vue 3 is very healthy and alive, and so is Evan.
- 1123581321 3y ago
  Vue 2 is getting backported features, but that will increase Vue 3 adoption in the long run as the migration hurdle becomes smaller.
- barrongineer 3y ago
  Really? Feature realease v3.3 was released just last month... https://blog.vuejs.org/posts/vue-3-3 https://blog.vuejs.org/posts/vue-3-3
  - dist-epoch 3y ago
    Look at the GitHub commits in the 6 months before 3.3
    - dodyg 3y ago
      What I like about Vue is less churn. Vue stayed in 2.6 for a long long time. It's fine.
cjblomqvist 3y ago
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 3y ago
  I've used both for years. Reactivity and stores in Svelte are much simpler and elegant IMO.

h0l0cube 3y ago

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

s__s 3y ago

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.

swyx 3y ago

> 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 https://twitter.com/swyx/status/1482778158537801728) but havent actually tested it out since

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

bananapub 3y ago

> 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-for-developing-libraries-says-svelte-author-as-team-switches-to-javascript-and-jsdoc/ 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?

deleted 3y ago
[deleted]
johnfn 3y ago
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.
- nailer 3y ago
  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.
- losingthefight 3y ago
  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.

adamnemecek 3y ago

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 3y ago
If you compared svelte to vue to react, vue is much more like svelte than it is react.
- naet 3y ago
  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 3y ago

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 https://blog.vuejs.org/posts/2022-year-in-review

solarkraft 3y ago
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 3y ago
  That's super exciting news, i only use composition API and script setup with Vue anyway!

civilitty 3y ago

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 3y ago
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 3y ago
Would it be possible to share your tests and results?

WuxiFingerHold 3y ago

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

dist-epoch 3y ago

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.

rafael-lua 3y ago
I'm not sure what you mean. Vue 3 is very healthy and alive, and so is Evan.
1123581321 3y ago
Vue 2 is getting backported features, but that will increase Vue 3 adoption in the long run as the migration hurdle becomes smaller.
barrongineer 3y ago
Really? Feature realease v3.3 was released just last month... https://blog.vuejs.org/posts/vue-3-3 https://blog.vuejs.org/posts/vue-3-3
- dist-epoch 3y ago
  Look at the GitHub commits in the 6 months before 3.3
  - dodyg 3y ago
    What I like about Vue is less churn. Vue stayed in 2.6 for a long long time. It's fine.

cjblomqvist 3y ago

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 3y ago
I've used both for years. Reactivity and stores in Svelte are much simpler and elegant IMO.