Initially, I spent the end of 2023 looking for a partner for frontend development. My work on secure tooling, data collection, and API was consuming all my time. However, the start of 2024 presented the need for a UI beyond a custom GPT in OpenAI’s ChatGPT store. It meant rolling up my sleeves and getting on with it. Something I enjoy.
The Web UI Landscape: Then and Now
Background
My history with JavaScript for web UIs goes back to 2002, I’ve used it a fair amount in the first engineering part of my career and did projects like:
- 2002: a UI for a remote seismic activity monitoring solution (AJAX was for XML rather than JSON)
- 2005: a UI for tracking releases in multiple environments
- 2007: a real-time observability UI of trade processing
- 2013: an encrypted note store using CouchDB and Knockout.js (personal project to understand the new architecture).
I share the years to give some context and highlight that I didn’t really touch React etc… Knockout.js and it’s MVVM architecture was the last port of call for me.
The Next.js 14 Experience
Returning to frontend development after a decade, I found the landscape had changed dramatically. I chose Next.js 14 with its app router architecture, the theory looked interesting. It wasn’t long before something felt off:
- Recreating web infrastructure within the browser (including in-browser URL routing to external URLs 🤨)
- Mixing server-side and client-side code in the same component (debugging is even more a joy than normal here) 😑
- Typing that no-one appears to ever use… 🙄
- Components that don’t offer tangible abstraction, div soup, and messy markup 🤯
While I managed to create a V1 dashboard and chat app, neither the users nor I were fully satisfied with the result. And adding a feature was difficult.
The HTMX Revelation
After struggling with Next.js, I discovered HTMX. It felt like what the W3C should have done to HTML, adding features that make unwieldy JavaScript frameworks unnecessary for many “simple” web development projects.
HTMX addresses key user experience needs:
- Navigation without page refresh 80% of the time
- Real-time updates
And the creators have a great sense of humor!
the htmx developer starter kit
— htmx.org / CEO of peer-reviewed (same thing) (@htmx_org) September 16, 2020
- print out
- tape to wall pic.twitter.com/Mrf7diVwt2
Beware the rabbit holes
In research alternatives I found a lot of blogs and commentary on the disgust towards those that championed complex JavaScript based web apps without being clear of the overhead it required to build and maintain. It was billed as “wow, look how easy it is to do this in the browser”. I recall there being a narrative like “JavaScript is the new assembler code”.🤦♂
Here are a few takeaways:
- JavaScript frameworks like React make sense for complex browser-based applications (e.g., word processors, spreadsheets) but are overkill for simpler projects.
- The push towards complex JavaScript frameworks by thought leaders has come under a decent amount of scrutiny without response (none expected…).
- There are parallels between the JavaScript framework hype and current GenAI trends that warrant discussion.
- The JavaScript frameworks are course correcting but it’s still very complex.
Conclusion
While HTMX isn’t perfect (the Conservation of Misery is real, and no silver bullet exists), it offers a conceptually simple, clear, and declarative approach to web development that addresses real-world user experience challenges.
As I transition to using HTMX, I’m eager to see how users respond to this change. The journey from Next.js to HTMX has been a reminder that sometimes, simpler solutions, often hidden in plain sight, can be more effective and satisfying for both developers and users.
The bonus
My giddy aunt* it is easy to switch between using HTTP and WebSocket with HTMX. By comparison: So. Dam. Easy. Probably deserves another post that.
*English expression for something like wow :)
What are your thoughts on the evolution of web development frameworks? Have you had similar experiences or insights in your development journey?
Feel free to share:
- Email: [email protected]
- LinkedIn: https://www.linkedin.com/in/thompson-m
- Twitter: https://x.com/thompsonson
Peace, Matt