HTML approach to interactivity in a JavaScript world – The new stack

0

The debate around multi-page applications (MPAs), or what you might 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”, hopes to move web development away from the SPA approach. .

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

In a response to this video, Carson Gross, creator of htmx, argued that many of the specific examples that Harris offers as problematic for AMPs can actually be solved with htmx itself. Beyond offering htmx as a solution, however, Gross also asserts that there’s one big problem that Harris overlooked in his discussion of the drawbacks of SPAs: complexity.

“Unfortunately, there is one topic that Mr. Harris doesn’t talk about, and we believe it may be because he doesn’t see it,” Gross wrote in his response. “He’s a JavaScript developer with a passion for the language and swimming in the culture of frontend framework engineering, so the current complexity of JavaScript frontend development comes naturally to him. For many of us, however, the JavaScript ecosystem is just incredibly complicated. Comically, in fact, considering the requirements of most web applications.

What is htmx and why is it useful?

The complexity of front-end web development is something Gross has been trying to solve for almost a decade now, having created the alternative front-end library intercooler.js in 2013, which came with the tagline “AJAX with Attributes: There’s No doesn’t have to be complex”. Recently, intercooler.js hit version 2.0 and became htmx, which, according to the description from GithHub, “gives you access to AJAX, CSS transitions, WebSockets, and server-sent events directly in HTML, using attributes, so you can create modern user interfaces with the simplicity and power of hypertext”.

“The concept is to use the original model of the web to build web applications, but let’s make the HTML more powerful.”

– Carson Gross, creator of htmx

Put simply, Gross described htmx as an attempt “to stay within the original model of the Web, using HTML and Hypermedia concepts, rather than requiring 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’s dependency-free, and front-end developers using htmx don’t need to write JavaScript to achieve similar functionality. Instead, they use additional attributes in HTML tags to achieve dynamic content and updates. In the project description, Gross writes that he created htmx to solve four basic problems with traditional HTML:

“By removing these arbitrary constraints, htmx complements HTML as hypertext,” he concludes. Htmx does this by issuing AJAX (asynchronous JavaScript and XML) requests directly from HTML code, using JavaScript-like events such as mouse-overs or scrolling behaviors. Using htmx, developers can then create UI features such as infinite scrolling, progress bars, confirmation dialogs, inline editing, and a variety of other “UX templates implemented in htmx with minimal HTML and styling”.

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

Make HTML more powerful

“I think a lot of JavaScript frameworks now, you’re almost building a fat client in the browser,” Gross said in an interview with The New Stack. “You just use the browser as a virtual machine to do it. When you’re in this 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 – even sites like Facebook or Twitter, which are “mostly text and images”.

“The concept is to use the original model of the web to build web applications, but let’s make the HTML more powerful,” Gross continued. “If we make HTML more powerful, we may not have to put up with all the complexity that comes with these JavaScript front-end frameworks, because when you write your UI in JavaScript, you write a lot of code. There’s a lot complexity to deal with. Htmx is really kind of a throwback and an attempt to say, ‘Okay, instead of going down this JavaScript route, building big in-browser apps in JavaScript, let’s make HTML more powerful and let’s see how much interactivity we can get by simply trying to make HTML more powerful as hypertext, as hypermedia, as something that interchanges HTML.

While he doesn’t expect htmx to take a bite out of React’s dominance anytime soon, Gross said he hopes it finds more of a niche, given recent hesitations in adopting JavaScript for everything.

“It boils down to a hypermedia approach versus a JavaScript-centric approach,” he said. “Both are reasonable ways to build web applications – and the industry, at the moment, is leaning heavily towards the latter. I hope to change that at least a little and demonstrate that, in fact, hypermedia applications can implement many reasonably sophisticated UI models without the complexity of heavier JavaScript frameworks.

Photo by Paula Schmidt of Pexels.

Share.

About Author

Comments are closed.