htmx implementation

Created on 21 June 2024, 5 months ago

Drupal core is moving in the direction of replacing its aging AJAX framework with htmx (see 🌱 [Plan] Gradually replace Drupal's AJAX system with HTMX Active ) so it would make a lot of sense for us to create a RefreshLess htmx integration and prioritize that over Hotwire Turbo.

Ideally, we'd use core's htmx library when that becomes available, falling back to pulling in our own like we currently do for Turbo if it's not found. We'll have to keep an eye on core and see how that develops.

To enable Turbo Drive-like behaviour, we can add the hx-boost attribute to the <body> element and start developing from there.

πŸ“Œ Task
Status

Active

Version

2.0

Component

Code

Created by

πŸ‡¨πŸ‡¦Canada ambient.impact Toronto

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @ambient.impact
  • πŸ‡¨πŸ‡¦Canada ambient.impact Toronto

    Added section discussing the HTMX contrib module β†’ .

  • πŸ‡ΊπŸ‡ΈUnited States fathershawn New York

    The module seems more low level in its goal, in that it doesn't try to progressively enhance the entire Drupal front-end, but rather to enable Ajax-like functionality for designated blocks.

    The purpose of the HTMX module is two-fold:

    1. Provide a set of tools to make it easy to use HTMX within Drupal.
    2. To be an arena of innovation for bringing HTMX to Drupal core.

    The HTMX Blocks are intended to be a usable example of developing a solution in Drupal. Both the admin interface and the blocks use HTMX. The module provides the following tools:

    1. The latest version of the HTMX library as a Drupal asset library
    2. The HtmxAttribute object which builds the data attributes that make HTMX work.
    3. JS/CSS asset loading: the same intent as Drupal Ajax - load any CSS or JavaScript in the response that is not already on the page.
    4. Render an entity in a given view mode and return the markup
    5. A route option to render a simpler html response
    6. Views plugins for HTMX displays and pagers

    I'm excited that you are inspired to build with HTMX and interested in what you learn, especially any learning that would apply to πŸ“Œ [POC] Implementing some components of the Ajax system using HTMX Active .

  • πŸ‡¨πŸ‡¦Canada ambient.impact Toronto

    @fathershawn Most of that I'm aware of. I think the biggest challenge in implementing the current functionality in HTMX is that we'll have to re-implement a lot of stuff that Hotwire Turbo does out of the box, but building on your module will help get there a bit faster when I (or someone reading this?) have the time and energy for it.

    My impression is that HTMX seems to more of a low level toolkit that you build with - would you say that's accurate?

  • πŸ‡ΊπŸ‡ΈUnited States fathershawn New York

    That is accurate. As we find areas in which a utility or service would help, I've been adding them here in Drupal. I don't know anything about Hotwire Turbo. All of the methods of HTMX enhance and expand on these 5 capabilities:

    1. Behaviors are described within the element
    2. Any element can issue an HTTP request
    3. Any event can trigger an HTTP request
    4. Use all the β€œverbs” of HTTP
    5. Target any element in the document for replacement by any element in the response

    These enable a rich hypermedia based paradigm.

  • πŸ‡¨πŸ‡¦Canada ambient.impact Toronto

    It's worth taking a quick look at Turbo, if only to get a sense of what we would have to recreate with HTMX. I did a bit of poking around the HTMX docs just now and realized they have a guide for migrating from Hotwire Turbo, so that'll be handy.

  • πŸ‡¨πŸ‡¦Canada ambient.impact Toronto
Production build 0.71.5 2024