Jak budować nowoczesne strony bez jQuery

htmx to biblioteka, która pozwala na łatwy dostęp do AJAX, przejść CSS, WebSockets i Server Sent Events bezpośrednio w HTML, korzystając wyłącznie z atrybutów HTML. Dzięki czemu nie trzeba pisać skomplikowanej składni czy własnego JavaScriptu.

HTMX to następca InterCooler.js o którym pisałem kilka lat temu. Idea jest dokładnie taka sama - zamiast programować zdarzenia, używamy tagów do wykonywania operacji. Najprostszy przykład

<button hx-post="/strona.html" hx-target="#w">Ładuj treść </button>

Spowoduje załadowanie treść i z serwera i wstawienie jej do elementu id="w".

HTMX obsługuje również zapytania typu POST, GET, PUT i DELETE.

Obsługa SSE

O SSE pisałem wcześniej , w wielkim skrócie jest to bardzo prosty sposób na polling danych z serwera:

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache'); // recommended to prevent caching of event data.

/**
 * Constructs the SSE data format and flushes that data to the client.
 *
 * @param string $id Timestamp/id of this connection.
 * @param string $msg Line of text that should be transmitted.
 */
function sendMsg($id, $msg) {
  echo "id: $id" . PHP_EOL;
  echo "event: eventName" . PHP_EOL; 
  echo "data: $msg" . PHP_EOL;
  
  echo PHP_EOL;
  ob_flush();
  flush();
}

$serverTime = time();

sendMsg($serverTime, 'server time: ' . date("h:i:s", time()));

i w prosty sposób czytać dane z serwera:

<div hx-sse="connect:/event_stream.php swap:eventName">
  ...
</div>

Ogólnie rzecz biorąc HTMX to doskonały sposób na szybkie budowanie nowoczesnych stron, bez tworzenia nadmiarowego kodu JavaScript