What are Hypertext Progressive based App ?

About

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

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:


Powered by ComboStrap