5 ms·

IME "I'll just use createElement" leads to "Oh dear, I have to add another createElement" which leads to "I really don't like reading this code". But of course

by rvense 2y ago

IME "I'll just use createElement" leads to "Oh dear, I have to add another createElement" which leads to "I really don't like reading this code". But of course it's a trade off.

jampekka 2y ago
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"
lelanthran 2y ago
I'm doing a small project. I'm experimenting with a pure JS/HTML/CSS approach. 1. Doing "myElement.innerHTML = `...`" is sufficient for the low-hanging fruit that most jsx gets used for. 2. I also have a `Fluent()` function that returns an object with attrSet/attrRemove/classAdd/etc functions, which each also return the same object. It lets me do something like: var el = Fluent('div') .attrSet('disabled') .classAdd('waves btn btn-small') .idSet('MyNewElement') .push(Fluent('div') .attrSet('...')) .attachTo(document.querySelector('#SomeParent'); So far, I'm not liking the second one much, and the first one is really hard to compose, but they're both useful for when you don't want a build-step.
- jampekka 2y ago
  With coffeescript you can easily do with a dead-simple createElement wrapper something like: el = @div disabled: true, class: 'waves btn btn-small', id: 'MyNewElement', @div ...
  - boredtofears 2y ago
    How is that better than jsx?
    - jampekka 2y ago
      It doesn't need a new language and has a lot less noise. Loops and control structures work normally without extra syntax.
      - boredtofears 2y ago
        Coffeescript is a new language though?
  - lelanthran 2y ago
    I think coffeescript requires a build step. If I already had a build-step, then sure, I can throw a few things at the wall and see what sticks. For stuff that doesn't have a build-step, adding a build-step just to get an alternative to using the backticks seems like overkill.

by rvense 2y ago

IME "I'll just use createElement" leads to "Oh dear, I have to add another createElement" which leads to "I really don't like reading this code". But of course it's a trade off.

jampekka 2y ago

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"

lelanthran 2y ago

I'm doing a small project. I'm experimenting with a pure JS/HTML/CSS approach. 1. Doing "myElement.innerHTML = `...`" is sufficient for the low-hanging fruit that most jsx gets used for. 2. I also have a `Fluent()` function that returns an object with attrSet/attrRemove/classAdd/etc functions, which each also return the same object. It lets me do something like: var el = Fluent('div') .attrSet('disabled') .classAdd('waves btn btn-small') .idSet('MyNewElement') .push(Fluent('div') .attrSet('...')) .attachTo(document.querySelector('#SomeParent'); So far, I'm not liking the second one much, and the first one is really hard to compose, but they're both useful for when you don't want a build-step.

jampekka 2y ago
With coffeescript you can easily do with a dead-simple createElement wrapper something like: el = @div disabled: true, class: 'waves btn btn-small', id: 'MyNewElement', @div ...
- boredtofears 2y ago
  How is that better than jsx?
  - jampekka 2y ago
    It doesn't need a new language and has a lot less noise. Loops and control structures work normally without extra syntax.
    - boredtofears 2y ago
      Coffeescript is a new language though?
- lelanthran 2y ago
  I think coffeescript requires a build step. If I already had a build-step, then sure, I can throw a few things at the wall and see what sticks. For stuff that doesn't have a build-step, adding a build-step just to get an alternative to using the backticks seems like overkill.