AJAX, CSS geçişleri, WebSockets ve sunucudan gönderilen olaylara doğrudan HTML’den erişim sağlayan htmx, web geliştirme topluluğuna yeni bir heyecan getirdi. Bu yazımızda Htmx nedir? nasıl kullanılır tüm detaylarıyla anlatacağız.

Htmx nedir?

HTML ve XMLHttpRequest kelimelerinin kısaltması olan Htmx, hypertext’in kolaylığı ve gücüyle son teknoloji kullanıcı arayüzleri oluşturabilen, küçük boyutlu ve bağımsız bir javascript kütüphanesidir. Htmx, AJAX, CSS geçişleri, WebSockets ve sunucudan gönderilen olaylara doğrudan HTML’den erişim sağlar. Htmx, CSS animasyonu ve WebSockets gibi teknolojileri destekler fakat temel amacı HTTP isteklerinin işlenmesini basitleştirmektir.

Htmx, JavaScript işlevselliğini HTML nitelikleri aracılığıyla kullanılabilir hale getirir. Aşağıda basit bir kod örneği görebilirsiniz:

<a href=”/about” hx-get=”/about”>About</a>

Bu kodu incelediğimizde, normal bir HTML kodundan farklı olarak hx-get niteliğini görebilirsiniz. Bu bağlantıya tıklarsanız, htmx kitaplığı bir AJAX isteği gönderecek ve tarayıcının tam olarak yenilenmesine gerek kalmadan hedef sayfayı yükleyecektir.

Htmx nasıl kullanılır?

Öncelikle htmx, bir uygulamanın tamamının davranışını değil, web uygulamaları veya web siteleri içindeki belirli görevleri ele alır. Bununla birlikte kütüphanenin en büyük avantajlarından biri, kullanmaya başlamanın kolay olmasıdır. İsterseniz kütüphaneyi indirip sitenize yükleyebilir veya web sitenizde kod satırına bağlantısını ekleyebilirsiniz.

<scriptsrc=”https://unpkg.com/htmx.org@1.9.10″integrity=”sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC”crossorigin=”anonymous”></script>

Kendi bilgisayarınızda deneme yapacaksanız, Apache gibi bir web sunucu yüklemeniz gerekir çünkü file: protokolü AJAX isteklerine izin vermez.

Htmx nasıl öğrenebilirim?

Htmx’i, temelden uzmanlığa kadar kendi resmi web sitesi htmx.org adresinden öğrenebilirsiniz. Htmx’in sunduğu tüm özellikleri, özelliklerin kullanımları ve örnek kodlara erişebilirsiniz. Bununla birlikte github.com gibi platformlarda örnek projeleri görebilirsiniz. Örneğin burada, instagram, X, facebook gibi platformlarda kullanılan sonsuz kaydırma (sayfayı aşağı kaydırdıkça yeni içeriklerin açılması) özelliğinin htmx ile yapılan örneğini görebilirisiniz.

Paylaş

Yorumdan çık