HTMX öğrenmeye değer mi?
Bazen sana da javascriptden gına gelmiyor mu? Gelmiyor mu? E dağılalım ozaman… Çünkü htmx ‘in hedefi tam olarak, yazdığımız javascript miktarını frontend için kaldırmak ya da daha gerçekçi bir ihtimalle azaltmak.
Bu kutsal görevi gerçekleştirirken, öğrenmesi kolay bir syntax ve geliştirme ortamına eklenmesi çok kolay kütüphane ile karşımıza çıkıyor.
Nasıl ekleniyor
Son dökümana bu linkle tıklayarak ulaşabilirsin ama özetle html sayfamızın body tagının en altında bir yere CDN eklememiz yeterli.
<script src="https://unpkg.com/htmx.org@2.0.4/dist/htmx.js" integrity="sha384-oeUn82QNXPuVkGCkcrInrS1twIxKhkZiFfr2TdiuObZ3n3yIeMiqcRzkIcguaof1" crossorigin="anonymous"></script>
Tabi performans gibi etmenleri değerlendirerek kendin de zip dosyasını indirip host edebilirsin. En nihayetinde bir js kütüphanesi bu arkadaş
Kod yapısı
Ee! Ekledik js kodunu, ne değişti hayatımızda, karnımız mı doydu? Dur iki dakika kod yazalım önce. Yapacağımız örnek içerisinde mesela bir apimiz olsun;
POST /api/articles
uç noktamıza bir istekte bulunup, dönen cevaptaki html biçimindeki article-card öğelerini content idli html elementimizin için basacağımızı düşün. Bu işlemi hem JS ile hem de HTMX ile yapalım.
<html>
<head>
<body>
<div id="content"></div>
</body>
</html>
Bu html sayfamızın bir özeti olsun.
JavaScript Versionu
function async loadArticles() {
try {
const res = await fetch("/api/articles", {
method: "POST"
})
const data = await res.text()
document.getElementById("content").innerHTML = data
} catch(e) {
console.log(e)
}
}
document.addEventListener("DOMContentLoaded",()=>{
loadArticles()
})
Alışık olduğumuz fetch kütüphanesi, bir problem yok. DOMContentLoaded eventi içerisinde, yazdığımız fonksiyonun çalışmasını sağlıyoruz. Badabum badabang, javascript içeriğimizi dolduruyor.
HTMX versionu
Aynı işlevi htmx ile yaparken, bir script yazmamıza gerek yok. tek yapacağımıza, ilgili divi biraz düzenlemek olacak
<html>
<head>
<body>
<div id="content" hx-post="/api/articles" hx-trigger="load"></div>
</body>
</html>
Burada eklediğimiz iki yeni etiket özelliği görüyoruz. hx-post ve hx-trigger. Bunlar bize htmx ile gelen hypertext attributeleri. hx-post, hx-get, hx-put, hx-patch gibi kullanabileceğimiz httpd request tiplerini doğrudan kısaca, içlerinde uç noktaların adresini yazarak kullanabiliyoruz. hx-get=“/index.php” yazarken, GET olarak /index.php sayfanın içeriğini çekersin. bu kadar kolay
hx-trigger ise, bu post get vs gibi requestlerin ne zaman ateşleneceğini belirler. Biz örneğimizde load ifadesini kullandık. DOMContentLoaded ‘da olduğu gibi, sayfa yüklendiğinde ateşle dedik.
Elbette tıklandığında, özel eventlerde ya da manual ateşleme kullanılmak istendiğinde de ayarlayabiliyoruz.
Sonuç
HTMX sofraya yepyeni bir içerik getiriyor mu? Gördüğün gibi hayır ama öte yandan tailwind de aynı şekilde. Buradaki amaç, düzenlemesi, geliştirmesi ve bakımı daha kolay kod yapıları oluştururken performanstan ödün vermemek.
İşin performans yanına gelirsek, bir framework ile kıyaslanmayan bir hızda çalışıyor. Tek bir js kütüphanesi olduğu için, native javascript hızında kolayca kod yazılabiliyor.
JS ve htmx versionlarının arasında kod kısalığını sen de farkettin. Haliyle sonuç olarak, daha rahat okunabilir ve düzenlenebilir kodlar üretmiyor oluyoruz.
Yine de js den tamamen kurtulmak gibi bir durum yok. Her halükarda jsyi a dan z ye öğrenip, kullanmak gerekiyor fakat htmx ile kombinleyince, kod hamallığını azaltabiliyoruz.