The future of the web: navigating HTMX, vanilla JS, and React
Tags: react, htmx, javascript, webdev
Published: 2024-03-07 14:11:29

React is currently the go-to choice for many devs when crafting interactive sites. But there's a new player in town catching the eye of devs everywhere - HTMX. It's fresh, it's exciting, and it's making old tech cool again. And it’s even made people interested in going framework-less.

I’ll outline the same functionality using Reach, HTMX, and vanilla JS, and then give you my thought process when selecting a frontend strategy.

For our sample scenario, we will build a “like” button. When it’s clicked, the number of likes is incremented by a backend call.

## HTMX Example

HTMX is designed for simplicity, allowing you to enhance server-rendered pages with attributes directly in your HTML.

```html
<div id="like-counter">Likes: <span>0</span></div>
<button hx-get="/update-likes" hx-trigger="click" hx-target="#like-counter">
  Like
</button>
```

Clicking the button sends a GET request to **`/update-likes`**, and the response directly updates the inner HTML of **`#like-counter`**.

## Vanilla JS Example

Using vanilla JavaScript gives you full control over the interaction but requires more boilerplate code.

```html
<div id="like-counter">Likes: <span id="likeCount">0</span></div>
<button id="likeButton">Like</button>
```

```jsx
document.getElementById('likeButton').addEventListener('click', function() {
  fetch('/update-likes', { method: 'POST' })
    .then(response => response.json())
    .then(data => {
      document.getElementById('likeCount').innerText = data.likes;
    });
});
```

## React Example

React's component-based approach allows for a structured way to handle state changes and UI updates.

```jsx
import React, { useState } from 'react';

function LikeButton() {
  const [likes, setLikes] = useState(0);

  const handleClick = () => {
    fetch('/update-likes', { method: 'POST' })
      .then(response => response.json())
      .then(data => setLikes(data.likes));
  };

  return (
    <div>
      <button onClick={handleClick}>Like</button>
      <div>Likes: {likes}</div>
    </div>
  );
}
```

## Which one should I pick?

The option you choose is is situational and depends on a number of different factors, such as the project requirements, your own coding preferences, and your skill level. Here are a few points to keep in mind when selecting a framework / design pattern:

### Choose React when…

- You want advanced control over UI effects and DOM manipulation without having to code from scratch
- You would like to leverage a rich ecosystem of third-party libraries and pre-built components
- You are an experienced developer, or you don’t mind a learning curve as React concepts can be tricky

### Choose plain JS when…

- You are a beginner and/or want to learn the fundamentals of browser programming
- You want complete control over your app
- You need to build without any external dependencies or you want to keep your build size small

### Choose HTMX when…

- You want to do some frontend work with a low learning curve
- You need to implement simple interactions quickly
- You can render pages server-side and don’t want or need a huge JavaScript app

## Conclusion

Choosing between HTMX, vanilla JavaScript, and React depends on your project's needs, team skill set, and the level of interactivity required. HTMX offers a simple way to enhance server-rendered pages, vanilla JavaScript gives you full control with more responsibility, and React provides a powerful framework for building complex user interfaces with efficient state management.

Was this approach helpful? Let me know what else you consider when making technology choices!