İlk karşılaştığımda çok şaşırdığım bir kütüphane olan htmx, HTML’i ciddi anlamda bir üst noktaya taşımanız konusunda size oldukça geniş bir yelpazede araçlar sunuyor.
Hepimiz biliyoruz ki HTML yani Hypertext Markup Language çok interaktif bir dil değil. Daha etkileşimli bir içeriğe sahip olmak için JavaScript kullanmamız gerektiğini biliyoruz. İşte burada htmx devreye giriyor.
htmx doğrudan HTML kodlarının içerisinde, HTML niteliği (attribute) olarak komutlar girmenizi ve AJAX, CSS Geçişleri, Web Soketleri ve Server Sent Events (web soketleri gibi, fakat sadece sunucu istemciye bilgi gönderebiliyor, istemci sunucuya herhangi bir bilgi gönderemiyor, abonelik gibi düşünebiliriz bunu) gibi pek çok şeyi destekleyip, tek satır JavaScript kodu yazmadan istediğiniz şeyleri hızlı ve pratik olarak yapmanıza olanak tanır. Aynı zamanda jQuery gibi 3. Parti bir kütüphaneye de bağımlılığı bulunmaz. Hadi hazırsanız, htmx hakkında daha fazla şey öğrenelim…
HTMX Nedir?
HTMX – HTML’e JavaScript gibi bir dil kullanmadan, HTML Nitelikleri kullanarak daha fazla özellik kazandırmayı sağlayan bir kütüphanedir. Ana sayfalarında htmx ile ilgili şu şekilde bahsedilir;
htmx AJAX, CSS Geçişleri, Web Soketleri ve Sunucu Taraflı Gönderimlere doğrudan HTML içerisinden, nitelikleri kullanarak erişim imkanı tanır, bu sayede hiper textin gücünü ve kolaylığını kullanarak modern kullanıcı arayüzleri tasarlayabilirsiniz.
htmx Küçüktür (sıkıştırılmış olarak yaklaşık ~12k min.gz), 3. parti bağımlılığı yoktur, geliştirilebilir, IE11 uyumludur ve react ile kıysalandığında %67’ye kadar daha az kod yazmanıza olanak sağlar.
Motivasyon
- Neden sadece <a> ve <form> etiketleri HTTP istekleri gerçekleştirebilsin?
- Neden sadece tıklama & gönderme etkinlikleri bu istekleri tetikleyebilsin?
- Neden sadece GET & POST metodları kullanılabilsin?
- Neden bir istekte sadece bütün ekranı değiştirebilesiniz?
Bu bağlamlardan kurtularak, htmx HTML’i hypertext olarak tamamlamaktadır.
htmx.org ana sayfa kısmi çevirisi
Daha Açık Konuşmak Gerekirse?
Sadece HTML kodları kullanarak; GET, POST gibi isteklerin yanında; PUT, PATCH, DELETE gibi pek çok isteği sayfa yenilemesine gerek duymadan gerçekleştirebilirsiniz. Kolayca Web Soket bağlantısı kurabilir; oldukça interaktif ve spesifik AJAX istekleri gerçekleştirebilirsiniz.
Örneğin; htmx ile yazarken arama özelliğini devreye almak için 3-4 satır HTML kodu yazmak yeterli. Veya bir div üzerine fare ile gelindiği zaman bir AJAX isteği yapılmasını sağlayabilirsiniz. Bütün bu isteklerin, ne zaman; nasıl; hangi verilerle; ne sıklıkla (evet, düzenli istekler de yapabiliyorsunuz) yapılacağını seçebiliyorsunuz. Aynı zamanda sadece HTML nitelikleri ile işlem yapmak istemiyorum, tam kontrol sahibi olmak istiyorum diyorsanız, elinizi kirletip gelişmiş JavaScript API’larını kullanarak çeşitli olay tetiklerini kullanabilir ve değişik kancalar kullanarak htmx’i dilediğiniz gibi değiştirebilirsiniz.
Veri Değiştirme Mekaniği
htmx yapmış olduğu AJAX isteklerinin yanıtlarını seçmiş olduğunuz hedef elemente otomatik olarak ekler. Bunu yaparken hedef elementin içeriğini innerHTML kullanarak değiştirir. Fakat aynı zamanda htmx bundan daha farklı veri değiştirme mekaniklerine de eklentiler aracılığı ile sahiptir. Morphing swaps (kesintisiz dönüşüm) şeklinde adlandırılan bir mekanik ile sunucudan gelen yeni yanıtları eski içeriği – focus, video durumu gibi şeyleri DOM düğümlerine dokunmadan korumaya çalışır. Ve dokümantasyonda belirtildiğine göre bunu da iyi bir şekilde yapmaktadır.
Veri Doğrulama
htmx aynı zamanda HTML5 Doğrulama API’leri ile birlikte gelir; bu sayede AJAX istekleri yerine getirilmeden önce form verileri tarayıcı üzerinde doğrulanır. Tabii ki sunucu tarafında da bir doğrulama yapmanız gerektiğini hatırlatmama gerek yok sanırım 🙂
Daha Pek Çoğu
Evet, hepsini inanın anlatmaya bu yazıda zamanım yok; bu yazıda kısaca yakın zamanda keşfettiğim (2-3 ay kadar önce) ve kullanmaya başladığım bir kütüphaneyi sizinle paylaşmak istedim.
Kütüphaneyi yazan arkadaşlar oldukça başarılı işler yapmışlar. Yani sadece sunucu tarafından göndereceğiniz Header bilgileri ile AJAX isteği yapmak yerine tamamiyle farklı yönlendirmeler veya başka şeyler yapabilmemiz gerekebileceği bile düşünülmüş. JavaScript kodu yazmasak da htmx JavaScript ile geliştirildiği için JavaScript desteklemeyen tarayıcılarda nasıl yol izlemeniz gerektiği düşünülmüş. İsteklerinizi yaparken aynı zamanda bir ilerleme çubuğu kullanmanız gerekebileceği hesaba katılmış ve bu ciddi anlamda kolaylaştırılmış. Ard arda istek gönderilmesi durumunda nasıl bir yol izleneceği; istek yapılmadan önce bir doğrulama (confirmation) yapmanız gereken durumların olabileceği dikkate alınmış. Kısaca burada bahsetmediğim pek çok özelliğe sahip bu kütüphane. Ve pek çok projemde de kullanmayı planlıyorum.
Yazılı Dersler & İpuçları
Yeterli talep gelmesi durumunda htmx için yazılı dersler ve ipuçları ile ilgili bir seri getirebilirim. Kullanışlı örnekler ve sunucu tarafında da kullanabileceğiniz PHP örnekleri gibi.
Bu Kadar Yeter, Kaynak Ver Bize
Diyorsanız, sizi htmx’in ana sayfasına alabilirim. Dokümantasyona da buraya tıklayarak ulaşabilirsiniz. Geliştiriciler tarafından hazırlanan birbirinden fazla örneğe ışınlanmak için da buraya dokunun.
Daha Fazla İçerik
Bu ve benzeri değişik şeyleri paylaştığım diğer yazılara bakmak için Bilişim Kategorisini ziyaret edebilirsiniz.
İyi çalışmalar dilerim. Okuduğunuz için teşekkürler.
