🗺️ Paradigma SPA com JSON vs Server-Driven UI com HTMX

flowchart TD
    subgraph SPA ["1. Modelo Tradicional de SPA (JSON Over the Wire)"]
        direction LR
        S_CLI["Cliente: Roteador JS, State, Parsing JSON, Re-render Virtual DOM 📱"]
        <-->|Trafega JSON| S_SRV["Servidor: Serialização de DTOs REST ⚙️"]
    end

    subgraph HTMX_FLOW ["2. Server-Driven UI com HTMX (HTML Over the Wire)"]
        direction LR
        H_CLI["Cliente: Atributos Declarativos (hx-get, hx-swap) 🚀"]
        <-->|Trafega Fragmento HTML Renderizado| H_SRV["Servidor: Spring Boot / Thymeleaf / FastAPI Jinja2 🍃"]
    end

    style SPA fill:#ffebee,stroke:#d32f2f,stroke-width:1.5px
    style HTMX_FLOW fill:#00897b,stroke:#004d40,stroke-width:2px,color:#ffffff

📖 Fundamentos e Aplicação

O movimento HTML over the wire (HOTW) e bibliotecas como HTMX revolucionaram o desenvolvimento Full Stack ao permitir criar interfaces dinâmicas, reativas e com experiência de SPA sem a necessidade de construir clientes JavaScript massivos, roteadores no navegador ou manter schemas duplicados de estado.

1. Como Funciona o HTMX:

  • Estende o HTML para que qualquer elemento possa disparar requisições HTTP (não apenas <a> e <form>).
  • Atributos principais: hx-get, hx-post, hx-target (onde injetar a resposta), hx-swap (como substituir: innerHTML, outerHTML, beforeend), hx-trigger.

2. Integração com Motores de Templates de Servidor:

  • Java / Spring Boot + Thymeleaf: Retorno de fragmentos com th:fragment.
  • Python / FastAPI + Jinja2: Renderização parcial de templates com Jinja2Templates.