HTMX and Hypermedia

Back to the Future

Thank you Sponsors!

Thank you organizers!

Alena and the whole crew

Ryan Durham

Senior Engineer @ Firebrand Technologies
Owner @ Stage Right Labs

ryan at stagerightlabs dot com

stagerightlabs 

<input type="hidden" name="_method" value="DELETE">

Hypertext and Hypermedia

A non-linear way of navigating information; the reader can link to wherever they want to go.

The term was coined by Ted Nelson in 1965

Hypertexts: new forms of writing, appearing on computer screens, that will branch or perform at the reader’s command. A hypertext is a non-sequential piece of writing; only the computer display makes it practical.

Ted Nelson

Examples

  • Mac Hypercard
  • FileMaker
  • Adobe Flash
  • Project Xanadu

Older than the web itself

The World Wide Web

The most popular example of hypermedia

HTML: Hypertext Markup Language

HTTP: Hypertext Transfer Protocol

Key Components of HTML

  • <a> Drives Interactivity
  • <form> Allows users to udpate the state of resources on the server

HTML is Incomplete

It could support more interactivity and richer experiences but it does not

The desire for richer web experiences has popularized the JavaScript Single Page Application

JavaScript SPA

  • The main appeal is more interactive and immersive user experiences
  • The downside is complexity

The complexity of JavaScript

  • Work must be done to translate a JSON response into HTML updates
  • A change in the JSON response implies a change in the JS code and vice versa; they are tightly coupled
  • It is likely that business logic will be duplicated between the client and the server
  • Reinventing native browser functionality requires a lot of work

Advantages of Hypermedia

  • Simplicity
  • Tolerance of change
  • Endorsement of Native browser features

HTML Over the Wire

This seems like a small change,
but there are big implications

An example of a Hypermedia Response


    

      
Seattle, WA January, 2025

      
Sold Out!

    

    

      
Portland, OR February, 2025

      
Sold Out!

    

    

      
San Francisco, CA March, 2025

      Buy Tickets

HATEOS

Hypermedia as the Engine of Application State

Hypermedia is Less Complex

The client needs no knowledge of application state;
it just needs to render HTML

REST: REpresentational State Transfer

  • These days REST largely refers to a style of JSON API, but originally it was about an architecture for distributed hypermedia systems
  • The term was coined by Roy Fielding in 2000
  • The content of a response is an HTML representation of the requested resource
  • HATEOS is a key component of REST architecture

Key Takeaway

Sending HTML over the wire unlocks a completely different way to think about building web applications

HTML is Incomplete

It could support more interactivity and richer experiences but it does not

Form Method Spoofing

<input type="hidden" name="_method" value="DELETE">

What if we could take advantage of
the full possibilities of HTML?

HTMX

A small javascript library that aims to augment HTML just enough to enable richer UI experiences without letting go of the benefits of hypermedia.

htmx.org

An example of an HTMX Interaction

We don't need to respond with full page content;
we cand send fragments instead.

Many server side templating tools support fragments.

The HOWL Stack:
Hypermedia on Whatever Like

You can use any server side language that can interpret headers and render HTML; even JavaScript!

The Triptych Proposals

An effort to update the HTML spec:

  • Support PUT, PATCH, and DELETE in HTML Forms
  • Button HTTP Requests
  • Partial Page Replacement

https://alexanderpetros.com/triptych/

Hypermedia is a great choice for many websites, but doesn't make sense for every application

Even in those applications there may still be a place for Hypermedia

Further Reading

Hypermedia Systems: The revolutionary ideas that empowered the Web

hypermedia.systems