• [^] # Re: htmx sucks

    Posté par (site web personnel) . En réponse au lien htmx 2.0. Évalué à 4.

    Si on se mets à écrire : [...] C'est que l'on n'a rien compris à HTMX.

    Pour information, c'est ce que j'avais tendance à faire à mes débuts avec HTMX.

    Je venais de passer 5 ans à splitter un backend monolithe en architecture micro service. Et j'étais hypé par la notion de "micro frontend", et je comprenais pas qu'on parlait de "micro frontend" pour des applications React/Vue, qui me semblaient être des monolithes modulaires (je n'ai rien contre cette architecture).

    Ma première impression de HTMX fut donc de fournir des bouts de frontend en provenance de serveurs distincts.

    Je vous dis pas la monstruosité d'over-enginering que j'avais pondu à l'époque (circa 2021, bien avant la hype récente de HTMX). Les bugs d'affichage impossible à debugguer car j'avais foutu un <body hx-boost="true">.

    En gros, j'essayais de faire une SPA (Single Page Application) avec HTMX, et c'est clairement pas le but du projet.

    Bref, j'avais rien compris à HTMX.

    Ensuite j'ai pris du recul, j'ai refait du Django sans API REST/JSON, template côté serveur, et tout le tralala.

    Et puis les rares moments ou je me suis dit "tiens, ça serait bien que le serveur puisse m'envoyer un peu de HTML à rajouter ici", c'est là que HTMX est venu à mon aide.

    Un cas d'usage que j'apprécie tout particulièrement désormais : Un système de notification.

    Faites un endpoint SSE (Server Sent Event) côté serveur, qui envoit le contenu suivant :

    event: notify
data: <p>some HTML for a notification</p>

    Côté client :

    <div class="notification-container" hx-ext="sse" sse-connect="/path/to/sse/endpoint" sse-swap="notify"></div>

    De la même manière, on peut créer un système de chat assez simplement :

    <div class="chat-container" hx-ext="sse" sse-connect="/path/to/sse">
 <div class="history" sse-swap="message"></div>
 <form hx-post="/send_message" hx-trigger="submit">
 <input name="message">
 <button type="submit">Send</button>
 </form>
</div>

    https://link-society.com - https://kubirds.com - https://github.com/link-society/flowg