HTMX is in the final stages of a full version upgrade. We are working on refactoring the integration between Drupal and HTMX and that is nearly ready, so I thought I would give an overview of this work.
Improvements in HTMX
HTMX 4 is a complete refactoring that brings architectural changes and new features. HTMX has been a small library by design and now it's even smaller. The minified version of HTMX 4 comes in at 36 KB which is 30% less than HTMX 2.
From XMLHttpRequest to Fetch API
Experienced JavaScript developers probably respond to this change with an exclamation of, "It's about time!" I have spent the majority of my time in software engineering in PHP and needed to dig into the differences and background of these two constructs. The venerable XMLHttpRequest object (XHR) was introduced in 1999 to allow requests to be sent from JavaScript. A major overhaul of JavaScript in 2015 brought the Fetch API, with all major browsers on board by 2017. Fetch is naturally asynchronous, with the built in promise resolution taking the place of all the event handling code needed with XHR. Fetch also natively handles streams, which allows HTMX 4 to react to request headers while the body is still streaming in.
Full support for HTML fragments
The core paradigm of HTMX is powerful yet simple: make a request, select html from the response, swap that markup into the page. There are times though when either it's better to decide server-side what to send, or when it's helpful to send additional changes along with the response. These sort sequences of HTML are often called fragments. HTMX 4 will provide full support for fragments. Each fragment must define both its own target element and swap strategy.
<hx-partial hx-target="#messages" hx-swap="beforeend">
<div>New message</div>
</hx-partial>
<hx-partial hx-target="#count">
<span>5</span>
</hx-partial>This looks like an HTML5 custom element, but it is not intended to be parsed by a browser so there is no JavaScript class backing <hx-partial>. Instead HTMX transforms these into <template> tags and executes the markup change that is encoded in the target and swap attributes.
Morphing swaps
HTMX 4 adds two new swap strategies that implement the Idiomorph algorithm. A morphing swap compares the incoming markup with the target markup on and changes the minimal number of elements or properties to transform the target to match the source. The algorithm depends on HTML id attributes, which will not be reliable in Drupal until the old Ajax API is retired. For pages in which nothing is managed by the old API, this allows even more application-like interfaces. There are two swaps, innerMorph and outerMorph which correspond to innerHTML and outerHTML.
<div hx-get="..." hx-swap="innerMorph">
... <!-- This gets morphed -->
</div>
<!-- This... -->
<div hx-get="..." hx-swap="outerMorph">
...
</div>
<!-- ...gets morphed -->Handling HTTP statuses
Previously there was no swapping at all on responses with status codes outside the 200 range. With HTMX 4, all responses are processed and a new hx-status attribute provides control.
<!-- Show validation errors in a specific container -->
<form hx-post="..."
hx-status:422="target:#errors select:#validation-errors">
...
</form>
<!-- Suppress swap on server errors -->
<button hx-post="..." hx-status:5xx="swap:none">Save</button>
<!-- Push a custom URL on 201 Created -->
<form hx-post="..." hx-status:201="push:/items/new">...</form>Confluence with Drupal's Upgrade Policy
Drupal normally follows semantic versioning practices with its dependencies. That means that we wait for full version changes of Drupal to update to a new full version of a dependency. We are in the last months of preparing Drupal 12.0 and HTMX is expected to release HTMX 4.0 in a similar timing. Bringing the latest version of a top JavaScript library to the latest version of Drupal makes Drupal an even more exciting web application framework!
Collaboration with the HTMX Team
We have a close and collaborative relationship with the development team for HTMX. This has made bringing the library to Drupal even more enjoyable. Their devs are in our Slack, review our code, have made adjustments in HTMX 4 based on our feedback, and we have improved our code from their feedback as well. As we begin to dive deeper into refactoring our legacy Ajax API this relationship will support us as we learn more about the practice of building user interfaces with HTMX.
The HTMX Initiative
Both the integration with HMTX 4 and the ongoing pivot to HTMX in Drupal are outcomes of a community initiative. Community initiatives in Drupal are organized efforts to improve the framework. Whether your interest originates in Drupal or in HTMX, if you would like to join our efforts we would love to have you! Come talk to us in the #htmx channel of Drupal Slack.