News for hackers. Stuff that matters.
Re:Svelte 4 by solarkraft on Thursday June 22, 2023 @11:21AM (#36433520)
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 Transforms" and dropped due to the aforementioned shift away from "real" JavaScript: https://vuejs.org/guide/extras/reactivity-in-depth.html#runt...

Re:Svelte 4 by bananapub on Thursday June 22, 2023 @11:28AM (#36433649)
> 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?

Re:Svelte 4 by johnfn on Thursday June 22, 2023 @11:39AM (#36433847)
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.
Re:Svelte 4 by npn on Thursday June 22, 2023 @12:11PM (#36434388)
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.

Re:Svelte 4 by Volundr on Thursday June 22, 2023 @12:38PM (#36434810)
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.
Re:Svelte 4 by npn on Thursday June 22, 2023 @12:50PM (#36435066)
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.

Re:Svelte 4 by MrJohz on Thursday June 22, 2023 @07:29PM (#36440687)
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?
Re:Svelte 4 by npn on Thursday June 22, 2023 @11:17PM (#36442380)
Syntax highlighting and code formatting sometime break because Svelte file is single file component format, which mean it has script, markup and style in a single file. It's rather complex to parse it right, especially when you use regexes to do the job like in VS Code.

It's just the problem with the VS Code Svelte extension, not the framework itself nor because of Typescript. Also for my case, it happens because I prefer to not use semicolons in my code, not because it is typescript.

Re:Svelte 4 by MrJohz on Friday June 23, 2023 @12:24AM (#36442765)
Maybe, but Vue also has SFCs, and I've never once had issues with syntax highlighting or code formatting there.
Re:Svelte 4 by npn on Friday June 23, 2023 @05:15AM (#36444532)
the distinct difference between Vue and Svelte is html in Vue need to be wrapped in `<template>` tag. There is no such restriction in Svelte SFCs.
Re:Svelte 4 by OJFord on Thursday June 22, 2023 @02:12PM (#36436365)
I think the claim is that it breaks TS parsing, not that it changes the type.
Re:Svelte 4 by npn on Thursday June 22, 2023 @03:19PM (#36437302)
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.
Re:Svelte 4 by johnfn on Saturday June 24, 2023 @01:55AM (#36455967)
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?

Re:Svelte 4 by croes on Thursday June 22, 2023 @01:44PM (#36435926)
Re:Svelte 4 by nailer on Thursday June 22, 2023 @05:44PM (#36439491)
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.
Re:Svelte 4 by losingthefight on Thursday June 22, 2023 @11:16PM (#36442376)
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.
Re:Svelte 4 by johnfn on Friday June 23, 2023 @01:22PM (#36449768)
> 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...

Re:Svelte 4 by rco8786 on Thursday June 22, 2023 @03:09PM (#36437163)
> 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.

Re:Svelte 4 by phist_mcgee on Thursday June 22, 2023 @07:05PM (#36440436)
Gonna need a source on why you think that bud.
Re:Svelte 4 by swyx on Thursday June 22, 2023 @11:27AM (#36433624)
> 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

Re:Svelte 4 by solarkraft on Thursday June 22, 2023 @12:19PM (#36434496)
But Reactivity Transform is gone, isn't it? Isn't that what pre-compiled the reactivity and obsoleted the virtual DOM?
Re:Svelte 4 by adamnemecek on Thursday June 22, 2023 @11:33AM (#36433743)
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.

Re:Svelte 4 by jawngee on Thursday June 22, 2023 @02:04PM (#36436235)
If you compared svelte to vue to react, vue is much more like svelte than it is react.
Re:Svelte 4 by naet on Thursday June 22, 2023 @03:46PM (#36437724)
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.
Re:Svelte 4 by samwillis on Thursday June 22, 2023 @12:07PM (#36434323)
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

Re:Svelte 4 by solarkraft on Thursday June 22, 2023 @12:24PM (#36434565)
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.

Re:Svelte 4 by aerio on Thursday June 22, 2023 @09:16PM (#36441551)
That's super exciting news, i only use composition API and script setup with Vue anyway!
Re:Svelte 4 by civilitty on Thursday June 22, 2023 @01:10PM (#36435422)
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).

Re:Svelte 4 by solarkraft on Thursday June 22, 2023 @01:52PM (#36436051)
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.
Re:Svelte 4 by codeptualize on Thursday June 22, 2023 @02:33PM (#36436694)
Would it be possible to share your tests and results?
Re:Svelte 4 by WuxiFingerHold on Thursday June 22, 2023 @01:34PM (#36435765)
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.

Re:Svelte 4 by dist-epoch on Thursday June 22, 2023 @02:25PM (#36436565)
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.

Re:Svelte 4 by barrongineer on Thursday June 22, 2023 @02:50PM (#36436936)
Really? Feature realease v3.3 was released just last month...

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

Re:Svelte 4 by dist-epoch on Thursday June 22, 2023 @03:34PM (#36437535)
Look at the GitHub commits in the 6 months before 3.3
Re:Svelte 4 by dodyg on Thursday June 22, 2023 @09:20PM (#36441585)
What I like about Vue is less churn. Vue stayed in 2.6 for a long long time. It's fine.
Re:Svelte 4 by rafael-lua on Thursday June 22, 2023 @11:07PM (#36442334)
I'm not sure what you mean. Vue 3 is very healthy and alive, and so is Evan.
Re:Svelte 4 by 1123581321 on Saturday June 24, 2023 @01:40PM (#36460857)
Vue 2 is getting backported features, but that will increase Vue 3 adoption in the long run as the migration hurdle becomes smaller.
Re:Svelte 4 by cjblomqvist on Thursday June 22, 2023 @03:32PM (#36437509)
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.

Re:Svelte 4 by pier25 on Thursday June 22, 2023 @04:55PM (#36438844)
I've used both for years. Reactivity and stores in Svelte are much simpler and elegant IMO.
Re:Svelte 4 by h0l0cube on Thursday June 22, 2023 @09:13PM (#36441529)
> 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.

Re:Svelte 4 by s__s on Friday June 23, 2023 @08:59PM (#36454322)
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.