I'm really tired with React recently so I was looking at the competition and really liked Svelte. For those that know Vue, how does Svelte stack up with it?
Obviously the Vue ecosystem is much larger but other than that, personally, I much prefer Svelte.
I used Vue 2 as my main framework for some years, and still maintain a couple of projects with it.
I'm now focused on Svelte. The performance is better, the bundle sizes are much smaller, and most importantly you write a fraction of the code to achieve the same thing.
Svelte also has a reactive primitive (they call them stores) which allows you to model pretty much anything with reactivity similar to what you'd do with MobX but with a fraction of the cost. I believe Vue 3 also has this now but uses Proxy which is not supported in older browsers.
I'm completely unqualified to offer anything. The last time I tried React was four years ago, I've never used Svelte, and I'm currently using Vue 2. Vue 3 supposedly fixed a lot of the most surprising/annoying things about Vue 2.
But I'll say this. Thank goodness I don't consider myself a frontend dev.
The selling point of Vue was that it's supposed to be less of a learning curve compared to React. It's "closer" to regular HTML and JS. Except it's not really. You still should not mutate component "properties". If you ask anyone any question about anything, the answer is "use Vuex"- even if it has nothing to do with what you're trying to accomplish. There is definitely a learning curve around its reactivity model (this has supposedly improved with version 3). And I found some stuff just awkward, e.g., Vue components have lifecycle hooks that "support" async/Promises, but the lifecycle doesn't await the Promises, so I had some initialization that had race conditions and I didn't realize why/how.
I don't know if that's good or not, honestly. I just know that Vue2 has certainly not made me enjoy frontend work any more than I did before (which wasn't much).
The big gotcha for Vue2 was the performance when you wanted to display a list of like 10,000 things. I like to tinker with data and a lot of my day is spent on an sql prompt inside of emacs watching results sets of 1,000 rows or 50 columns just fly by so I can search them visually. Having to remember to "freeze" things for performance or create simpler "views" of the model I'm playing with is sometimes jarring.
This tripped me up recently too. Somehow I'd got it in my head that Vue (2) would selectively re-render sub-trees within a given component if no dependencies within the tree had changed. I had a table functioning as a datasheet (not even that big—about 20 columns by 100 rows) that was absolutely chugging and I couldn't work out why, because nothing within the table was changing very often. Extracted it to its own component and all the performance issues went away.
I love svelte. (I'm not a vue user). But my biggest gripe with it is that you can't create multiple components in a single file like how you can in react.
I remember seeing a FR for it in GitHub for it. But can't remember where they landed on it.
That sounds like a pretty minor gripe and really more of a matter of taste. I believe I read the creator of Svelte say he prefers it this way because it makes creating Web Components out of a svelte component more straight forward.
i wonder if there is an editor that lets your places multiple files like tiles in the same buffer/window so it feels like the same file to you as an editor?
I am sure emacs can be made to do this, but I wonder if vscode has a plugin for it...
I used Vue 2 as my main framework for some years, and still maintain a couple of projects with it.
I'm now focused on Svelte. The performance is better, the bundle sizes are much smaller, and most importantly you write a fraction of the code to achieve the same thing.
Svelte also has a reactive primitive (they call them stores) which allows you to model pretty much anything with reactivity similar to what you'd do with MobX but with a fraction of the cost. I believe Vue 3 also has this now but uses Proxy which is not supported in older browsers.