Live data from Hacker News

Introducing Svelte, and Comparing Svelte with React and Vue (2021)

joshcollinsworth.com

21–30 of 213 posts

Re: Introducing Svelte, and Comparing Svelte with React and Vue (2021)

#21
Just published an app on both app stores using Svelte and Ionic. Svelte was a pleasure to use - everything seems like just enough of what you need, without adding any additional mental overhead or complexity.

I'm really looking forward to the stable release of SvelteKit to use as the backend for my next project.

Re: Introducing Svelte, and Comparing Svelte with React and Vue (2021)

#22
Personally to me the best framework is no framework at all. Instead I use libraries of code and Web Components. The libraries are either my own or some existing ones. Overall writing web front end this way for me is the most natural way.

In my personal experience I spend less time creating the web front ends this way comparatively to when using "frameworks". No "compiling" is needed either, other then optional minimization.

Re: Introducing Svelte, and Comparing Svelte with React and Vue (2021)

#23
post #15
post #8

Earlier quoted context omitted.

Out of curiosity, what do you find clunky about Vue's variables vs Svelte? I've been working exclusively with Vue for the last... 6 years. Since the launch of v2. So my mind is already conditioned ;-)

You don’t need to write .value’s everywhere, that’s about all. And Vue is a lot more convenient in other ways.

Do you mean .value when writing a component that's some sort of form field? How do you refer to that value in Svelte components?

edit: oh nvm, we haven't upgraded our codebase to Vue 3 yet, there are a lot more ".value"'s if you click through to the Vue 3 examples in the original post.

Re: Introducing Svelte, and Comparing Svelte with React and Vue (2021)

#24
Have done a couple of projects with sveltekit, including a redesign of my personal website and an internal tool for myself and colleagues for quality of life.

I liked working with it, but I regret not waiting for 1.0 to really dive in. The breaking changes are getting annoying, with the most annoying being recently with changes to its routing. It seems like every time I make a small change and go to rebuild my sites, I'm dealing with a new headache.

Don't get me wrong, the changes are probably warranted to avoid Angular-style major version catastrophes, but for me, the draw to svelte is its ease of use. If I can't go a day without having to go digging for a fix to a breaking change, it's really not that easy to use. I'm mostly a hobbyist dev and don't have the time to keep up with it.

Also, the new folder-based routing is clunky as hell. I'll probably spend some time learning Next.js for future projects. Its ecosystem most likely trumps the syntactic supremacy of svelte currently. That said, I don't doubt svelte will introduce something that reels me back in again in the future.

Re: Introducing Svelte, and Comparing Svelte with React and Vue (2021)

#25
post #20

One (sort of accidental I assume) selling point of Svelte that wasn't mentioned here is that the stack trace is legible. Working with this framework I found that it was very easy for me to trace back to where the change that caused the error happened. You don't get this in most frameworks, which hide everything under layers of event handlers, schedulers and whatnot.

This should really be an explicit goal of a frontend framework and a pain point I have encountered often in React and Angular. How are you supposed to debug stuff if the stack trace isn't even legible?

Re: Introducing Svelte, and Comparing Svelte with React and Vue (2021)

#26
post #23
post #15

Earlier quoted context omitted.

You don’t need to write .value’s everywhere, that’s about all. And Vue is a lot more convenient in other ways.

Do you mean .value when writing a component that's some sort of form field? How do you refer to that value in Svelte components? edit: oh nvm, we haven't upgraded our codebase to Vue 3 yet, there are a lot more ".value"'s if you click through to the Vue 3 examples in the original post.

Vue has `refs`, which are reactive proxy objects that are used for tracking things like re-rendering.

Since vue does not hide the fact that something is a ref, you need to call `myRef.value` to get to the underlying value of `const myRef = ref(10)`.

In a new and currently experimental syntax, you can use `const myRef = $ref(10)`, at which point you can just use `myRef` directly. This will then be converted by the Vue SFC compiler.

Another option is to use a reactive object as the state: `const state = reactive({ myVal: 10 })`, at which point you can just use `state.myVal`.

Re: Introducing Svelte, and Comparing Svelte with React and Vue (2021)

#28
post #23
post #15

Earlier quoted context omitted.

You don’t need to write .value’s everywhere, that’s about all. And Vue is a lot more convenient in other ways.

Do you mean .value when writing a component that's some sort of form field? How do you refer to that value in Svelte components? edit: oh nvm, we haven't upgraded our codebase to Vue 3 yet, there are a lot more ".value"'s if you click through to the Vue 3 examples in the original post.

In vue 2, objects are made reactive with getters/setters, so changing a field on an object can be tracked. That still exists in vue 3, but a separate api was needed for primitives like numbers or strings, without a parent object that they'be set to. Vue3's solution is to wrap it in a wrapper object called a ref, and to read it's value you have to use .value. It's a pretty simple concept.

In svelte, top level variables are automatically reactive.

Re: Introducing Svelte, and Comparing Svelte with React and Vue (2021)

#29
post #7

I'd really like to hear more from Svelte devs about what non-happy paths look like. I specialise in React.js and there are any number of escape hatches to make sure you can get something working just the way you want. What I fear about Svelte is getting to 95% complete and finding the one obscure thing a stakeholder will not budge on is not possible.

Svelte is much closer to regular JavaScript. There really isn't anything you can't do with svelte that you cannot do with vanilla JavaScript. Everything is JavaScript in the end, but react forces you to go through their framework and that's why you need escape hatches. You just don't need that with svelte at all. It's wild when you get that part of it. The reactive part of svelte is just adding stuff during the compile process that at runtime does the DOM manipulation, rather than figuring that entire sequence out in runtime.

Re: Introducing Svelte, and Comparing Svelte with React and Vue (2021)

#30
post #11

I work with React (Next.js) on my main project and while I don't appreciate some things generally I haven't had any issues and Next.js in particular has been great. I also find JSX stellar. I used Vue from 0.12 until around ~2.5, I really liked it at the beginning (coming from a jQuery only world) but I was forced into learning React for React Native and then I kind of standardized on it for a while and Vue fell off.…

I like NextJS too, except for the API part. The DX is so poor compared to e.g. fastify.

Want to only allow a specific http method for this route? Have fun adding boilerplate.

Want to throw a specific http error like 403? Have fun writing this by hand.

It also lacks schema validation (I’d love to see ajv here) and openapi gen. You have to write everything. by. yourself.

Post reply on HN