Navigare rapidă
Puncte esențiale
- htmx este o bibliotecă JavaScript care simplifică modul în care sunt gestionate cererile HTTP, facilitând utilizarea unor funcții comune prin intermediul atributelor HTML.
- Integrarea în aplicația web se face simplu, printr-un link către scriptul htmx găzduit pe un CDN.
- Cu htmx, interacțiuni precum paginarea, validarea formularelor și editarea inline devin accesibile fără a mai fi nevoie să scrieți cod JavaScript.
În ultima vreme, comunitatea de dezvoltatori web este captivată de discuțiile despre htmx. Dar ce este mai exact această tehnologie nouă? Se pare că este mult mai accesibilă decât te-ai aștepta, iar funcționalitatea oferită de htmx justifică entuziasmul din jurul său.
Ce este htmx?
htmx este o bibliotecă JavaScript de dimensiuni reduse, axată pe un scop bine definit. Ea permite accesarea unor funcționalități JavaScript comune direct prin atributele HTML. Iată un exemplu simplu:
<a href="https://wilku.top/about" hx-get="https://wilku.top/about">Despre</a>
În acest exemplu, observăm un atribut HTML personalizat, hx-get. Când utilizatorul face clic pe acest link, biblioteca htmx inițiază o cerere AJAX și încarcă pagina țintă fără a reîmprospăta întreaga pagină.
htmx oferă și alte funcționalități care permit trimiterea cererilor:
- De la alte elemente decât <a> și <form>.
- În funcție de alte evenimente decât click și submit.
- Utilizând metode HTTP diferite de GET și POST.
- Care înlocuiesc doar o parte a paginii, nu întreaga pagină.
Deși htmx oferă suport pentru tehnologii precum animațiile CSS și WebSockets, principalul său scop este de a simplifica gestionarea cererilor HTTP.
Cum poți folosi htmx într-o aplicație web simplă
htmx se concentrează pe anumite funcționalități ale aplicațiilor web sau site-urilor web, mai degrabă decât pe comportamentul întregii aplicații.
Un avantaj major al acestei biblioteci este simplitatea cu care poate fi integrată. O poți descărca și instala, dar, pentru că nu are dependențe, tot ce trebuie să faci pentru a începe este să adaugi un link către scriptul de pe un CDN:
<script
src="https://unpkg.com/[email protected]"
integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
crossorigin="anonymous"></script>
Pentru dezvoltare și testare locală, va trebui să configurezi un server web, cum ar fi Apache, dacă nu ai deja unul. Este necesar chiar și pentru experimentarea cu fișiere statice, deoarece protocolul file: nu permite cereri AJAX.
Un exemplu simplu folosind derularea infinită
Derularea infinită este o tehnică frecvent utilizată de site-uri precum Twitter pentru fluxul lor de conținut. Când ajungi la sfârșitul unei liste, derularea infinită încarcă mai multe elemente pentru a continua navigarea.
Această funcționalitate necesită în mod normal JavaScript pentru a monitoriza poziția de defilare a paginii și pentru a încărca noi elemente fără a reîmprospăta pagina. Însă, htmx poate gestiona toate acestea pentru tine.
Să presupunem că avem următoarea structură HTML, care reprezintă o listă de postări, folosind câte o imagine pentru fiecare:
<ol>
<li><img src="http://placekitten.com/420/300" /></li>
<li><img src="http://placekitten.com/400/320" /></li>
<li><img src="http://placekitten.com/440/300" /></li>
<li><img src="http://placekitten.com/420/340" /></li>
<li><img src="http://placekitten.com/300/200" /></li>
</ol>
Imaginează-ți că aceste elemente se află într-un fișier, feed1.html, iar mai multe elemente sunt în feed2.html, și așa mai departe. Fiecare pagină va afișa un mic subset de elemente, pe care le poți parcurge prin derulare:
Poți naviga între pagini cu link-uri „pagina următoare”, dar poți implementa și derularea infinită foarte ușor. Trebuie doar să modifici ultimul element al listei în:
<li hx-trigger="revealed" hx-get="feed2.html" hx-select="li" hx-swap="afterend">
<img src="http://placekitten.com/300/200" />
</li>
Adăugând aceste patru atribute ultimului element din listă, implementezi derularea infinită. Iată semnificația fiecărui atribut:
|
Atribut |
Valoare |
Semnificație |
|---|---|---|
|
hx-trigger |
revealed |
Când acest element devine vizibil pe ecran… |
|
hx-get |
feed2.html |
… trimite o solicitare GET către feed2.html, … |
|
hx-select |
li |
… selectează elementele <li> din răspuns, … |
|
hx-swap |
afterend |
… și le adaugă după acest element. |
Când derulezi până la capătul listei, vei observa că pagina încarcă automat conținut nou. Poți confirma acest lucru observând bara de derulare și verificând instrumentele de dezvoltare ale browserului:
Reține că, în această configurare simplă de pagină statică, pagina feed2.html include un ultim element <li> cu atributul hx-get setat la feed3.html, și așa mai departe. De asemenea, reține că htmx a adăugat un ascultător pentru evenimentul de defilare.
Alte utilizări potențiale pentru htmx
htmx poate fi utilizat pentru multe alte interacțiuni uzuale, inclusiv:
- Paginare: încarcă și înlocuiește elemente când vizitatorul face clic pe un link de paginare.
- Validarea formularelor: la trimitere, înlocuiește formularul fie cu un mesaj de confirmare, fie cu o parte a formularului.
- Bare de progres: actualizează periodic valoarea unei bare de progres pe baza unui răspuns ping.
- Editare inline: înlocuiește un element cu o zonă text care conține valoarea acelui element.
Deși fiecare dintre aceste exemple poate fi implementată folosind JavaScript standard, htmx simplifică considerabil procesul.
Avantajele și dezavantajele htmx
Avantaje
htmx poate simplifica semnificativ interacțiunile comune care sunt utile pentru multe aplicații web și chiar și pentru site-uri web. Permite designerilor și altor persoane care lucrează cu paginile web front-end să adauge funcționalități fără a fi nevoie să învețe JavaScript.
Prin abstractizarea comportamentelor comune, htmx asigură coerența proiectelor, atât individual, cât și între ele. Derularea infinită se va comporta la fel de la o pagină la alta, indiferent de cine a implementat-o.
Pentru că pune accent pe o abordare declarativă (ce), mai degrabă decât una imperativă (cum), funcționalitatea htmx este, de obicei, mai ușor de înțeles și de gestionat.
Dezavantaje
Deși htmx te poate face să uiți de JavaScript în multe contexte, nu poate rezolva toate problemele! Vei avea nevoie în continuare de cod pentru a gestiona logica specifică de business și alte funcționalități de nivel scăzut.
Deoarece htmx face multe în locul tău, există mai puțin potențial de personalizare a comportamentului. De cele mai multe ori, acesta este un compromis acceptabil, dar trebuie să fii pregătit să renunți la control.
htmx te poate ajuta să eviți scrierea codului JavaScript, dar trebuie să fii conștient că totuși cod JavaScript rulează în fundal. Poți fi tentat să folosești atributul hx-get pentru fiecare link, în loc de atributul href. Însă, acest lucru introduce o dependență de JavaScript. Dacă codul nu rulează, din orice motiv, utilizatorii vor rămâne cu un link nefuncțional. Ar trebui să aplici întotdeauna principiul îmbunătățirii progresive pentru a preveni aceste situații.