Brzi Linkovi
Ključne Tačke
- HTMX je JavaScript biblioteka koja pojednostavljuje manipulaciju HTTP zahtevima, čineći uobičajenu funkcionalnost dostupnom preko HTML atributa.
- Lako se može integrisati u vašu web aplikaciju putem linka do HTMX skripte sa CDN-a.
- HTMX omogućava interakcije kao što su paginacija, validacija formi i inline editovanje, bez potrebe za pisanjem JavaScript koda.
U poslednje vreme, web razvojna zajednica je preplavljena diskusijama o HTMX-u. Šta je to tačno što ovu tehnologiju čini toliko intrigantnom? Ispostavlja se da je daleko jednostavnija nego što se čini, a njena korisnost opravdava interesovanje koje izaziva.
Šta je HTMX?
HTMX je kompaktna JavaScript biblioteka sa jasno definisanim ciljem. Ona olakšava upotrebu uobičajenih JavaScript funkcija putem HTML atributa. Evo jednog kratkog primera:
<a href="https://wilku.top/about" hx-get="https://wilku.top/about">O nama</a>
U navedenom kodu, možete primetiti prilagođeni HTML atribut, hx-get. Kada se klikne na ovaj link, HTMX biblioteka šalje AJAX zahtev i učitava ciljanu stranicu bez potpunog osvežavanja pregledača.
HTMX ima dodatne mogućnosti koje omogućavaju slanje zahteva:
- Sa elemenata koji nisu <a> i <form>.
- Na osnovu različitih događaja osim klika i slanja.
- Korišćenjem HTTP metoda koje nisu GET i POST.
- Zamenom samo određenih delova stranice, a ne cele.
Iako HTMX pruža podršku za tehnologije poput CSS animacija i WebSocket-a, primarni cilj mu je pojednostavljenje manipulacije HTTP zahtevima.
Kako se HTMX može primeniti u jednostavnoj web aplikaciji
HTMX se fokusira na specifične funkcionalnosti unutar web aplikacija ili web sajtova, a ne na celokupno ponašanje aplikacije.
Velika prednost biblioteke leži u jednostavnosti njenog korišćenja. Možete preuzeti i instalirati lokalnu kopiju, ako želite, ali s obzirom na to da ne zavisi od drugih biblioteka, dovoljno je dodati link do skripte na CDN-u:
<script src="https://unpkg.com/[email protected]" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>
Za lokalni razvoj i testiranje, potrebno je imati podešen web server, kao što je Apache, ukoliko ga već nemate. Ovo je uslov, čak i kada eksperimentišete sa statičkim datotekama, jer protokol file: ne podržava AJAX zahteve.
Jednostavan primer korišćenja beskonačnog skrolovanja
Beskonačno skrolovanje je uobičajena tehnika koju koriste sajtovi poput Twittera za svoje feedove. Kada dođete do kraja liste, beskonačno skrolovanje učitava dodatne stavke kako biste mogli nastaviti čitati.
Ova funkcionalnost prirodno zahteva JavaScript za praćenje pozicije skrolovanja stranice i učitavanje novih stavki bez osvežavanja. Međutim, HTMX može obaviti sve ovo umesto vas.
Razmotrite sledeći kod koji predstavlja listu postova, sa slikom za svaki:
<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>
Zamislite da su ove stavke smeštene u datoteci, feed1.html, dok se dodatne stavke nalaze u feed2.html, itd. Svaka stranica bi tada prikazivala mali podskup stavki kroz koje možete da se krećete:
Sada možete koristiti linkove „sledeća stranica“ za navigaciju između stranica, ali možete jednostavno implementirati i beskonačno skrolovanje. Potrebno je samo promeniti poslednju stavku na sledeći način:
<li hx-trigger="revealed" hx-get="feed2.html" hx-select="li" hx-swap="afterend"> <img src="http://placekitten.com/300/200" /> </li>
Dodavanje ova četiri atributa na poslednju stavku liste implementira beskonačno skrolovanje. Evo objašnjenja svakog atributa:
|
Atribut |
Vrednost |
Značenje |
|---|---|---|
|
hx-trigger |
revealed |
Kada se ovaj element prvi put pojavi na ekranu… |
|
hx-get |
feed2.html |
…pošalji GET zahtev na feed2.html, … |
|
hx-select |
li |
…izaberi li elemente iz odgovora, … |
|
hx-swap |
afterend |
…i dodaj ih nakon ovog elementa. |
Dok skrolujete do dna liste, možete primetiti kako se automatski učitava novi sadržaj. Ovo možete potvrditi praćenjem skrol bara i proverom alatki za razvojne programere vašeg pregledača:
Važno je napomenuti da u ovom jednostavnom primeru statičkih stranica, stranica feed2.html sadrži poslednju stavku sa atributom hx-get postavljenim na feed3.html, i tako dalje. Takođe, obratite pažnju da je HTMX dodao osluškivač za događaj skrolovanja.
Druge potencijalne primene HTMX-a
HTMX se može koristiti za mnoge druge uobičajene interakcije, uključujući:
- Paginacija: učitavanje i zamena stavki kada posetilac klikne na link za paginaciju.
- Validacija forme: prilikom slanja, zamena forme ili poruke o potvrdi ili podskupa forme.
- Trake napretka: periodično ažuriranje vrednosti trake napretka na osnovu ping odgovora.
- Inline editovanje: zamena elementa tekstualnim poljem koje sadrži vrednost tog elementa.
Iako je moguće ostvariti sve ove primere pomoću standardnog JavaScript-a, HTMX proces čini znatno jednostavnijim.
Prednosti i mane HTMX-a
Prednosti
HTMX može uveliko pojednostaviti uobičajene interakcije koje su korisne za mnoge web aplikacije, pa čak i mnoge web sajtove. On omogućava dizajnerima i drugim osobama koje rade sa front-end web stranicama da dodaju funkcionalnost bez potrebe za učenjem JavaScript-a.
Apstrahovanjem uobičajenog ponašanja, HTMX pruža doslednost u vašim projektima i između njih. Beskonačno skrolovanje će se ponašati na isti način od stranice do stranice, bez obzira ko ga je implementirao.
S obzirom da naglašava deklarativni (šta) pristup, a ne imperativni (kako) pristup, funkcionalnost HTMX-a je obično lakša za razumevanje i rasuđivanje.
Mane
Iako HTMX omogućava da zaboravite na JavaScript u mnogim situacijama, on ne može rešiti svaki problem umesto vas! I dalje ćete morati da pišete kod za rukovanje specifičnom poslovnom logikom i složenijim funkcionalnostima.
Budući da HTMX obavlja dosta posla za vas, postoji manje mogućnosti za prilagođavanje ponašanja. Ovo će često biti pozitivan kompromis, ali morate biti spremni da prepustite kontrolu.
HTMX vam može omogućiti da izbegnete pisanje JavaScript-a, ali i dalje morate biti svesni da JavaScript kod radi u pozadini. Možda ćete biti u iskušenju da koristite atribut hx-get na svakom linku umesto atributa href. Međutim, ovo uvodi zavisnost od JavaScript-a; ako kod ne uspe da se pokrene iz bilo kog razloga, vašim korisnicima će ostati link koji ne funkcioniše. Uvek treba primenjivati progresivno poboljšanje kako biste ovo sprečili.