Comment by JimDabell
6 months ago
JSX is as much a new language as Vue’s templating. JSX extends JavaScript syntax; Vue extends HTML syntax.
If you’re working on generating markup, it makes more sense to do that at the markup level than constantly switch between markup and imperative JavaScript.
It might use JavaScript for control flow, but does it really count when it uses it in a way that is not idiomatic at all? It’s not idiomatic JavaScript to use map instead of for everywhere, and it’s not idiomatic JavaScript to use ternaries instead of if everywhere. Writing JSX looks very different to writing normal JavaScript.
The difference is that JSX is using control flow from an actual programming language, whereas Vue is shoehorning control flow into declarative markup. This is the single reason React won the frontend framework market: they got the templating right.
PS: in modern JavaScript, using map rather than for loops is more idiomatic!
> This is the single reason React won the frontend framework market
Don’t be silly, the front-end landscape is a lot richer than you make it out to be. React hasn’t “won”, the last time there was a clear winner in front-end, it was jQuery.
> PS: in modern JavaScript, using map rather than for loops is more idiomatic!
No, it’s not, and this is exactly what I was talking about. for loops and map() serve distinct purposes.
for iterates through a series of elements.
map() transforms a series of elements.
It’s possible to use them both for the same things, but there is a very clear semantic difference between them. One doesn’t replace the other, they mean different things.
In the context of “I have a bunch of elements I want to iterate over and output”, what you want is a for loop. The reason why React devs have been convinced map() replaces for loops is that React has to force you into making everything an expression, so instead of writing for when it’s appropriate and map() when it’s appropriate, they have to write map() everywhere.
It’s good you ended on the one thing JSX got right: everything is an expression. It’s that simple. There’s nothing imperative about evaluating a template, it’s entirely covered by functional programming techniques. You’re just producing a value.
And yes, modern JavaScript uses tons of concept from functional programming, where it is understood that mutating values and triggering side effects should be a last resort. This is why a good js programmer uses ten times more maps then he uses for loops.
Maybe you don’t know how dominant React is today? Two third of JavaScript developers use React at work (https://2024.stateofjs.com/en-US/libraries/front-end-framewo...).
It feels like you’re out of touch, have you used JavaScript lately?
5 replies →