Zero JSON Architecture

HTMX enables an architecture that eliminates the need for JSON by focusing on HTML-over-HTTP communication.

Without any introduction let’s jump in straight away.

1. Client-Side (Browser)

• HTMX: Handles dynamic interactions like form submissions, button clicks, or content updates, all using standard HTTP requests.
• HTML Templates: HTML is structured so that parts of the page can be dynamically updated without reloading the entire page. HTMX targets specific elements for updating.

2. Server-Side

• Traditional Server-Side Rendering: The server generates HTML fragments (or full pages) as the response to HTMX requests.
• No API Layer Needed: Since the server is generating HTML directly, there is no need for an API that sends or receives JSON. All the logic is handled server-side, and the browser gets back pre-rendered HTML.
• State Management: Any application state that needs to be persisted or passed between requests is handled server-side (through sessions, databases, or form data), and no JSON payloads are sent back and forth.

3. Request/Response Flow:

• HTMX Request (client to server): HTMX sends an HTTP request based on user interaction (GET, POST, PUT, etc.). These requests are either simple form submissions or query strings, without any JSON payload.
• HTML Response (server to client): The server responds with a small HTML fragment or a full page, which HTMX then inserts into the DOM without refreshing the entire page.

4. No Client-Side JavaScript Frameworks:

• Unlike SPA frameworks (like React or Vue) that rely heavily on JSON for client-server communication, HTMX allows you to build fully dynamic pages using server-rendered HTML without the need for additional JavaScript libraries to manage state or send data as JSON.

Key Benefits of Zero JSON Architecture with HTMX:

• Simplicity: You don’t need to serialize and deserialize JSON, nor manage an API layer. The server generates HTML, and HTMX inserts it into the page.
• Performance: Server-side rendering (SSR) tends to be faster for first-page loads and avoids the client-side processing overhead of JSON-heavy JavaScript apps.
• Reduced Complexity: By removing JSON and an API layer, you reduce the complexity of your front-end code. Everything remains in HTML and server-rendered responses.
• Compatibility: This architecture works well across older browsers and with less powerful devices, as there is no complex client-side processing.

Example of the Full Flow:

1. User interaction:

   • A user clicks a button or submits a form.
   • HTMX sends an HTTP request to the server (with form data or query parameters, not JSON).

2. Server logic:

   • The server processes the request, retrieves necessary data, and generates an HTML fragment based on the request (e.g., a new table row, a form, a list).

3. Response:

   • The server responds with an HTML snippet.
   • HTMX dynamically updates the specific part of the page with that HTML.

Example Code:

(ASP.NET is completely arbitrary)

Frontend (HTML with HTMX):

Backend (Server-side):

In that setup, there is no JSON anywhere. HTMX triggers the HTTP request, and the server responds with an HTML fragment (_ResultPartial), and HTMX inserts it into the #result div.

Conclusion:

This architecture, using HTMX, achieves zero JSON by relying on server-side rendering and the natural flow of HTTP, focusing entirely on HTML fragments for communication between the server and the client. It’s an efficient way to create interactive, dynamic web applications without the overhead and complexity of JSON or client-side JavaScript frameworks. (Although the htmx client side is some javascript code.)