
## What is HTMX

HTMX is a hypermedia-oriented Javscript library for creating dynamic website with minimal Javascript code. Specifically, it extend HTML as a hypermedia and address the issues with legacy HTML applications.
Giving user access to `AJAX`, `Websocket`, `Server Sent Event (SSE)`, `Css Transition`, ...

## Hypermedia-Oriented

`Hypermedia-Oriented` approach involves clients and servers sharing a common understanding of a set of hypermedia elements in data representations. Clients can use elements to trigger requests, navigate states while Servers provide the necessary hypermedia options in the responses.
In this way, any modification in server side wont break the client application as long as the client can recognize the defined hypermedia options.

## The core concept of HTMX

### Extending HTML with attributes

HTMX extend the core idea of HTML as a hypertext by adding additional anchor attributes for allowing more possibilities such as:

- Allow any element to send request, not just `form` element.
- Allow any HTTP method, not just `POST` and `GET` can be used.
- Allow more event, not just `click` or `form submit` can trigger requests.
- All other elements now can be the target for update by the request, not alway the entire `window`.
- Allow using `AJAX`, `Websocket`, `SSE` without writing Javascript.

### Let's see a simple example: active search

```html
<input
  type="text"
  name="q"
  hx-get="/trigger_delay"
  hx-trigger="keyup changed delay:500ms"
  hx-target="#search-results"
  placeholder="Search..."
/>
<div id="search-results"></div>
```

- `hx-get` attribute holds the API endpoint and HTTP method for sending request after triggered.
- `hx-trigger` defines the condition for the event to be triggered. In this case, it will fire a GET request 500 milliseconds after key up event only if the input has been changed.
- `hx-target` targets the element that will be inserted into by server response data.

This example showcases how HTMX simplifies the creation of interactive user interfaces. It replaces the need for extensive JavaScript (or the need for React) code in various common UI techniques, including infinite scrolling, toasts, conditional rendering, loading indicators, error handling, paging, and [websockets]() and SSE integration. HTMX offers a more streamlined approach to web development. [Explore more examples](https://htmx.org/examples/)

### The role of JavaScript in HTMX

While HTMX aims to minimize the need for JavaScript, it still provides a small set of APIs for interaction with HTMX.
For instance, these method are tailored to support htmx-styled AJAX requests:

```javascript
htmx.ajax("GET", "/example", "#myDiv");

htmx.ajax("GET", "/example", { target: "#myDiv", swap: "outerHTML" });

htmx.ajax("GET", "/example", "#myDiv").then(() => {
  // this code will be executed after the 'htmx:afterOnLoad' event,
  // and before the 'htmx:xhr:loadend' event
  console.log("Content inserted successfully!");
});
```

### Server generate events

HTMX also facilitates the triggering of events on the client-side, based on server responses. For instance, a response containing the header `HX-Trigger: contacts-updated` will trigger the `contacts-updated` event at the specified HTML element, and the corresponding event listener will be activated.

```html
<table hx-get="/contacts/table" hx-trigger="contacts-updated from:body">
  (2) ...
</table>

<script>
  document.body.addEventListener("contacts-updated", function (evt) {
    alert("contacts-updated was triggered!");
  });
</script>
```

Or listen only to the status code of server responses

```javascript
document.body.addEventListener("htmx:beforeSwap", function (evt) {
  1;
  if (evt.detail.xhr.status === 404) {
    2;
    // If the response code is a 404, show the user a dialog
    showNotFoundError();
  }
});
```

[More about Htmx Usage](https://hypermedia.systems/book/contents/)

## The advantages of HTMX

### Minimal of Javacsript - reduce development complexity

HTMX reduces an amount of Javascript code needed to create a dynamic Web applications. This approach leads to a more cleaner and maintainable code base.

### Improved performance

HTMX is lightweight, leading to faster initial page loads and reduced client-side processing. This results in a better user experience, especially for web applications with frequent UI updates. However, in large-scale applications with frequent UI updates, React is better in performance thanks to its virtual DOM.

### Locality of Behaviour (LoB)

HTMX emphasizes the locality of behavior, enabling developers to understand code functionality within a small, self-contained portion. This enhances code transparency and maintainability while streamlining development efforts.

### Product agility

HTMX works in improving product agility as it has been proven in [a real-world transition from React to htmx](https://htmx.org/essays/a-real-world-react-to-htmx-port/).

## The concerns with HTMX

### Violation of Separation of Concerns (SOC)

HTMX can blur the lines between data management and presentation, as backends must respond with HTMX content rather than traditional RESTful APIs with Json. As a result, some many different clients such as mobile app, browser, ... might not able to consume the API.

### Trade-offs in control

Using HTMX mean shifting in the balance of control between the client and server. The client is kept as _"slim"_ as possible and do all the _"heavy lifting"_ on the Backend. While, this might be a good thing for Backend Engineers but may require adjustments in development practices.

## When To Use ?

HTMX is a game-changer in web development, streamlining your codebase and team dynamics. Consider HTMX when your website:

- Need rapid initial rendering and strong SEO.
- Primarily display Text and Images.
- Focus on CRUD operations.
- Employs well-defined UI blocks that update separately.

HTMX may not be the best fit when:

- Your UI has complex interdependencies.
- Offline functionality is essential.
- Frequent UI updates are the norm.
- Your team is not yet HTMX-savvy.

## Conclusion

HTMX offers a fresh approach to web development, enhancing product agility and simplifying the creation of dynamic, interactive web applications. While it comes with some considerations, it opens up new possibilities in web development and offers an appealing alternative to traditional JavaScript frameworks.

## References

- https://www.youtube.com/watch?v=3GObi93tjZI&t=1406s
- https://hypermedia.systems/
- https://www.reddit.com/r/htmx/comments/r13e9i/xtmx_limitations_and_pitfalls/
- https://www.builder.io/blog/htmx-vs-react
- https://htmx.org/examples/


A comprehensive exploration of HTMX, a JavaScript library that extends HTML as a hypermedia, addressing the limitations of legacy HTML applications.

Introducing HTMX - navigating the advantages and concerns


## What are WebSockets

Previously, creating web applications that need bidirectional require a HTTP polling for updating the data from the server. This result in lots of problems such as high overhead, latency, not-truthly realtime.

WebSocket is a simple solution that is invented to solve those problems as it helps to maintain one single TCP connection for traffic in both directions. It currently can work over HTTP port 80, 443 and as proxies as it is designed for addressing the other existing bidirectional HTTP technologies so that take advantage of existing HTTP infrastructure.

## The protocol overview

### Handshake

A HTTP Handshake is preformed before update to WebSocket connection. The client makes a GET request to the server with an upgrade header. The server then response with status 101 to upgrade the current connection to be WebSocket connection. Otherwise, the client has to end the connection.

Example handshake

#### From client

```javascript
GET /chat HTTP/1.1
    Host: server.example.com
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
    Origin: http://example.com
    Sec-WebSocket-Protocol: chat, superchat
    Sec-WebSocket-Version: 13
```

- `Sec-WebSocket-Key` is to ensure the server support WebSocket protocol, the key is generated random to preven proxy server to cache and follow the communication

#### From server

```javascript
HTTP/1.1 101 Switching Protocols
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
    Sec-WebSocket-Protocol: chat
```

- `Sec-WebSocket-Accept`: is a response key to show server acceptance, the server first take the value of `Sec-Websocket-Key`, append `"258EAFA5-E914-47DA-95CA-C5AB0DC85B11"` _(Globally Unique Identifier)_ and then hashed with SHA-1

### Data transfer

After the handshake was successful, each side can start sending or receiving data. The data property in WebSocket is `message`. For each message, the browser is only able to send and receive messages as binary or plain text.

WebSocket uses sequential `frames` for transferring message instead of `streaming`. This result in each side can exchange data independently without any blocking.

#### \*Framing

A `Frame` is a small `header` + `payload`, the payload is similiar to other application data such as body of a HTTP message. In most basic form of WebSocket protocols include 2 type of frames:

- Non-control frame:
  - `text` - denotes sending `utf-8` encoded bytes
  - `binary` - sending raw bytes
  - `continue` - sending a continuation fragment of previous message
- Control frame:
  - `close` - denote that wanting to close, or responding to a close
  * `ping`
  * `pong`

_[Read detail here](https://datatracker.ietf.org/doc/html/rfc6455#section-5.2)_

#### \*Authentication

The protocol itself does not specify an authentication method. User can use any other mechanism used in HTTP such as TLS authentication, cookies or authentication Header _(Except for browser client, WebSocket api does not provide a way to modify the client handshake Header)_.

#### \*WebSocket URI

```
ws-URI = "ws:" "//" host [ ":" port ] path [ "?" query ]
wss-URI = "wss:" "//" host [ ":" port ] path [ "?" query ]
```

Note that the differences between `ws` and `wss`is:

- **`ws` use `HTTP` for handshake while `wss` use `HTTPS`**
- Default port for `ws` is 80 and `wss` is port 443

## WebSocket browser API

The browser provide an API for creating and managing WebSocket connection as well as exchange messages with a WebSocket server.

### Open WebSocket connection

We can instantiate a new WebSocket connection, linking to the WebSocket server, and it will start connecting immediately.

```typescript
const socket = new WebSocket("ws://localhost:8080");
```

### WebSocket events

In total, there are 4 events we can listen to are `open`, `message`, `error`, and `close`.

```typescript
// Connection opened
socket.addEventListener("open", (event) => {});
// Receive messages from server
socket.addEventListener("message", (event) => {});
// Connection Error
socket.addEventListener("error", (event) => {});
// After connection closed
socket.addEventListener("close", (event) => {});
```

**Sending message** The `socket.send(body)` method allow sending a message to the server. The `body` argument can be a `string` or `binary format type` such as `ArrayBuffer`, `Blob`.

#### Receiving message

Access `event.data` for incomming message

```typescript
socket.onmessage = (event) => {
  console.log(event.data);
};
```

- For Text message, `event.data` will always be `string`
- For `binary type` message, user can choose between `Blob` and `ArrayBuffer` by assign `WebSocket.binaryType='arraybuffer` _(default is `blob`)_ then `event.data` will be the appropriate type

```typescript
socket.binaryType = "arraybuffer";
socket.onmessage = (event) => {
  if (event.data instanceof ArrayBuffer) {
    // Handling binary message
    return;
  }
  // Handling String message
};
```

### Rate limiting

When user has a slow network connection. After calling `WebSocket.send(...)` the data will be buffered in memory and will be sent out as soon as connection get better

`WebSocket.bufferedArmount` return the amount of data queued using `call()` but not yet send out to the network. _This value will not reset to zero if connection close._

```typescript
if (socket.bufferedAmount === 0) {
  socket.send(moreData());
}
```

### Close connection

For sending `close frame` from browser WebSocket, simply call `WebSocket.close(code, reason)`.

```typescript
socket.close(1000, "Complete"); // both argument is optional
socket.onclose = (event) => {
  const { code, reason, wasClean } = event;
  console.log({ code, reason, wasClean });
  // { code: 1000, reason: "Complete", wasClean: true }
};
```

#### \*Common code

- 1000 - normal closure (default)
- 1006 - connection was lost (this code cannot set manually, connection close abnormally by the browser and event go to `WebSocket.onerror`)
- 1001 - the party is going away (server shutting down, browser leave the page)
- ...

## Connection state

User can access `WebSocket.readyState` for getting the current state of a WebSocket instance

- `0`: CONNECTING - socket created but connection is not open yet
- `1`: OPEN - Connection is open and ready to communicate
- `2`: CLOSING - Connection is in closing process
- `3`: CLOSED - Connection is closed or could not be opened


WebSockets are a simple solution that is invented to solve the problems of HTTP polling for updating the data from the server, which has caused in high overhead, latency, and not-truthly realtime. WebSocket helps to maintain one single TCP connection for traffic in both directions for bidirectional soft-realtime communication.