htmx nima va qachon JS-freymvork kerak emas

Qisqa javob

htmx — HTML’ni hx-get va hx-post kabi atributlar bilan kengaytiradigan kichik JavaScript kutubxonasi. Istalgan element serverga so‘rov yuborishi mumkin, javob esa — tayyor HTML bo‘lagi — sahifaning kerakli joyiga qo‘yiladi.

«Server JSON beradi, klient interfeysni chizadi» sxemasi o‘rniga «server HTML beradi, brauzer uni joylaydi» sxemasi ishlaydi. Buni hypermedia-driven yondashuv deyishadi: holat va mantiq serverda qoladi, klient kodi deyarli yo‘q.

Agar interfeys asosan formalar, ro‘yxatlar, jadvallar, filtrlar va kartochkalardan iborat bo‘lsa va ma’lumotlar baribir serverda yashasa, JS-freymvork kerak emas.

Qanday ishlaydi

Asosiy atributlar:

• hx-get, hx-post, hx-put, hx-delete — qanday so‘rov yuborish;
• hx-trigger — qaysi hodisada (bosish, kiritish, aylantirish);
• hx-target — javobni qayerga qo‘yish;
• hx-swap — qanday qo‘yish: ichini almashtirish, butun elementni, oxiriga qo‘shish;
• hx-indicator — yuklanish paytida nimani ko‘rsatish.

Backend istalgan bo‘lishi mumkin: Django, Laravel, Rails, Go, Node.js, ASP.NET. U klassik saytdagidek shablonlarni render qiladi, faqat ba’zan butun sahifani emas, uning bir bo‘lagini qaytaradi.

Odatiy ssenariylar

Qayta yuklanmaydigan forma

<form hx-post="/contacts" hx-target="this" hx-swap="outerHTML">
  <input name="email" type="email" required>
  <button>Yuborish</button>
</form>

Server ma’lumotlarni tekshiradi va xatolari bor formani yoki muvaffaqiyat xabarini qaytaradi. Validatsiya bitta joyda — serverda yashaydi.

Jonli qidiruv

<input type="search" name="q"
       hx-get="/search"
       hx-trigger="input changed delay:300ms"
       hx-target="#results">
<div id="results"></div>

So‘rov yozishdagi qisqa pauzadan keyin yuboriladi, server esa natijalarning tayyor ro‘yxatini qaytaradi.

Sahifalash va cheksiz aylantirish

<tr hx-get="/orders?page=2"
    hx-trigger="revealed"
    hx-swap="afterend">
  <td>Yuklanmoqda...</td>
</tr>

Qator ekranda paydo bo‘lganda keyingi qism yuklanadi. Oddiy sahifalash uchun «Yana» tugmasidagi hx-get va brauzerdagi manzilni yangilash uchun hx-push-url yetarli.

htmx va SPA freymvorklar

htmx qachon yaxshi tanlov

• jadval va formalarga boy admin panellar, CRM, ichki tizimlar;
• loyiha allaqachon shablonli server freymvorkida;
• ikki ilovani — API va SPA’ni qo‘llab-quvvatlashni istamaydigan kichik jamoa;
• mavjud ko‘p sahifali saytni qayta yozmasdan «jonlantirish» kerak.

Cheklovlar qayerda boshlanadi

• Boy klient interfeys: grafik muharrirlar, sudrab o‘tkaziladigan kanban, lokal holatga ega murakkab dashboardlar.
• Oflayn va beqaror tarmoq: har bir harakat server javobini talab qiladi.
• Mobil ilova va uchinchi tomon klientlari: ularga baribir JSON API kerak va uni alohida qilishga to‘g‘ri keladi.
• Mayda klient mantiq, masalan menyuni ochish — buning uchun htmx yoniga odatda Alpine.js kabi yengil kutubxona yoki bir necha qator oddiy JavaScript qo‘shiladi.

Odatiy xatolar

• htmx’da SPA’ni takrorlashga urinish: murakkab holatni DOM’da saqlash va o‘nlab atributlarni bog‘lash.
• Bo‘lak o‘rniga butun sahifani qaytarish — sekin va maketni buzadi.
• Xavfsizlikni unutish: shablonlar foydalanuvchi kiritgan ma’lumotni ekranlashi, POST so‘rovlar esa CSRF’dan himoyalangan bo‘lishi kerak.