Cuprins
Legături rapide
Recomandări cheie
- htmx este o bibliotecă JavaScript care simplifică gestionarea cererilor HTTP, făcând disponibile funcționalități comune prin atributele HTML.
- Îl puteți adăuga cu ușurință în aplicația dvs. web cu un link către scriptul htmx pe un CDN.
- Puteți folosi htmx pentru interacțiuni precum paginarea, validarea formularelor și editarea inline, fără a scrie JavaScript.
Comunitatea de dezvoltare web a fost recent plină de discuții despre htmx, dar ce este această nouă tehnologie interesantă? Se pare că este mult mai simplu decât v-ați aștepta, dar utilitatea lui htmx poate justifica hype-ul.
Ce este htmx?
htmx este o mică bibliotecă JavaScript cu un focus restrâns. Face disponibilă funcționalitatea JavaScript comună prin atribute HTML. Iată un exemplu simplu:
<a href="https://wilku.top/about" hx-get="https://wilku.top/about">About</a>
Acest cod arată un atribut HTML personalizat, hx-get. Dacă faceți clic pe acest link, biblioteca htmx va trimite o solicitare AJAX și va încărca pagina țintă fără o reîmprospătare completă a browserului.
htmx are o funcționalitate suplimentară care vă permite să trimiteți solicitări:
- Din alte elemente decât a și formă.
- În alte evenimente decât faceți clic și trimiteți.
- Folosind alte metode HTTP decât GET și POST.
- Care înlocuiesc orice parte a unei pagini, mai degrabă decât întreaga chestie.
Deși htmx are suport pentru tehnologii precum animația CSS și WebSockets, scopul său principal este de a simplifica gestionarea cererilor HTTP.
Cum puteți utiliza htmx într-o aplicație web simplă
htmx abordează funcționalitatea specifică din aplicațiile web sau site-urile web, mai degrabă decât comportamentul unei întregi aplicații.
Un mare avantaj al bibliotecii este cât de ușor este să începeți să utilizați. Puteți descărca și instala o copie dacă doriți, dar, deoarece nu are dependențe, tot ce trebuie să faceți pentru a începe este să adăugați un link către script pe un CDN:
<script
src="https://unpkg.com/[email protected]"
integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
crossorigin="anonymous"></script>
Pentru dezvoltarea și testarea locală, va trebui să configurați un server web, cum ar fi Apache, dacă nu aveți deja unul care rulează. Aceasta este o cerință, chiar dacă doar experimentați cu fișiere statice, deoarece protocolul fișier: nu permite solicitări AJAX.
Un exemplu simplu de utilizare a derulării infinite
Derularea infinită este o tehnică comună pe care site-urile precum Twitter o folosesc pentru fluxul lor. Când ajungeți la capătul unei liste, derularea infinită încarcă mai multe articole pentru ca dvs. să continuați să citiți.
Această caracteristică necesită în mod natural JavaScript pentru a verifica poziția de defilare a paginii și pentru a încărca elementele noi fără a reîmprospăta pagina. Dar htmx poate face toate acestea pentru tine.
Luați următorul marcaj care reprezintă o listă de postări, folosind 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>
Imaginați-vă că aveți aceste elemente într-un fișier, feed1.html, cu mai multe articole în feed2.html etc. Fiecare pagină va afișa apoi un mic subset de elemente în care puteți derula:
Acum, puteți folosi link-urile „pagina următoare” pentru a vă deplasa de la o pagină la alta, dar puteți implementa și derularea infinită cu ușurință. Schimbați articolul final în:
<li hx-trigger="revealed" hx-get="feed2.html" hx-select="li" hx-swap="afterend">
<img src="http://placekitten.com/300/200" />
</li>
Adăugarea acestor patru atribute la articolul final din listă implementează derularea infinită. Iată ce înseamnă fiecare atribut:
|
Atribut |
Valoare |
Sens |
|---|---|---|
|
hx-trigger |
dezvăluit |
Când acest element apare pentru prima dată pe ecran… |
|
hx-get |
feed2.html |
… trimiteți o solicitare GET către feed2.html, … |
|
hx-select |
li |
… selectați elementele li din răspuns, … |
|
hx-swap |
după sfârșit |
… și adăugați-le după acest element. |
Pe măsură ce derulați în partea de jos a listei, observați cum pagina încarcă automat conținut nou. Puteți confirma acest lucru observând bara de derulare și verificând instrumentele de dezvoltare ale browserului dvs.:
Rețineți că, cu această configurare simplă a paginii statice, pagina feed2.html include un articol final cu un atribut hx-get setat la feed3.html și așa mai departe. De asemenea, rețineți că htmx a adăugat un ascultător pentru evenimentul de defilare.
Alte utilizări potențiale pentru htmx
Puteți utiliza htmx pentru multe alte interacțiuni comune, inclusiv:
- Paginare: încărcați și înlocuiți articole atunci când vizitatorul face clic pe un link de paginare.
- Validarea formularului: la trimitere, înlocuiți un formular fie cu un mesaj de confirmare, fie cu un subset al formularului.
- Bare de progres: actualizați periodic valoarea unei bare de progres pe baza unui răspuns ping.
- Editare în linie: înlocuiți un element cu o zonă de text care conține valoarea acelui element.
Este posibil să construiți fiecare dintre aceste exemple folosind JavaScript standard, htmx doar face procesul mult mai ușor.
Beneficiile și dezavantajele htmx
Beneficii
htmx poate simplifica foarte mult interacțiunile obișnuite care pot beneficia de multe aplicații web și chiar de multe site-uri web. Permite designerilor și altor persoane care lucrează cu pagini web front-end să adauge funcționalități fără a fi nevoie să învețe JavaScript.
Prin abstracția comportamentului comun, htmx asigură coerența proiectelor dvs. și între ele. Derularea infinită se va comporta la fel de la o pagină la alta, indiferent de cine a implementat-o.
Deoarece subliniază 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 raționat.
Dezavantaje
Deși htmx vă poate lăsa să uitați de JavaScript în multe contexte, nu poate rezolva orice problemă pentru dvs.! În continuare va trebui să scrieți cod pentru a gestiona logica de afaceri specifică și mai multe funcționalități de nivel scăzut.
Deoarece htmx lucrează mult pentru dvs., există mai puțin potențial de personalizare a comportamentului. Acesta va fi adesea un compromis pozitiv, dar va trebui să fiți pregătit să predați controlul.
html vă poate permite să evitați să scrieți JavaScript, dar ar trebui să fiți totuși conștienți de faptul că codul JavaScript rulează în fundal. Ați putea fi tentat să utilizați atributul hx-get pe fiecare link, în locul unui atribut href. Dar aceasta introduce o dependență de JavaScript; dacă codul nu rulează din orice motiv, utilizatorii tăi vor rămâne cu un link care nu face nimic. Ar trebui să practicați întotdeauna îmbunătățirea progresivă pentru a preveni acest lucru.