Comment by snemvalts
16 days 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.
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
for conditional rendering, or
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.
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.
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.
Sorry but JS is, and always has been, a crap language many are trying to escape. So saying react has the full power of JavaScript is an antipatten as far as I am concerned. Vue is better designed.