Navigating Modern Web Development: A Comparison of HTMX and Web Components

Aahlad kethineedi
3 min readDec 12, 2024

--

HTMX has been the talk of the town lately. Its features are quite promising and honestly revolutionary.

HTMX, in short, does what we all thought is lacking in HTML. HTML, when used properly, is very powerful by itself, but it lacks a lot of features, mainly the interactivity, which is often covered by Javascript in any modern web development framework/library.

Many frameworks/libraries have come and go and some have stayed back to take up major market share in frontend development space. React, Vue, Angular, Svelte and JQuery are among the most popularly used frameworks/libraries.

Prior to HTMX’s hype-train, there was a similar hype-train for an API, which is Web Components. This was supposed to “Change the way modern web development works”.

But as you might be already aware, if it is too good to be true, then often it is not true at all.

Web Components:

On a very high level, a Web Component is nothing but a custom HTML element/tag which works like any other HTML tag, like <p>. This tag, functionally speaking, does only thing: which is, encapsulate the text in a paragraph. The ‘how’ and ‘why’ is formatted in a such a way is configured under the hood.

Similarly, if you want an HTML tag which performs exactly the tasks you want to, then you can use a Web Component to do that.

I will explain with a simple example, let’s say you want an HTML tag which does the same as a <p> tag but by default uses a chocolate colour. For this use case you could a web component to do so.

  class ColoredParagraph extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });

const paragraph = document.createElement('p');
paragraph.style.color = '#D2691E';
paragraph.textContent = this.textContent;

shadow.appendChild(paragraph);
}
}

customElements.define('colored-p', ColoredParagraph);

To use this custom component:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Paragraph Component</title>
</head>
<body>
<script src="colored-paragraph.js"></script>
<colored-p>Here is some custom-colored text.</colored-p>
</body>
</html>

Do note that, this is just for simple explanation, if you really want a custom colour to your paragraph tag then you can just use CSS with your paragraph tag.

This sounds very promising, but here are few issues with Web Components:

  1. No code separation: Biggest issue in Web Components is code separation. A component contains HTML, CSS and Javascript all in one place which could be little clumsy.
  2. No proper coding standards: There are no coding standards whatsoever. You have to make your own coding standards in order to make the code maintainable. A component could be just 10 lines of code and also be 1000s of line of code. In this case, debugging makes it very hard.
  3. Everything has to be built from scratch: Literally! Every component, function has to be built from scratch.

HTMX:

HTMX seems to be a game changer in the front-end world as it provides the the functionality aspect of JavaScript in the markup itself. That is the basic essence of HTMX. Without the complexities of JavaScript, we can make API calls within the markup itself. Here is an example:


<body>
<h1>HTMX API Example</h1>

<!-- Button to trigger the API call -->
<button
hx-get="/api/get-quote"
hx-trigger="click"
hx-target="#quote-container"
hx-indicator="#loading-indicator">
Get Random Quote
</button>

<!-- Loading spinner -->
<div id="loading-indicator" style="display: none;">Loading...</div>

<!-- Container to display the fetched data -->
<div id="quote-container" style="margin-top: 20px;"></div>

</body>

The above chunk of code is doing this:
Inside a button tag,

hx-get — is responsible for making the get call.

hx-trigger — defines which trigger mechanism will make the API call.

hx-target — specifies which DOM element should be updated with the response

hx-indicator — specifies which DOM element would be rendered during the request.

Sounds promising right? Not exactly. Here are some of the common issues faced while using HTMX:

  1. No handling for routing: There is no handling for routing in HTMX. If you need routing, then it shall be facilitated from the backend.
  2. No build tools: There are no build tools for HTMX like Webpack or Vite.
  3. No support for Typescript: This is a major issue, especially for those who do not like Javascript.
  4. Not suitable for production environment: HTMX can be good for small sized and fun projects, but for a full fledged prodcution-ready application — no chance.
  5. Uncertainty in scaling: Similar to the previous issue, HTMX can be good for small and fun-sized projects but for large scaled projects, the scaling is a problem.

--

--

Aahlad kethineedi
Aahlad kethineedi

Written by Aahlad kethineedi

Software Developer. I enjoy reading about Tech and Finance.

No responses yet