4 ms·

This is a great articulation of what I was thinking when reading him talk about Angular's templating language. JSX feels "honest" - like an authentic extension

by dimmke 5y ago

This is a great articulation of what I was thinking when reading him talk about Angular's templating language. JSX feels "honest" - like an authentic extension of JavaScript. Yes there are a few quirky rules but I hated the custom angular attributes etc... I've only had to do a little Angular development in my life but something I remember was how hard it was to get answers on basic stuff. Like I would have a problem that I'm sure was trivial and people run into all the time and I couldn't Google and get a result that wasn't full of really dense Angular concepts and keywords. It's a hard framework to just kind of nose your way into if you need to update something. It's like it wants you to read all the documentation and learn all the fancy words it has for stuff.

toastercat 5y ago
Even better than JSX is straight up hyperscript or something like @hyperapp/html[1]. JSX feels like a cumbersome attachment in comparison. [1] https://github.com/jorgebucaran/hyperapp/tree/main/packages/html https://github.com/jorgebucaran/hyperapp/tree/main/packages/...
- thatswrong0 5y ago
  That's an interesting opinion. JSX feels far more natural to me.
  - toastercat 5y ago
    JSX also initially felt more natural to me aesthetically since it looks like HTML. But that's where those feelings end; JSX is not valid JavaScript, it doesn't extend the language in any meaningful way, it superficially resembles HTML which we all were already familiar with. Hyperscript or HTML helper functions are not only less typing, but indent more naturally and can live in regular .js files without need for transpilation or IDE plugins.
    - bern4444 5y ago
      JSX allows for dynamically generating HTML elements that have access to values from JS without any work in binding the two together. That's pretty convenient. JSX is valid JS. It is converted down to the same thing as what you describe, function calls to React.createElement(). Which can also be used instead and aliased to a function if you prefer. Using "HTML" like syntax in JSX then let's React not have to invent it's own base components and let's you think about the "HTML" as HMTL. You could even alias all the elements to function names const h1 = (...) => { React.createElement({...}) } and then call those functions like so h1(...) across your components instead of <h1> ... </h1>. const MyComponent = () => { return ( div( h1(...) h2(...) p(...) items.map(item => li(item)) ) ) } A "component" is just a JS Object that you can manipulate and pass through wherever you want like anything else.
      - toastercat 5y ago
        > JSX is valid JS. It is converted down to the same thing as what you describe, function calls to React.createElement(). This is disingenuous. Browsers do not understand JSX, nor do most JavaScript engines. TypeScript also gets transpiled to JavaScript -- it is not valid JavaScript in and of itself, you require a build step. We can argue semantics, but I think it's pretty clear what I meant. > You could even alias all the elements to function names You've just recreated what I mentioned two comments above in this same comments thread. :) See: https://github.com/jorgebucaran/hyperapp/tree/main/packages/html https://github.com/jorgebucaran/hyperapp/tree/main/packages/... This is what I'm arguing for over something like JSX.
        bern4444 5y ago
        I understand, and the browsers don't understand JSX is a fair point. I'm only illustrating that the difference between JSX and JS for React is about syntax and not the core distinction of why React feels easier to work with compared to angular/vue/svelte etc which all invent their own mini languages. JSX feels much more natural since it allows for the same JS everyone (hopefully) loves. Something like hyperapp/hyperscript can absolutely be used in place of JSX, but the HTML likeness that JSX enables feels more natural to me - and I think most - vs a bunch of h1(), h2() etc function calls. In the end, though, this is a trivial difference. A component expressed in JSX is really just a JS function call that ends up as a document.createElement() invocation.

by dimmke 5y ago

toastercat 5y ago

Even better than JSX is straight up hyperscript or something like @hyperapp/html[1]. JSX feels like a cumbersome attachment in comparison. [1] https://github.com/jorgebucaran/hyperapp/tree/main/packages/html https://github.com/jorgebucaran/hyperapp/tree/main/packages/...

thatswrong0 5y ago
That's an interesting opinion. JSX feels far more natural to me.
- toastercat 5y ago
  JSX also initially felt more natural to me aesthetically since it looks like HTML. But that's where those feelings end; JSX is not valid JavaScript, it doesn't extend the language in any meaningful way, it superficially resembles HTML which we all were already familiar with. Hyperscript or HTML helper functions are not only less typing, but indent more naturally and can live in regular .js files without need for transpilation or IDE plugins.
  - bern4444 5y ago
    JSX allows for dynamically generating HTML elements that have access to values from JS without any work in binding the two together. That's pretty convenient. JSX is valid JS. It is converted down to the same thing as what you describe, function calls to React.createElement(). Which can also be used instead and aliased to a function if you prefer. Using "HTML" like syntax in JSX then let's React not have to invent it's own base components and let's you think about the "HTML" as HMTL. You could even alias all the elements to function names const h1 = (...) => { React.createElement({...}) } and then call those functions like so h1(...) across your components instead of <h1> ... </h1>. const MyComponent = () => { return ( div( h1(...) h2(...) p(...) items.map(item => li(item)) ) ) } A "component" is just a JS Object that you can manipulate and pass through wherever you want like anything else.
    - toastercat 5y ago
      > JSX is valid JS. It is converted down to the same thing as what you describe, function calls to React.createElement(). This is disingenuous. Browsers do not understand JSX, nor do most JavaScript engines. TypeScript also gets transpiled to JavaScript -- it is not valid JavaScript in and of itself, you require a build step. We can argue semantics, but I think it's pretty clear what I meant. > You could even alias all the elements to function names You've just recreated what I mentioned two comments above in this same comments thread. :) See: https://github.com/jorgebucaran/hyperapp/tree/main/packages/html https://github.com/jorgebucaran/hyperapp/tree/main/packages/... This is what I'm arguing for over something like JSX.
      - bern4444 5y ago
        I understand, and the browsers don't understand JSX is a fair point. I'm only illustrating that the difference between JSX and JS for React is about syntax and not the core distinction of why React feels easier to work with compared to angular/vue/svelte etc which all invent their own mini languages. JSX feels much more natural since it allows for the same JS everyone (hopefully) loves. Something like hyperapp/hyperscript can absolutely be used in place of JSX, but the HTML likeness that JSX enables feels more natural to me - and I think most - vs a bunch of h1(), h2() etc function calls. In the end, though, this is a trivial difference. A component expressed in JSX is really just a JS function call that ends up as a document.createElement() invocation.