DEV Community

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

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

Jaydev Mahadevan on March 07, 2024

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 everyw...
Collapse
 
webjose profile image
José Pablo Ramírez Vargas

If the response is an object with the likes property, how does HTMX know to read this property? Is the sample incomplete?

Collapse
 
itarrant profile image
Iain

HTMX works by receiving a html string as a response and replacing/ swapping the matching CSS selector in the dom. In this case the innerHTML of the #like-counter.
This is if course only a simple example and much more elaborate things can also be done.

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

Thanks. I don't debate HTMX's abilities. I just wanted to put out there that the article seems to have an intention to mislead readers making them think the code snippets presented produce equal/equivalent results. They don't.

Collapse
 
brense profile image
Rense Bakker

Yes it is. It also needs to go to a server for each user click 😛

Collapse
 
pashadia profile image
pashadia

.... as opposed to updating the likes counter without going to the server?

If you were actually referring to building stateful SPAs, where not everything needs a server round-trip, here's how to do it, from the creator of htmx himself. There are also plenty of posts about combining htmx and react on the web.

Collapse
 
eabuzaid profile image
Eyad Abu-Zaid

Thank you for the article! great simple walkthrough!

Personally, I'd always advise starting developers to build stuff using vanilla js. It helps them gain a much more robust understanding of the browser and what happens behind the layer (or layers) of abstraction the framework provides.

Obviously react is still king in terms of popularity and support, but I quite like HTMX and an very optmistic about its future. you also missed a key aspect of its popularity; the memes are hilarious!!

Collapse
 
kmsaifullah profile image
Khaled Md Saifullah

I never knew about HTMX. Thanks for this blog.

Collapse
 
610470416 profile image
NotFound404

Only html, javascript, css will endure.
htmx,axml, scss, sass, less, react, vue, angular, all are temporary.
They are of no future.

Collapse
 
kortizti12 profile image
Kevin

This article has great content about modern web development. I would like to mention a few things I found out about reading about other dependency-free JavaScript libraries.

HTMX, Alpine.js, and Knockout are all JavaScript libraries that simplify front-end interactions and make web apps more maintainable and performant. Despite having different approaches, they share common characteristics:

  • Enhancing HTML: All three libraries aim to extend standard HTML capabilities.
  • Fast and Lightweight: They are designed to be lightweight, so they load quickly and execute efficiently.
  • Declarative Approaches: Each library utilizes a declarative programming style.
  • Dependency Reduction: These libraries are intended to reduce the need for heavier frameworks like Vue or React.
  • Ease of Integration: HTMX, Alpine.js, and Knockout.js can be easily integrated into existing projects, without a complete overhaul.
  • Focus on UI Updates: All three libraries provide mechanisms to update the user interface in response to data changes without needing to reload the page or build complex JavaScript structures.

So, when might you choose HTMX over Alpine or Knockout? As always, it will vary based on the needs of your project, your team’s expertise, and the particular features you’re looking to build. Here are three instances where HTMX might be preferred:

  1. When SEO is critical
  2. When maintaining JS-rich client-side frameworks is complex or resource-intensive
  3. When you want to handle the business logic mostly on the server-side

I recommend reading this article from Facundo Corradini that describes more about HTMX perks and limitations: scalablepath.com/front-end/htmx. He also provides a clear comparison between the libraries I mentioned. I think it’s worth a read for anyone that is interested in modern web development.

Collapse
 
garyk2015 profile image
garyk2015

Its making old tech cool again because people are realising with all these frameworks you get a ton of dependencies, code bloat and just a huge and completely un-necessary ton of complexity.

Software development is going backwards, everything takes so much longer now which is why this is an echo back to classic ASP/PHP.

Collapse
 
raphox profile image
Raphael Araújo

Another option is alpinejs.dev/. I like its way to do the things.

Collapse
 
metacatdud profile image
Tibi

Chose JS when:
"- You are a beginner and/or want to learn the fundamentals of browser programming

  • You want complete control over your app "

Isn't a bit contradictory?

Collapse
 
chinmaymoghe profile image
Chinmay

This is my opinion:

Even React is an overkill for small and medium sized projects , Svelte, Vue make more sense. React lacks good template constructs as well.

Collapse
 
ripp profile image
Charly Rippenkroeger

Random standards note - a GET should always be a 'safe' call, non-modifying. I believe POST/PATCH is the proper verb.