The future of the web: navigating HTMX, vanilla JS, and React

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.

<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.

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

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.

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!