4 ms·

It does, if you care about ergonomics. The reactivity model is simpler and arguably less error prone. It does have its own templating syntax, which is trivial

It does, if you care about ergonomics. The reactivity model is simpler and arguably less error prone. It does have its own templating syntax, which is trivial to learn. No more cumbersome to learn than JSX, which is a templating language designed by the React team. Not sure why you chose to make the distinction between JSX and Vue’s DSL as if JSX wasn’t developed for the sole purpose of facilitating React’s virtual DOM.

hajile 5mo ago
JSX is <div>abc</div> turns into createElement('div', null, 'abc') and you can use that instead of JSX if you like or you can use something like hyperscript. Everything else like mapping or if statements is pure JS and works just like JS anywhere else in your app. Vue templates mean learning Vue's custom syntax for if statements, loops, dynamic attribute syntax (with its own gotcha), binding dot modifiers, data binding, and whatever else. It requires learning its entire custom directive system. It uses custom syntax for stuff like events too. I don't see this as remotely comparable with Vue being much closer to something like my time working with Angular 1 (a time I'd rather not repeat).
- Semaphor 5mo ago
  Vue supports JSX, though to be fair, it’s not idiomatic and hence never shows up in any docs.
  - cyanydeez 5mo ago
    thankfull. i find reading JSX A visible eyesore, like an LLM reached its comtext length and just snorted blood and bile out its nose
    - Semaphor 5mo ago
      I don't like it either, though I have less of a visceral reaction ;)
- lwansbrough 5mo ago
  It’s a distinction without a difference. Both need to be transpiled, what happens under the hood is of little concern to anyone. Please explain React’s reactive data binding since it’s apparently much simpler than v-model= ;)
  - incrudible 5mo ago
    It is a massive difference. I do not like magic compilers. The JSX transform is trivial and not even necessary, just create a factory function and React.createElement becomes arguably more readable, just not HTML like.
    - lwansbrough 5mo ago
      Is it a massive difference, or is it a small difference? At the end of the day 99% of React projects have a transpilation step and utilize some form of “magic compiler” somewhere along the line. The simplicity of JSX is overvalued. It just means more code, and typically uglier code, to achieve the same behaviour as Vue. Which is basically the theme of React when you compare the two libraries.
      - satvikpendem 5mo ago
        It is more explicit code. Something only changes when I tell it to rather than being magical like in Vue, not to again mention its proprietary DSL and API.
  - satvikpendem 5mo ago
    It was explained here: https://news.ycombinator.com/item?id=48274077#48275389 https://news.ycombinator.com/item?id=48274077#48275389
snemvalts 5mo ago
JSX is a very thin layer of templating logic inside JS. Meaning you have all the language features available while templating. Some arbitrary JS can result in templating. Vue's DSL is whatever language the developer implemented. Which is probably not enough, depends how much effort they put into it and how good they are in language design. Given that they cargo cult HTML tags to organize components in a pseudo-familiar but not-valid-HTML way, I don't have much confidence in their language design skills. I'd take the former any day.
- Lukas_Skywalker 5mo ago
  While I understand the advantage of using the built-in language features (and I know why it is required to be done that way), I still think using {enable && <Form />} for conditional rendering, or {collection.map(x => <Item x={x} /> } for looping are not the most obvious choices. If you ask people how conditionals and loops are written in JS, you will get 'if' and 'for' or variants of 'while'. So I get where the v-if and v-for are coming from.
  - MarsIronPI 5mo ago
    Me personally, I prefer these more functional (and more succinct) expressions. For loops are overly verbose, and not as composable. But then again, I'm a Lisp programmer.
  - snemvalts 4mo ago
    Let's say you to render conditionally when `x` is present. You do `v-if="x"`. Now you want to refer to `x.y.z` in the body, while `y` is optional. Can you be sure that the value is present? How do you check for it? What does Vue need to do to enable this functionality with static type checking with TypeScript? With `{x && <>{x.y.z}</>}`, it's almost vanilla TS, it's the same as `x && x.y.z` in normal TS. Type narrowings that work in TS are guaranteed to work in React, without the framework having to do anything. Less framework/library code required to make the same thing work. To me, that's the sign of a better abstraction and implementation.
- digitaltrees 4mo ago

hajile 5mo ago

JSX is <div>abc</div> turns into createElement('div', null, 'abc') and you can use that instead of JSX if you like or you can use something like hyperscript. Everything else like mapping or if statements is pure JS and works just like JS anywhere else in your app. Vue templates mean learning Vue's custom syntax for if statements, loops, dynamic attribute syntax (with its own gotcha), binding dot modifiers, data binding, and whatever else. It requires learning its entire custom directive system. It uses custom syntax for stuff like events too. I don't see this as remotely comparable with Vue being much closer to something like my time working with Angular 1 (a time I'd rather not repeat).

Semaphor 5mo ago
Vue supports JSX, though to be fair, it’s not idiomatic and hence never shows up in any docs.
- cyanydeez 5mo ago
  thankfull. i find reading JSX A visible eyesore, like an LLM reached its comtext length and just snorted blood and bile out its nose
  - Semaphor 5mo ago
    I don't like it either, though I have less of a visceral reaction ;)
lwansbrough 5mo ago
It’s a distinction without a difference. Both need to be transpiled, what happens under the hood is of little concern to anyone. Please explain React’s reactive data binding since it’s apparently much simpler than v-model= ;)
- incrudible 5mo ago
  It is a massive difference. I do not like magic compilers. The JSX transform is trivial and not even necessary, just create a factory function and React.createElement becomes arguably more readable, just not HTML like.
  - lwansbrough 5mo ago
    Is it a massive difference, or is it a small difference? At the end of the day 99% of React projects have a transpilation step and utilize some form of “magic compiler” somewhere along the line. The simplicity of JSX is overvalued. It just means more code, and typically uglier code, to achieve the same behaviour as Vue. Which is basically the theme of React when you compare the two libraries.
    - satvikpendem 5mo ago
      It is more explicit code. Something only changes when I tell it to rather than being magical like in Vue, not to again mention its proprietary DSL and API.
- satvikpendem 5mo ago
  It was explained here: https://news.ycombinator.com/item?id=48274077#48275389 https://news.ycombinator.com/item?id=48274077#48275389

snemvalts 5mo ago

JSX is a very thin layer of templating logic inside JS. Meaning you have all the language features available while templating. Some arbitrary JS can result in templating. Vue's DSL is whatever language the developer implemented. Which is probably not enough, depends how much effort they put into it and how good they are in language design. Given that they cargo cult HTML tags to organize components in a pseudo-familiar but not-valid-HTML way, I don't have much confidence in their language design skills. I'd take the former any day.

Lukas_Skywalker 5mo ago
While I understand the advantage of using the built-in language features (and I know why it is required to be done that way), I still think using {enable && <Form />} for conditional rendering, or {collection.map(x => <Item x={x} /> } for looping are not the most obvious choices. If you ask people how conditionals and loops are written in JS, you will get 'if' and 'for' or variants of 'while'. So I get where the v-if and v-for are coming from.
- MarsIronPI 5mo ago
  Me personally, I prefer these more functional (and more succinct) expressions. For loops are overly verbose, and not as composable. But then again, I'm a Lisp programmer.
- snemvalts 4mo ago
  Let's say you to render conditionally when `x` is present. You do `v-if="x"`. Now you want to refer to `x.y.z` in the body, while `y` is optional. Can you be sure that the value is present? How do you check for it? What does Vue need to do to enable this functionality with static type checking with TypeScript? With `{x && <>{x.y.z}</>}`, it's almost vanilla TS, it's the same as `x && x.y.z` in normal TS. Type narrowings that work in TS are guaranteed to work in React, without the framework having to do anything. Less framework/library code required to make the same thing work. To me, that's the sign of a better abstraction and implementation.
digitaltrees 4mo ago