DEV Community

Discussion on: Anyone else intolerant of html inside javascript? yes i mean React

Collapse
 
sgarciadev profile image
Sergei Garcia

Personal preference will always be a controversial topic, and you don't have any really strong, objective arguments for preferring HTML and JS in separate places.

For example, while I do think pug templates are clearer, I do not prefer them them over standard HTML for objective reasons that weight more than the "it's cleaner" argument:

  1. Maintenance costs. While you could argue pug is easier to type, you must keep in mind software maintenance is often exponentially more expensive (time consuming) than writing it. And pug introduces yet another layer of complexity with a transpiler.
  2. Pug increases the learning curve for the project, and adds more time to new team members ramp up.
  3. Pug's power as a templating language power becomes redundant once you add any front end library like React/Vue.

As for React, I do not like JSX, but not for the reasons everyone here thinks.

JSX in general sounds like a great idea on paper. If we're building web components, why keep the code separate when it's clearly strongly tied together? The separation of concerns argument quickly falls apart when you realize it comes with the detriment of making code harder to navigate and locate.

What I do NOT like about JSX is the fact it makes it extremely easy to build HTML-in-JS frankenstein monsters. It's a complete mindboggler to me how quickly people forget we HATED JSPs for this exact reason. And yet they give a free pass to React just because it's the cool new kid on the block. This doesn't mean you can't write clean code in JSX, it just means you require more discipline. Which of course means people will end up abusing it and writing messy code.

Vue and Angular had the right idea when instead of allowing users to write JS in HTML all willy-nilly they said no, and instead limited the power in templates to directives and custom html elements/attributes. Which makes for usually cleaner code.