I’m currently developing a conversational AI web application. I’ve been building it completely from scratch, following a structured SDLC approach.
...
For further actions, you may consider blocking this person and/or reporting abuse
⛔ The Problem: Too Much HTML in JavaScript
I'd say the problem is using the wrong HTML
Every
<div>can be replaced with a Custom Elementdashed-html.github.io
Thanks for sharing. I will check it out
Sure, the issue you brought in and how you solved it, is great and I learned from it.
But when I read 'JavaScript file became messy ', then I guess you use a single js file?
Just as an advice.
With a module approach and a proper file structure your js flles hardly becoming messy at all and are better maintainable too.
Thanks for the advice! I’m currently in the early stage of development, focusing on frontend interactivity, so I’m using a single JS file for now. I do plan to refactor it into modules soon for better structure and maintainability.
It's funny, there is so much hate for PHP because of the mixed code/markup, but sure, do it in JS and suddenly it's a good thing 🤣
A little late but for sure I do like PHP very much and I used to do a lot with it.
At present not at all but that's for another reason.
Then, Yes the reason that I like to use JS in a modular way has all to do with my PHP experiences because with that, having a proper file structure is a standard.
Fantastic article, Richa!! I love how you showcased the power of the tag — it’s such an underrated gem in HTML. Your example perfectly demonstrates how it streamlines JavaScript, keeps code cleaner, and boosts scalability. It’s refreshing to see elegant, native solutions that reduce complexity without extra libraries. Definitely inspired to refactor some code now!
Glad you find this useful. And yeah, it's amazing how simple native features can make such a big difference.
If you think this is good, you should check out JSRender. Basically offers the ability to separate HTML from JS creating reusable templates, but also lets you push a JS array or object into it and handles all of the content placement.
jsviews.com/#jsr-quickstart
Thanks for sharing. I will look into that.
When a person code in spring boot for almost 2 years no front end touched, then even basic html tag looks too much scary :(
Haha, switching back to the frontend after backend work feels like entering a different world. 😄
that's huge! in 3 years using HTML, never heard of this tag one single time. i wonder how long it was hidden from me 😂
Haha, same here! I hadn’t come across this tag until recently. When I needed to create a dynamic UI and my HTML started getting too lengthy to manage in JS, I looked for alternative approaches online, and I’m glad I discovered this underrated HTML feature!
If you are amazed by template, React will blow your mind
Yeah. React indeed is best. But it is about how a built-in feature can have the capability to solve issues or implement features without any library or framework.
If you are amazed by React, Custom Elements will blow your mind!
In vue js the template tag is heavily used .but does it does not work in the same way.
So if I want to use template tag in vue how do I do it.
This might cause conflicts. ( although this template tag is really not needed in frontend framework. Just curious 🤔)
I’m not very familiar with Vue.js, but you’re right, tag works differently there and might conflict with the native one.
Great post, Richa! This is truly useful when optimizing web applications!
Glad you find this useful!
I hate writing JS (in any form), but found myself having to do so for work lately. This was actually a pretty useful post. Thanks!
Thanks for appreciating! Glad you find this useful.
Or you could just use datastar or htmx and merge the new html fragments directly into the dom from the backend. No js required.
Why use a library when the spec already has the capabilities built in?
Such a an incredible feature and this happen to come to me on perfect time, now i can keep my html in my html and use js api to set attributes and inner text. Thankyou, nice explaination.
Thanks for appreciating! Glad you find this useful.
hmmm, I have no choice than to watch senior developers " pop my bubble" as they interact using different kind of concepts I have not even discovered, hmm
Good post thanks 😞.
Ha ha😄. Glad you like this!
Imagine being able to use this tag to create reusable Web Components. Or fast forward 10 years and imagine not using this tag and use the tagged template literals html``.
That’s exactly why it and the
slotelement have been added - check out developer.mozilla.org/en-US/docs/W...You could use tagged template literals, but then you’re reintroducing the coupling of the html and js - limiting flexibility. And impacting performance - as mentioned the
templatetag’s DOM node is parsed and ready to go, even when cloned; the tagged temple literal would require parsing each time you append it.There's nothing wrong with using js to build html.
What is wrong is if that jshtml function does more than return html. Then it's wrong.
Otherwise it's a matter of taste:
Arr.map(item=> htm'
${item}</>')
${item}
Never said there was anything “wrong” with using js to generate HTML - just highlighting the
templateelements plus points made by Richa in the “Why is this important?” section and conclusion.However; Using any form of string literal HTML to manipulate the DOM goes against the point of both (yes we can do it, but should we) - HTML defines the initial structure and content of a webpage the DOM, initially generated from the HTML, represents the structure and content of the page after that, and provides us an API to programmatically interact with and manipulate it.
I know it’s super simple to generate/inject HTML strings in manipulating the DOM structure (I’ve done it too) but it’s not the intended approach, not performant, and easily replaceable with native APIs
Rant over - cheers for listening 🤣
This is the way!
Really nice article describing the standards-compliant way of templating without the need for an external library!
I really liked the simplicity and I 100% agree, it keeps code better organised. Thanks for taking the time to write this up.
Using HTMX would have been way simpler and easier, and with pretty much zero javascript.
Zero js.... Except for the library, and the non-standard attributes, and probably some js anyway.... 😆