Htmx este poate unul din cele mai interesante proiecte open-source de anul acesta. Htmx este o librărie de dezvoltare web folosind doar HTML. Oferă AJAX requests, tranziții CSS, WebSockets și Server Sent Events direct în HTML folosind doar atribute, este un HTML pe steroizi. Mai multe despre motivația din spatele creării acestei librării găsiți pe pagina oficială htmx.

Caracteristici

• Htmx este mic, htmx.min.js are ~45kb
• Instalează cu un simplu npm install htmx.org, folosind CDN <script src="https://unpkg.com/htmx.org@1.9.2"></script> sau descărcând direct o copie.
• Extrem de simplu de utilizat, reduce semnificativ complexitatea.
• Htmx este scris în Javascript :D

Exemple

  <script src="https://unpkg.com/htmx.org@1.9.6"></script>
  <!-- have a button POST a click via AJAX -->
  <button hx-post="/clicked" hx-swap="outerHTML">
    Click Me
  </button>

Atunci când utilizatorul apasă butonul, un request AJAX este trimis iar butonul este înlocuit cu conținutul răspunsului.

<div hx-get="/latest-scores" hx-trigger="every 10s" hx-target="#scoreDisplay">
    <span id="scoreDisplay">Starting Score</span>
</div>

Autoupdate-uri. La fiecare 10 secunde, html-ul ce reprezintă scorul este actualizat.

<div hx-get="/load-content" hx-trigger="click" hx-indicator="#spinner">
  Click to Load
</div>
<div id="spinner" class="hidden">
  Loading...
</div>

Htmx se integreză ușor cu CSS. Atributul hx-indicator e folosit pentru a afișa o animație CSS.

Concluzie

Htmx ușurează munca pe frontend în special pentru frameworkuri ca Django, FastAPI, Flask care depind de alte librării pentru partea de frontend, nemai fiind nevoie să înveți Vue sau React ca să scrii funcționalitate web minimală.

Lista de framework-uri care pot să beneficieze de htmx este în continuă creștere și nu se oprește la cele din limbaje ca Python sau Java.

Codul sursă se găseste ca de obicei pe pagina de Github a proiectului.

Succes!