DEV Community

loading...
Cover image for Anyone else intolerant of html inside javascript? yes i mean React

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

ceyhunkerti profile image Ceyhun Kerti ・1 min read

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 :)

Discussion (56)

pic
Editor guide
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 Author

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 Author

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
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 Author • 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
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
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 Author

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
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
arandilopez profile image
Arandi López

Here 🙋🏻‍♂️. I don't like jsx neither react

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
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
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
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
dinsmoredesign profile image
Derek D • Edited

As primarily a Vue developer, I don't mind JSX. I see the appeal and in advanced components would actually prefer to not have my template so separated from the logic. However, I really don't want to use JSX with Vue, even though it supports it, because Vue gives so much power to the template with built in directives, I feel like JSX with it would be a step back in many cases.

However, what really turns me off about React is styling. React itself supports global styling and CSS Modules. Neither are anywhere close to as nice as just throwing "scoped" on your style tag in Vue and never worrying again about styling clashes. The problem is made even more evident with the multitude of styling solutions in 3rd party libraries. Vue solved this problem from day 1, why the React community is so fragmented in how to style their apps, I'm not sure. There's even a suggestion from @dan_abramov that's been sitting around for a year in the React GitHub issues to address this and after ~50 comments of people suggesting every CSS-in-JS solution under the sun, there's still no easy solution that just works like you'd expect CSS to.

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
sanidz profile image
sanidz

you don't.
If it bugs you that much avoid react in the first place.

Collapse
ceyhunkerti profile image
Ceyhun Kerti Author • Edited

I'd want to love it, cause people are creating great stuff and components with it. Things change, maybe in the future i can approach it again.

In fact, if it counts, i already use Docusaurus for internal doc.
of companies i consult.

Collapse
afcjunior profile image
Adalberto Camacho Jr.

Don't let the fear of change get in the way of your progress m8. Force yourself to spend a day or two with it - worst-case scenario, you'll be better informed when you argue against it.

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
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
noccy80 profile image
Christopher Vagnetoft

I would say the upside is you can return html primitives from functions to create snippet factories. I.e. a function can return an actual div or button or whatsit without building a DOM fragment or calling templating functions. IMO these methods are not mutually exclusive.

x.createMagicButton() is useful when you need a prefab button that you then build on.

y.getUserProfile() would be useful to build a complex presentation box or something by passing data through a template.

Think this has more to do with people getting a new hammer and making every problem a nail :) Realize it's potential and use it where it makes sense.

I'm no fan of Node, but Jsx is interesting :)

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.

Collapse
gallagermcbroom profile image
Gallager McBroom

I have tried about a half dozen ti.es or so to get into Rwact, just because of all the hype. Every single time I see jsx I quit. I dont know exactly why, but I cannot come to grips with inserting html directly into my js. It just, it's wrong. Vue ftw.

Collapse
adam_cyclones profile image
Adam Crockett • Edited

So I will repeat your point, you would rather markup with anything other than an XML derived language. Okay fair you would rather use another language which translates to html instead, by using pug in Vue, okay, let me offer another point of view, conceptually you dislike html but is is not 'real' html at all, under the hood it's a bunch of render functions, anything in JavaScript files is just JavaScript, and it's related to this: github.com/hyperhype/hyperscript/b... so both pug and "html" in js transform into that. Why don't you forego the overhead and just write that instead of compiling something that looks just like render functions?

Ultimately the web was born with html and it, just like CSS will always be compile targets because they are historically the base level of the web. And on the subject, name any other language other than html that if written incorrectly still parses, html is underrated.

The trouble is, the seperation of concerns opinion gets completely misunderstood, it doesn't say don't mix languages, it says don't mix responsibility, as Vue and react are for displaying html, html belongs here.

I must add that I am not arguing or ranting at all it's a valid opinion, but I wanted to give you some other perspectives.

Collapse
thechosenjuan profile image
Juan Flores

Technically is JSX, not React..

Collapse
sanidz profile image
sanidz

And you use jsx without react like never...

Collapse
thechosenjuan profile image
Juan Flores

I recommend you take a look at Stencil.js.

Cool stuff.

Here's a link: stenciljs.com/

Collapse
jhechtf profile image
Jim Burbridge • Edited

I am also not a fan of HTML in Javascript. For me it always seems to miss a piece of the component, which is why I enjoy things like vue or svelte for the all-in-one approach.

I also don't like pug

Collapse
ceyhunkerti profile image
Ceyhun Kerti Author • Edited

i like pug, in html i feel like half of the editor page is wasted and find myself trying to match tags sometimes(yes there are plugins, features etc. but...). in pug it's almost subliminal :)

maybe a bit off topic but i always admired the people who use lisp dialects without distraction and i can't even follow html easily :)

Collapse
jhechtf profile image
Jim Burbridge • Edited

My issue with pug is that I hate indent-based replacements for HTML, which Pug is big about. For my editor with HTML if I feel like I'm seeing too much on the screen I'll just fold down everything I'm not looking at.

Collapse
workingwebsites profile image
Lisa Armstrong

I'm not quite sold on HTML in JavaScript either.
The issue is, if you have to change something, the code is buried in a file somewhere and finding it takes more time than it should.

Collapse
davi94 profile image
Davi Pereira

I work with react because of his popularity, but I think the same as you, whenever I can, I use vue.js on my projects, but I still prefer react.js for larger projects.

Collapse
mindaugasr profile image
Mindaugas

Same to me. I remember then all wrote php + html in same file..., now we writing js + html :D amazing...

Collapse
whozzawuzza profile image
'''⌐(ಠ۾ಠ)¬'''

Technically, React doesn’t have html in it - it has JSX. Crisis averted. :)

Collapse
rodrigomf24 profile image
Rodrigo Fernandez

React is not a framework is a library

Collapse
jorge_rockr profile image
Jorge Ramón • Edited

There is a plugging called react-templates. It's pretty basic and you have separated code just as you do in Vue.

github.com/wix/react-templates/blo...

Collapse
cgdougm profile image
Doug MacMillan

I don’t like script tags in html... I don’t like mixing code and data. But if you truly believe in “separation of concerns” you‘ll like having one file that completely describes one component.