DEV Community

Cover image for Anyone else intolerant of html inside javascript? yes i mean React
Ceyhun Kerti
Ceyhun Kerti

Posted on

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

A lot of people use react for web development and mobile. It is a really cool framework.
I don't want to be the one, but i can't stand writing or seeing html inside js. Even further that i don't like html, xml, or any *ml with opening and closing tags.

That's why my preference is;
Vue with pug template language.

In Vue you can separate html, js and css clearly.

I haven't write anything large scale in react, but as far as i know,
you can separate template and js to some level but at the end there is always a mix of js and html somewhere in the same block, which makes me uncomfortable :)

How do you get used that?, or is it only my obsession :)

Top comments (57)

Collapse
 
drmandible profile image
DrMandible

There is no separation in react. Non html infused js would be considered vanilla js or vanilla html that works with the react bits. But that's all intentionally part of the "declarative" style that fb wanted for react.

I'm curious why it bothers you. Is it the MVC violation? Or something else?

Collapse
 
ceyhunkerti profile image
Ceyhun Kerti

no not technically, it just feels weird visually.

Collapse
 
dorshinar profile image
Dor Shinar

"feels weird" doesn't sound like a solid argument to me. I really like react so I'm a little biased here.

The separation in react is simply different - you don't separate logic and structure by using different languages, but by using different components.

Thread Thread
 
ceyhunkerti profile image
Ceyhun Kerti

Don't get me wrong, there is nothing against react here. It's perfect. But combining html and js in the same code is visually not attractive for me.

I'd like the code to be clear visually and when using/reading react i feel like;

Ok, here is my speech, some words in Spanish and some in French but overall meaning is so deep and touchy :)

As i said it's very personal, the framework itself is very powerful.

Thread Thread
 
dorshinar profile image
Dor Shinar

It takes time to get used to. I've never tried Vue (although I definitely should, with all the hype), but honestly it makes the DOM so much more powerful (that's what I feel anyway) and easy to work with.

Thread Thread
 
marcellothearcane profile image
marcellothearcane

'Feels weird' is a valid excuse if you're going to work on a large code base that isn't all your code. The cognitive load will cause frustration that gets in the way of working.

I suppose that's why there are so many different frameworks - everyone has a different concept of what is most natural to them.

Thread Thread
 
ciel profile image
Ciel • Edited

"Feels weird" is how an inexperienced developer describes coming across code smells that they're beginning to become skilled enough to identify but can't fully explain.

I think it's an extremely valid argument and I encourage you to explore that feeling thoroughly.

You may discover that you're wrong but you'll come out a better developer than one who just accepts what they are told. A big difference in a good developer and an "ok" one is knowing when to ignore the "rules" and really look at something objectively.

Thread Thread
 
dorshinar profile image
Dor Shinar • Edited

To me, "feels weird" in this context is more related to someone not being familiar with the tools than anything else. For someone new to Python, "ask for forgiveness not permission" might "feel weird".

Unless you can better express what you mean, "feels weird" is void.

Thread Thread
 
wilomgfx profile image
William Cantin • Edited

Not sure how clearer JSX can be?

It's declarative and in your face. You understand how it will render by just looking at what JSX is returned.

Sure it looked weird at first, but once you work with it a bit you understand it's power and why JSX is JSX

Collapse
 
silentsudo profile image
Ashish Agre

I also feel weird this blend, hence never tried react at first place angular and vue js seems to be doing good for me.

Collapse
 
jperals profile image
Joan Perals • Edited

Me too. I have used a bunch of template-based tools (AngularJS, Angular, Polymer, Vue) and then React for a while and, while I am getting kind of used to the latter, I am still struggling to understand why it is so popular. I find the template-based approach preferable because it:

  • Lets you write code that is near-identical to the end result (more straightforward, less cognitive load)

  • Similarly, lets you more easily make use of the browser inspector

  • Helps you very quickly grasp what the component will look like, when reading it

  • Should be familiar to anyone who has done any kind of frontend programming before

  • Reduces JS boilerplate

  • Naturally separates view from logic

Is there something I'm missing?

Collapse
 
seanmclem profile image
Seanmclem • Edited

I'm intolerant of html outside of JS 馃槈

Jokes aside this is the way I like to write html. If you look into new native web components - usually the html is inside the js as a string or through jsx. So this style isn't going anywhere.

When you write js you'll often end up interacting with the Dom often enough to have it make sense to so tightly couple them.

Realistically, I'm not sure why we even have html files anymore. Or an html based Dom for that matter. When your js can hold an entire Dom tree - why not just have a browser render that directly?

Collapse
 
ceyhunkerti profile image
Ceyhun Kerti • Edited

why we even have html files anymore
I was thinking that a couple of years ago and mithril was the closest thing to that, i had found. Never used it though.

Collapse
 
vonheikemen profile image
Heiker

You are not alone on this. I personally don't mind when JSX is use to describe a piece of the UI, basically when is just HTML but with custom tags. The thing is that the amount of crazy things you can do with it has no limits.

Collapse
 
seanmclem profile image
Seanmclem

It's great having choices and being able to write code however you want.

Collapse
 
vonheikemen profile image
Heiker

Are we talking about programming languages? Sure, freedom is great.

Are we talking about a DSL like HTML? I would prefer a small set of rules that let me be explicit about my intention.

Collapse
 
ryansmith profile image
Ryan Smith • Edited

I prefer using templates as well. I like to treat views/templates as a more basic entity where you need an occasional if-statement or loop to output data. Any more complex logic has its own dedicated place. Having the power of JavaScript inside the HTML template sounds beneficial but I could see the code becoming hard to manage if there is a mess of JS, CSS, and HTML in the JSX. An example is this component from the React documentation: github.com/reactjs/reactjs.org/blo... I think that file would be so much easier to read through and work in if it was separated into <style>, <script>, and <template>. I'm not a Vue or Svelte user, but that style of writing components looks more appealing to me.

Looking at some React code reminds me of my experience with legacy PHP and ColdFusion scripts that were mixed with HTML, CSS, and JS. Those old legacy applications were very difficult to update because everything was intertwined and tightly coupled. You couldn't easily refactor, restructure the page, or re-style it because everything was scattered throughout the file.

Collapse
 
dinsmoredesign profile image
Derek D

Ugh. That looks like a nightmare. Where is this in the docs?

Collapse
 
lbeul profile image
Louis

To me personally, it feels way more comfortable than those old-school DOM accessing techniques in vanillaJS or jQuery

Collapse
 
ceyhunkerti profile image
Ceyhun Kerti

How about Vue ?

Collapse
 
lbeul profile image
Louis

I never tried Vue to be honest. The problem's that I'm relatively new to WebDev and I don't want to jump from framework to framework before getting at least somewhat proficient in one of them. And React felt super easy to pick up from the first try, so I decided to go for that one :)

Thread Thread
 
joluga profile image
joluga

You can use jsx inside VUE.
vuejs.org/v2/guide/render-function...

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.

Collapse
 
vallerydelexy profile image
vallerydelexy

well, me too
but what can i do, its The React
besides, vue currently doesnt have static site generator like gatsby

since most of my project are static site
i help micro-startup bussines in my town to build website for cheap. thats why most of my project are static.
they are fast, cheap, flexible. and i should add, not hackable

Collapse
 
iurquiza profile image
iurquiza

Checkout gridsome.org/

Collapse
 
vallerydelexy profile image
vallerydelexy • Edited

woah, i never heard about this one.
thank you. ill take it for a ride

Collapse
 
ceyhunkerti profile image
Ceyhun Kerti

learned

Collapse
 
arandilopez profile image
Arandi L贸pez

Here 馃檵馃徎鈥嶁檪锔. I don't like jsx neither react

Collapse
 
jeffhykin profile image
Jeff Hykin • Edited

I didn't like it at first; it wasn't clear to me where it was-and-wasn't allowed and what was-and-wasn't allowed inside it.

Once I learned how the parser detects JSX, and learned exactly what it compiles to, then it felt perfectly natural and has been amazing.

As a side note, I hate React (I've used it for years). I disagree with the downwards stateful flow and the context API/Redux. JSX in my opinion is at its best outside of React.

Collapse
 
pdamra profile image
Philip Damra

Why would you not use a tool that makes your job easier? JSX is not HTML, it is just a different syntax for working with JavaScript that is contextually more similar to a markup language. You can write react components using standard syntax, but why would you want to?

Collapse
 
mindplay profile image
Rasmus Schultz

This: JSX isn't HTML, it's just syntactic sugar for a tree structure of JS values. (Take one look at the compiled output in Babel's REPL - you'll likely get over the initial "HTML phobia" as soon as you understand why JSX is just JavaScript and not HTML at all.)

If you want more separation, use functional components and put them in separate files - there's almost no ceremony around the JSX elements, just an export statement and some braces. (I don't mind mixing, but the degree of separation is entirely your choice.)

Collapse
 
molemann85 profile image
moleCuleFFF

Vue + Typescript is just better imho. Too much js in the HTML makes it really hard if you need to hand the project to a digital designer to do the CSS. Separation of concerns lowers the entry level to the project, and therefor is a good thing.

Collapse
 
afcjunior profile image
Adalberto Camacho Jr.

Nothing's stopping you from writing react components using React.createElement everywhere. Everything will work the same. You won't have "HTML in your JS", so you'll be happy.

Your only trade-offs would be a less maintainable codebase and longer developing time.

I really don't understand the argument against using JSX...

Collapse
 
vonheikemen profile image
Heiker

Assigning React.createElement to a variable with a short name is also a valid approach:

const h = React.createElement;
Collapse
 
danjfletcher profile image
Dan Fletcher

Vue is just JS inside HTML though. I happen to prefer Vue but only out of familiarity bias. It's all just a matter of preference IMO. I can't see a strong argument supporting one being technically superior

Collapse
 
babadee08 profile image
'Damilare Durojaye

My point exactly, I had the same reservation when I first heard about react from the first version. I was surprised when it eventually took the world by storm. I preferred vue by far. But I'm beginning to warm up to react but I still hate the mixing of HTML tags in js.