Hypermedia

Why do we call it “the web?”

Source: Visualizing Complex Hypermedia Networks through Multiple Hierarchical Views [1995]

Hypermedia Controls: How we “branch”

HTML has two hypermedia controls.

Hypermedia Applications

• Use a declarative syntax within the HTML.
• Interact with the server using HTML.
• Stay within the original REST-ful architecture of the web.
• Continue to use Hypermedia As The Engine of Application State (HATEOAS).

Overview

2023 JavaScript Trends

Five Aspects of htmx

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

Features

Behaviors are described within the element

Any element can issue an HTTP request

Any event can trigger an HTTP request

Use all the “verbs” of HTTP

• GET (retrieves): data-hx-get="/path"
• POST (creates): data-hx-post="/path"
• PUT & PATCH (alter):
  • data-hx-put="/path"
  • data-hx-patch="/path"
• DELETE (deletes): data-hx-delete="/path"

Target any element in the document for replacement

Comparison

A Typical JavaScript Approach

• Creates behaviors using an imperative syntax that is seperated from the HTML.
• Interact with the server using JSON data.
• State is modeled in Javascript memory.

Behaviors and state are seperated from HTML.

                        stateDiagram-v2
                            ShadowDOM: Shadow DOM
                            b: body
                            bs: body
                            d1: div
                            d2: div
                            d3: div
                            d4: div
                            p1: p
                            p2: p
                            i1: img
                            note left of i1 : To make this clickable
                            i2: img
                            note right of i2 : Add a click behavior here

                            [*] --> HTML

                            state HTML {
                                b --> d1
                                b --> d2
                                d1 --> i1
                                d2 --> p1
                            }

                            [*] --> ShadowDOM
                            state ShadowDOM {
                                bs --> d3
                                bs --> d4
                                d3 --> i2
                                d4 --> p2
                            }

                    

HTMX is different

• HTMX is smaller in size and scope

HTMX is different

• HTMX is smaller in size and scope: framework or library?
• HTMX extends and processes HTML.
• HTMX has no other dependencies.
• HTMX doesn't need any kind of compiler or transpiler.

In a Drupal Project

HTMX is easy to use in your Drupal project

composer require 'drupal/htmx:^1.3'

{# In a Twig template we attach the library. #}
{{ attach_library('htmx/drupal') }}

// Include it in your Drupal render array.
$build['#attached']['library'][] = 'htmx/drupal';

Your HTMX toolbox contains a lot of attributes

class HtmxAttribute extends Attribute {}

Since we extend Attribute you can pass your other attributes to the constructor

And all the attributes will be added to the render array:

More tools in the box

• Assets (CSS/JS) from the request are also inserted
  • Detect
  • Diff
  • Insert
• Route option: _htmx_route: true ⇒ Drupal\Core\Render\Plugin\DisplayVariant\SimplePageVariant
• HTMX Block: A drupal block that loads another block dynamically via HTMX.
• htmx/debug library ⇒ data-hx-ext="debug"

/htmx/{entityType}/{entity}/{viewMode}

Renders an entity in the given view mode and displays using the SimplePageVariant page display

HTMX attributes in Twig

You will need a url object to add any requests to an HtmxAttribute. The Twig Tweak module provides a drupal_url function that you can use to get a Url object in Twig.

Views Display

• An HTMX display plugin is provided:
  • Set a custom path for the display
  • Renders on the SimplePageVariant
• Exposed forms altered to use HTMX to refresh the display
• An HTMX powered mini-pager is also provided if your view needs a pager

In Drupal Core

A proposal

• Alex Bronstein (effulgentsia)
• Gradually replace Drupal's AJAX system with HTMX
• Connected to the effort to refactor jQuery out of Drupal

A Proof of Concept Under Construction

• Théodore Biadala (nod_), front-end framework manager, requested a POC
• [POC] Implementing some components of the Ajax system using HTMX
• A Drupal creativity pattern: innovate in contrib and bring the learning to core
• Uses the same process from contrib to insert Assets (CSS/JS) from the request.

Freedom to change things

interface HtmlAttributeInterface extends  \Countable, \IteratorAggregate, MarkupInterface {}

class HtmxAttribute Implements HtmlAttributeInterface {}

class Attribute implements HtmlAttributeInterface, \ArrayAccess {}

Usage is only focused on HTMX attributes

Collaborators enthusiastically welcomed!