The syntax to me is irrelevant. The important bit is to use as much JS and as little string/DSL template as possible.
Why? Because tooling. Anything that's in JavaScript can be linted with ESLint, can be typed with Flow or TypeScript, is subject to dead code elimination by my minifier, can be shared via ES6 Modules/CommonJS wihin my project or NPM with no magic. All editors that understand JavaScript will give me all of their shinies (eg: tell me if I screwed up a conditional) without needing special framework specific support.
JSX itself used to cause these problems too (but createElement and the factories of old did not), but now that they're pervasive and that anything that supports ES6 supports JSX, I get all of these benefits for free.
The moment I hop into template/DSL land, I either hope there's a plugin with all the same benefits (often there is not), or I'm sad.
Note that people who use React + JSX and make stuff like "if" or "else" components fall into these problems too, so those have to be fully avoided.
Why? Because tooling. Anything that's in JavaScript can be linted with ESLint, can be typed with Flow or TypeScript, is subject to dead code elimination by my minifier, can be shared via ES6 Modules/CommonJS wihin my project or NPM with no magic. All editors that understand JavaScript will give me all of their shinies (eg: tell me if I screwed up a conditional) without needing special framework specific support.
JSX itself used to cause these problems too (but createElement and the factories of old did not), but now that they're pervasive and that anything that supports ES6 supports JSX, I get all of these benefits for free.
The moment I hop into template/DSL land, I either hope there's a plugin with all the same benefits (often there is not), or I'm sad.
Note that people who use React + JSX and make stuff like "if" or "else" components fall into these problems too, so those have to be fully avoided.