What are Hypertext Progressive based App ?

About

An hypertext progressive app is a single page application model that is based:

• on the fetch of HTML fragment (ie hypertext) on the server
• that replaces only a part of the web page.

The definition of the code logic (get/put/delete) is declared in HTML attributes.

Example

<button 
    hx-trigger="click"
    hx-post="/clicked"
    hx-target="#parent-div"
    hx-swap="outerHTML"
>
    Click Me!
</button>

What this HTML code means is:

• On the click of the button (hx-trigger=click)
• performs a http post request to the endpoint /clicked
• and replaces the outerHTML of the element with the id parent-div
• by the HTML result of the HTTP request

Motivation

The primary motivations are:

• no client-side router to maintain,
• no client state to manage.
• maintainability. (Directives live inside HTML rather than in separate JavaScript files, which enables to see how a component behaves without referring to an external .js file)

Library

Below are a list of library that implements this logic:

• https://htmx.org/examples/ ¹⁾
• https://alpinejs.dev/ (Spruce for state management)
• https://turbo.hotwired.dev/
• Remix (React based, not really hypertext based but in-between)