3 ms·

How is that different from adding yet another JSX tag which leads to another JSX tag which leads to even worse "I don't like reading this code."? I admit that

How is that different from adding yet another JSX tag which leads to another JSX tag which leads to even worse "I don't like reading this code."? I admit that the parens and braces mess causes significant readability issues (though less than the tag soup). E.g. coffeescript gets rid of this problem very elegantly. But, when coffeescript is discussed, it's "syntax doesn't matter, just use ES6" but when it's JSX, syntax is crucial. It's sunken cost fallacy, Stockholm syndrome and FUD.

boredtofears 2y ago
Personally I think "tag soup" (or, what I'd call a well structured XML document) is much easier to read than a deeply nested or scattered set of function calls.
- jampekka 2y ago
  Or you're just used to it. We get quickly used to e.g. our own body odor or halitosis so well that we can't smell it at all.
  - boredtofears 2y ago
    Of course. Isn’t that the case with any code?
    - jampekka 2y ago
      Of course. But I sometimes try to smell some fresh air to check what I've gotten used to.
rvense 2y ago
My time is currently divided between an Angular project and a "no framework" project, so it's been some time since I touched JSX but we are talking about the difference between: <MyThing><div class="thing--contents">"Hello"</div></MyThing> versus const div = document.createElement("div"); div.innerText = "Hello"; div.classList.add("thing-contents"); const wrapper = thingFactory(div); Aren't we? It just adds up very quickly is what I'm saying.
- meiraleal 2y ago
  err... no? Example using Lit and Template Literals: html`<div class="thing-contents">Hello</div>`; Example using only web components: shadow.innerHTML = `<div class="thing-contents">Hello</div>`;
  - rvense 2y ago
    Right, JSX is not the only way of accomplishing a better syntax for dynamic HTML. I was just saying that I do occasionally do things entirely by hand in Javascript with createElement, and it works for a quick thing but it is actually definitely a thing that warrents bringing in some alternative.
- jampekka 2y ago
  I was referring to React's createElement-function (and assigning it to const e for ergonomics). const div = e("div", {className: "thing-contents"}, "Hello") Or with coffeescript div = e "div", className: "thing-contents", "Hello" Or with coffeescript and simple Proxy wrapper: div = @div class: "thing-contents", "Hello"

boredtofears 2y ago

Personally I think "tag soup" (or, what I'd call a well structured XML document) is much easier to read than a deeply nested or scattered set of function calls.

jampekka 2y ago
Or you're just used to it. We get quickly used to e.g. our own body odor or halitosis so well that we can't smell it at all.
- boredtofears 2y ago
  Of course. Isn’t that the case with any code?
  - jampekka 2y ago
    Of course. But I sometimes try to smell some fresh air to check what I've gotten used to.

rvense 2y ago

My time is currently divided between an Angular project and a "no framework" project, so it's been some time since I touched JSX but we are talking about the difference between: <MyThing><div class="thing--contents">"Hello"</div></MyThing> versus const div = document.createElement("div"); div.innerText = "Hello"; div.classList.add("thing-contents"); const wrapper = thingFactory(div); Aren't we? It just adds up very quickly is what I'm saying.

meiraleal 2y ago
err... no? Example using Lit and Template Literals: html`<div class="thing-contents">Hello</div>`; Example using only web components: shadow.innerHTML = `<div class="thing-contents">Hello</div>`;
- rvense 2y ago
  Right, JSX is not the only way of accomplishing a better syntax for dynamic HTML. I was just saying that I do occasionally do things entirely by hand in Javascript with createElement, and it works for a quick thing but it is actually definitely a thing that warrents bringing in some alternative.
jampekka 2y ago
I was referring to React's createElement-function (and assigning it to const e for ergonomics). const div = e("div", {className: "thing-contents"}, "Hello") Or with coffeescript div = e "div", className: "thing-contents", "Hello" Or with coffeescript and simple Proxy wrapper: div = @div class: "thing-contents", "Hello"