4 ms·

You totally can, but for my money that's kinda not great. Because HTML isn't your "templating language", PHP et al are, and you aren't templating around the DOM

You totally can, but for my money that's kinda not great. Because HTML isn't your "templating language", PHP et al are, and you aren't templating around the DOM with typed objects, you're templating around text with all the pitfalls that entails. Object structures save time, reduce errors, and give you more to-the-programmer natural tools for composition and reuse (just call a function that returns a JSX object! give it typed parameters! declare victory and go have beers!). I wouldn't go back to doing text manipulation to generate HTML, because I value not having to make sure I've escaped all my quotes.

bdcravens 3y ago
PHP, ColdFusion, etc allows you to intermix HTML and variables without doing the type of escaping you're describing. For instance, CFML: <ul> <cfoutput query="people"> <li>#firstName# #lastName# </cfouput> </ul> You can also write classes that return data and custom tags that return rendered html. <cf_PeopleList queryObject="#people#"> I'm not saying we need to go back to those languages necessarily, but I think there's a ton of misconception about how those languages can be used, and quite a bit of reinventing the wheel in the Javascript world.
- eropple 3y ago
  Sure, of course you can in some contexts and with many asterisks (though in PHP it is literally text munging and that's what you get). But even, granting your correction: in the CF example you're writing representation and logic in two separate contexts. JSX does not do that. JSX is JavaScript and the constructs that JavaScript provides work without fail with the constructed trees (which need not be DOM trees, e.g. react-three-fiber) you're generating. It puts a lot of strain on the assertion that you must-repeat-must separate these concerns, which hasn't been materially true really at any point in my career all the way back to JSP or Velocity templates where (much like ColdFusion) you had worse tools for one context than you got for free with the other. While JSX and something like CFML (or hell, Angular) look similar when you squint, this is a different thing. The closest equivalent is something like Scala or Visual Basic XML literals, which never took off; JSX is no-bullshit a step change in consistency and productivity and it's awesome.

bdcravens 3y ago

PHP, ColdFusion, etc allows you to intermix HTML and variables without doing the type of escaping you're describing. For instance, CFML: <ul> <cfoutput query="people"> <li>#firstName# #lastName# </cfouput> </ul> You can also write classes that return data and custom tags that return rendered html. <cf_PeopleList queryObject="#people#"> I'm not saying we need to go back to those languages necessarily, but I think there's a ton of misconception about how those languages can be used, and quite a bit of reinventing the wheel in the Javascript world.

eropple 3y ago
Sure, of course you can in some contexts and with many asterisks (though in PHP it is literally text munging and that's what you get). But even, granting your correction: in the CF example you're writing representation and logic in two separate contexts. JSX does not do that. JSX is JavaScript and the constructs that JavaScript provides work without fail with the constructed trees (which need not be DOM trees, e.g. react-three-fiber) you're generating. It puts a lot of strain on the assertion that you must-repeat-must separate these concerns, which hasn't been materially true really at any point in my career all the way back to JSP or Velocity templates where (much like ColdFusion) you had worse tools for one context than you got for free with the other. While JSX and something like CFML (or hell, Angular) look similar when you squint, this is a different thing. The closest equivalent is something like Scala or Visual Basic XML literals, which never took off; JSX is no-bullshit a step change in consistency and productivity and it's awesome.