HTML Approach to Interactivity in a JavaScript World – InApps Technology 2022

The debate around multipage applications (MPAs), or what you might otherwise call traditional websites, versus single-page applications (SPAs), or web applications built using frontend JavaScript frameworks such as React, has been going on for several years now. A new HTML extension framework called htmx, described as “a library that allows you to access modern browser features directly from HTML, rather than using javascript,” is hoping to shift web development away from the SPA approach.

Recently, Rich Harris, creator of the Svelte framework, released a video asking if single-page apps have ruined the web? In the video, Harris examines the pros and cons of both sides, eventually determining that the way forward is to use a bit of both approaches — via what he calls “transitional apps,” which are a mix of both SPA and MPA technologies.

In a response to this video, Carson Gross, creator of htmx, argued that most of the specific examples Harris offers as problematic for MPAs are actually solvable with htmx itself. Beyond offering htmx as the solution, however, Gross also argues that there’s one big issue that Harris overlooked in his examination of the cons of SPAs: complexity.

“Unfortunately, there is a topic that Mr. Harris does not discuss, and we believe this may be because he doesn’t see it,” Gross wrote in his response. “He is a JavaScript developer who is passionate about that language and who swims in the engineering culture of frontend frameworks, so the current complexity of JavaScript frontend development seems natural to him. For many of us, however, the JavaScript ecosystem is simply insanely overly-complicated. Comically so, in fact, given the requirements of most web applications.”

What Is htmx and Why Is It Useful?

Complexity in frontend web development is something that Gross has been attempting to address for nearly a decade now, having first created the intercooler.js alternative frontend library back in 2013, which came with the tagline “AJAX With Attributes: There is no need to be complex”. Recently, intercooler.js hit version 2.0 and became htmx, which the GithHub description says “allows you to access AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext”.

“The concept is, let’s use the original model of the web for building web apps, but let’s make HTML more powerful.”

– Carson Gross, creator of htmx

More simply, Gross described htmx as attempting “to stay within the original model of the web, using HTML and Hypermedia concepts, rather than asking developers to write a lot of JavaScript.” Somewhat amusingly for this discussion, htmx is a JavaScript library — but in keeping with this simplistic approach, it is dependency-free and frontend developers using htmx do not need to write JavaScript to achieve a similar functionality. Instead, they use additional attributes in HTML tags to achieve dynamic content and updates. In the project’s description, Gross writes that he created htmx to solve four basic issues with traditional HTML:

• Why should only <a> and <form> be able to make HTTP requests?
• Why should only click & submit events trigger them?
• Why should only GET & POST methods be available?
• Why should you only be able to replace the entire screen?

“By removing these arbitrary constraints, htmx completes HTML as a hypertext,” he concludes. Htmx does this by issuing AJAX (asynchronous JavaScript and XML) requests directly from the HTML, using events similar to that of JavaScript — such as mouseovers or scroll behaviors. Using htmx, developers can then create UI features such as infinite scroll, progress bars, confirmation dialogs, inline editing, and a variety of other “UX patterns implemented in htmx with minimal HTML and styling”.

By comparison, JavaScript frameworks such as React and Vue.js create SPAs by using JavaScript to make requests back to a server, which then sends data using the JSON (JavaScript Object Notation) data format, and again uses JavaScript to process that data and update the user interface.

Make HTML More Powerful

“I think a lot of the JavaScript frameworks now, you’re building almost a thick client in the browser,” said Gross in an interview with InApps Technology. “You’re just using the browser as the virtual machine to do that. When you’re in that world, you can do a lot more, obviously, but there’s a lot more complexity.”

Gross sees htmx as an answer to this complexity for many websites out there — even sites like Facebook or Twitter, which are “mostly text and pictures”.

“The concept is, let’s use the original model of the web for building web apps, but let’s make HTML more powerful,” continued Gross. “If we make HTML more powerful, maybe we don’t have to put up with all the complexity that comes along with these JavaScript frontend frameworks, because when you’re writing your user interface in JavaScript, you’re writing a lot of code. There’s a lot of complexity to manage that. Htmx is really kind of a move back and an attempt to say, ‘Okay, instead of going down this JavaScript route, building big applications in the browser in JavaScript, let’s make HTML more powerful and see how much interactivity we can get by just trying to make HTML more powerful as a hypertext, as a hypermedia, as something that exchanges HTML.’”

While he doesn’t expect htmx to take a bite out of React’s dominance any time soon, Gross said he has some hope that it will find more of a foothold, given recent hesitation around adopting JavaScript for everything.

“It boils down to a hypermedia vs. a JavaScript-centric approach,” he said. “Both are reasonable ways to build web applications — and the industry, right now, leans heavily towards the latter. I am hoping to change that at least a little bit and demonstrate that, in fact, hypermedia applications can implement many reasonably sophisticated UI patterns without the complexity of heavier JavaScript frameworks.”

Photo by Paula Schmidt from Pexels.