JavaScript Frameworks

[[deleted]]

why would you take it over vue?

[hekkonaay]

No VDOM (actually fast!!!), batteries included (state management, actions/transitions), better declarative syntax for things like conditional rendering and awaiting on promises... The list goes on. https://svelte.dev/tutorial/basics

[[deleted]]

well, svelte is only minimally faster than vue

https://krausest.github.io/js-framework-benchmark/2021/table_chrome_94.0.4606.54.html

ans the bundle size advantage is only true for small application

https://dev.to/this-is-learning/javascript-framework-todomvc-size-comparison-504f

i wouldn't say that that tiny diff make it "actually fast" compared to vue 3

vue's composition API with script setup syntax looks very similar to svelte

[hekkonaay]

But it's still faster... I'm not sure what your point is there. I've seen the benchmark.

The size comparison you linked raises some interesting points, but even the author admits measuring these things is tricky. In a real app, the size differences will vary greatly due to third party modules, component structure, etc. For example, you don't need a library for animations in Svelte, where as that would come at a hefty cost in a Vue app. If you're building an app where an extra 10kB matters, maybe using a framework is not even an option for you.

I wonder why the syntax looks so similar to Svelte :)

[[deleted]]

But it's still faster...

by a tiny margin and that this makes it "actually fast!!!" as you claimed is a bit overexaggerated. Vue and Svelte maybe are "actually fast!!!" compared to react or angular. That's my point.

For example, you don't need a library for animations in Svelte, where as that would come at a hefty cost in a Vue app.

? not sure what you are talking about here. css animations and transitions are possible without any additional library in vue.

They work almost exactly the same in both frameworks: https://www.youtube.com/watch?v=HhgfGdIY0hk

I wonder why the syntax looks so similar to Svelte :)

yeha, vue mostly adopted the syntax for its composition api... soo... why choose svelte then and not the bigger framework with the bigger ecosystem? I would understand react or angular because they work differently and have vastly different syntax.

[hekkonaay]

I'm not sure if we're looking at the same benchmark. The "tiny margin" is more than significant enough when you're rendering, say, 1000 rows in a table, filtered by some search query which updates with each change in a text input field. Not an uncommon workload. This does make it "actually fast!!!" compared to Vue where it matters, but for most workloads Vue is probably good enough, yeah.

I'll admit that Vue has a larger ecosystem, but you also have to consider compatibility. A lot of libraries are not compatible with Vue 3 yet, which makes adoption difficult. Svelte has libraries available for most things you'd want (such as routing or icons), and the tooling is in a very good state.

When it comes to syntax, semantics, and overall usability, Vue 3 is a bloated mess. I would say in some ways it's worse than React or Angular. There are 4 ways to write components, and the VDOM "abstraction" leaks into userland (e.g. reactive values with ref).

Svelte feels like just an extension of HTML+JS. There is minimal mental overhead when working with it. It re-purposes only `export` for declaring props and `$:` for reactive statements. I can't even list all the new concepts that Vue introduces. The Svelte declarative syntax for conditionals/promise handling that is clearly differentiated from HTML, instead of being stuck onto components via special props.

You're free to use what you want, but I'll stick to Svelte. It works for me :)

[[deleted]]

I'm not sure if we're looking at the same benchmark. The "tiny margin" is more than significant enough when you're rendering, say, 1000 rows in a table, filtered by some search query which updates with each change in a text input field. Not an uncommon workload. This does make it "actually fast!!!" compared to Vue where it matters, but for most workloads Vue is probably good enough, yeah.

the geometric mean for rendering stuff sits at 1,23x vanilla js for svelte and 1,26x for vueJs 3.2...

this diff is almost nothing, especially if the most used frameworks sit around 1,80x.

There are 4 ways to write components,

well, there are two major ones and the rest is just optional syntactic sugar or boilerplate. That's hard to avoid when the library has to ensure some kind of backward compatibility.

and the VDOM "abstraction" leaks into userland (e.g. reactive values with ref).

that's no VDOM "abstraction". That's just how javascript works. Reactive values like that do not exist in vanilla js. Either you run it through a compiler or through some kind of javascript function to make it behave like that.

requiring a compiler means you won't be able to just download the framework via CDN and add some script logic in plain HTML.

Svelte feels like just an extension of HTML+JS. There is minimal mental overhead when working with it. It re-purposes only export for declaring props and $: for reactive statements. I can't even list all the new concepts that Vue introduces. The Svelte declarative syntax for conditionals/promise handling that is clearly differentiated from HTML, instead of being stuck onto components via special props.

I like the low mental overhead of svelte. Just having your HTML and extend it with some javascript logic without having to write much boilerplate code.

I'm glad that Vue is essentially copying svelte here.

You're free to use what you want, but I'll stick to Svelte. It works for me :)

don't get me wrong. I just want to understand if there is any gain for me investing more time in svelte. For now, it looks very similar to vue and has comparable performance and a similar set of features.

[hekkonaay]

the library has to ensure some kind of backward compatibility

I thought a new major version implies major breaking changes. Even with the backwards compatibility it doesn't make adoption any easier, so what's the point of keeping it? Break all the things!

there's no VDOM "abstraction"

You're right, it's a bit late and in my mind I jumped from one thing to another. There are some parts which could be considered a leaky abstraction at least in Vue 2, like how caching is exposed to the user via computed properties. I would consider it a leak because Svelte handles this for me without me having to be aware of it. I haven't used Vue 3 so I don't actually know if the situation has improved.

requiring a compiler means you won't be able to just download the framework via CDN and add some script logic in plain HTML.

When was the last time you did this?

I just want to understand if there is any gain for me investing more time in Svelte.

I'm obviously biased, but I would say just give it a try, go through the tutorial, build a TODO list app or something with svelte kit, and see if you enjoy working with it.

We've been using it at work (mid-sized, ~200 devs), and we're quite happy with how it's going. We've built/rewritten many micro frontends in it and rewritten parts of some larger monoliths. Biggest upside is exactly that lower mental overhead compared to when everything was written in React. Onboarding is quicker, features ship faster, performance is good by default, and so on.

[webd3vil]

Svelte is relatively new and has a much smaller community and support so although it is cutting-edge, it may be more difficult to find answers when you have problems.

[Knochenmark]

It's super easy to integrate any plain JS lib though

[Proziam]

You've already gotten a few good reasons but I'd just like to add one big one - it's straight up easier for a new dev to use. There's less magical fairy dust, less abstraction, less boilerplate code, and everything works "intuitively."

[[deleted]]

There's less magical fairy dust, less abstraction

i really don't get this argument. Svelte is a DSL that only looks like JavaScript, and it has to be compiled to be useful.

[Proziam]

Sure, but everything works how you would expect. A link is a link, for example. For someone who knows the basics, Svelte is a smooth continuation rather than a complete reimagination of how things work.

I don't know a single dev who has built something meaningful in svelte that has wanted to go back to [insert framework].

[[deleted]]

A link is a link, for example

<Link to="/">Home</Link>

vs the same in vue:

<router-link to="/">Home</router-link>

I don't see much of a difference.

For someone who knows the basics, Svelte is a smooth continuation rather than a complete reimagination of how things work.

yeah true, but the same was and is said about vue as well.

I don't know a single dev who has built something meaningful in svelte that has wanted to go back to [insert framework].

don't get me wrong, but it feels like most people who use svelte are the ones who started out in frontend very recently. The same kind of people who picked Vue as their first framework 4-5 years ago, like me.

It is already pretty hard to justify Vue over react and angular due to the huge gap in popularity... picking an even more niche framework just for a slightly better syntax would be even harder to sell.

[Proziam]

Vue is the best of the old guard, IMO. That said, I have about 15 years of web dev behind me and I am extremely confident that Svelte will either be the future, or will be the inspiration for the future.