Info World: htmx 4 ile Daha Derine İnmek — htmx ve JavaScript'i Birleştirme

htmx, web sayfalarına zengin işlevsellik eklemeyi kolaylaştırır. İşte htmx'i özel JavaScript, Alpine.js ve daha fazlasıyla birleştirerek temellerin ötesine nasıl geçeceğiniz.


Görsel: BEST-BACKGROUNDS - shutterstock.com

htmx, JavaScript yazmadan web sayfalarına zengin işlevsellik eklemenizi sağlar. Ancak, ihtiyaç duyduğunuzda JavaScript'i entegre etmenize de olanak tanır; bunu, öğelere satır içi fonksiyonlar ekleyerek veya olaylar için daha karmaşık kancalar yazarak yapabilirsiniz.

Bu davranışlar, zaten JavaScript kullanan web sayfalarını alıp tamamen htmx'e geçirmenize veya yalnızca ihtiyaç duyulan yerlerde (örneğin, bir uygulamanın yeni bölümlerinde) htmx eklemenize olanak tanır.

Genel olarak, htmx, etkileşimli olmayan bir sayfayla başlayıp ihtiyaç duydukça istediğiniz davranışları katmanlayabileceğiniz için, sıfırdan başlayan uygulamalarla en iyi şekilde çalışır. Ancak htmx, halihazırda JavaScript kullanan bir sayfa için eklenti olarak veya mevcut JavaScript'ten uzaklaşmak için bir geçiş hedefi olarak da çalışabilir.

htmx'i JavaScript ile Kullanma

htmx'i elle yazılmış JavaScript ile entegre etmek istediğinizde, htmx size bunu yapmanın birkaç yolunu sunar. Bazıları son derece basittir, ancak çalıştıkları nesnelere sıkıca bağlıdır. Diğerleri daha gelişmiş ve esnektir, ancak kullanmak için daha fazla çalışma gerektirir.
hx-on özniteliklerini kullanma

Nesnelere JavaScript davranışları eklemenin temel bir yolu, htmx'e çok benzeyen bir mekanizma olan hx-on öznitelikleridir. Bunlardan birini belirli bir nesneye ekleyerek, satır içi kod veya fonksiyon çağrıları sağlayabilirsiniz.

Örneğin:


Satır içi kod, burada gösterildiği gibi tam bir kod bloğu veya kendi kodunuza yapılan bir fonksiyon çağrısı olabilir.

hx-on kullanmanın bir avantajı, diğer hx- öznitelikleriyle tutarlılıktır. Mevcut tüm etkileşimleriniz htmx tarafından destekleniyorsa, özel işlevsellik için daha fazla hx- özniteliği eklemek işleri tekdüze tutar. Öte yandan, özel işlevselliğinizin htmx'ten mekanik olarak farklı olmasını istiyorsanız, bir sonraki bölümde ele alınan yaklaşımı düşünün: geri çağırma işlevlerini kaydetmek.

htmx API'sini Kullanma

htmx özellikli sayfalar için JavaScript işlevselliğini "bağlamanın" daha karmaşık yolu, htmx nesnesini ve yöntemlerini kullanmaktır. htmx ile herhangi bir davranış için geri çağırma işlevleri kaydedebilirsiniz.

htmx nesnesi, DOM'daki nesnelerde htmx davranışlarını tetiklemek için bir dizi arayüz sağlar.
En sık kullanılan üç arayüz şunlardır:

• htmx.on(), hx-on özniteliğinin yaptığına çok benzer şekilde, bir nesneye bir olay dinleyicisi ekler. Temel fark, satır içi bir öznitelik eklemenin genellikle nesneyi nasıl işlediğinizi (örneğin, sunucu tarafı şablonundan) değiştirmenizi gerektirmesidir.
• htmx.onLoad(), htmx tarafından DOM'a yeni içerik eklendiğinde, htmx zaten işledikten sonra çalışacak bir geri çağırma işlevi kaydeder. Bu şekilde, bir fetch eylemiyle dinamik olarak yüklenen içerik, özel bir şekilde bağlanabilir. Normalde, htmx tarafından yüklenen ve hx öznitelikleri içeren her şey otomatik olarak bağlanır, ancak bu, hx öznitelikleri olmayan "düz" içerik için bunu yapmanıza olanak tanır.
• htmx.ajax(), sonuçları htmx tarafından işlenen ve DOM'a eklenen özel bir htmx isteği gönderir.

htmx'in öznitelikler aracılığıyla ortaya koyduğu tüm davranışlar, API aracılığıyla manuel olarak tetiklenebilir. Bu nedenle, isterseniz, hx öznitelikleri ekleyerek nesneleri bağlamayı atlayabilir ve bunun yerine kendi JavaScript kodunuz aracılığıyla API'yi kullanabilirsiniz.

Bir bakıma bu, htmx'in amacını bozar. Ancak, en azından başlangıçta, nesnelere açıklama eklemeden htmx kullanmaya başlamak isteyebileceğiniz durumlar olabilir (örneğin, HTML şablonlarınızda hemen değişiklik yapmaktan kaçınmak için).

hx-live ve q() fonksiyonunun kullanımı

htmx 4, sorgu fonksiyonu q() kullanarak nesneleri seçmenize ve hx-attributes için kullanılan sözdizimine benzer bir sözdizimi kullanarak bunlar üzerinde işlemler gerçekleştirmenize olanak tanıyan hx-live adlı yeni bir özellik tanıttı.

q()'yu, geçerli sayfada document.querySelector() çalıştırmanın ve ardından döndürülen nesnelerle çalışmanın daha az ayrıntılı bir yolu olarak düşünebilirsiniz. q() ile yapacağınız işlemlerin çoğu, bir nesnenin davranışının diğer birçok nesneyi etkilediği DOM manipülasyonlarını içerir.
Örneğin:


Düğmeye tıklamak, sayfadaki `item` sınıfına sahip her öğeyi bulur ve seçilen öğede seçilen sınıfın varlığını değiştirir.

`q()` aynı doğrultuda birkaç başka yöntem daha sunar:

• `take()` seçili öğelerden bir sınıfı veya özniteliği kaldırır, ardından bunları çağrıyı yapan öğeye ekler. Verilen öğe dışındaki her şey üzerinde bir işlem gerçekleştirmenin kullanışlı bir yoludur (örneğin, bir div içindeki bu düğme hariç diğer tüm düğmeler).
• `trigger()` sorguyla eşleşen her şeye verilen bir olayı gönderir. Gerekirse olayın yayılmasını önlemek için seçenekler içerir.
• `insert()` seçili öğelerin içine veya etrafına HTML ekler.

`q()` hakkında önemli olan, onu tamamen `htmx` özniteliklerinin dışında, kendi özel olarak yazılmış JavaScript işlevlerinizin veya geri çağırmalarınızın bir parçası olarak kullanabilmenizdir. Hatta yalnızca `q()` ve davranışlarını JavaScript ile birlikte kullanarak bir sayfaya `htmx` işlevselliği eklemeye başlayabilir, ardından zaman içinde bir sitenin eski işlevselliğini `htmx` ile değiştirmek için bundan yola çıkarak geliştirebilirsiniz.

htmx'i Alpine.js ile Kullanmak

Genellikle, ön uç web çerçeveleri karıştırılmamalıdır; bu, yan etkileri ve öngörülemeyen davranışları en aza indirmek için daha iyidir. Bir sayfaya reaktif davranışlar eklemek için htmx kullanıyorsanız, htmx (ve onunla entegre ettiğiniz JavaScript) reaktif davranışın tek kaynağı olduğunda en iyi sonuçları alırsınız.

Yine de, htmx, reaktivite eklemenin diğer yollarıyla birlikte çalışmak için de olanaklar sunar. Elle yazılmış JavaScript'in yanı sıra, Alpine.js kütüphanesini entegre edebilirsiniz.

Alpine.js, htmx'e benzer bir felsefeye sahip bir JavaScript kütüphanesidir. Alpine ile, x- ile başlayan özel öznitelikler ekleyerek bir web sayfasındaki öğelere davranış ekleyebilirsiniz. Örneğin, x-on:click, tıklandığında bir öğeye bazı davranışlar ekler.

Bu davranışın htmx ile nasıl çakışabileceğini veya tam tersini görmek zor değildir. Ancak htmx, Alpine davranışlarının htmx tarafından işlenen bileşenlerde tutarlı bir şekilde etkinleştirilmesini ve aktif tutulmasını sağlayan hx-alpine-compat adlı bir uzantıyla birlikte gelir.

InfoWorld'den Matt Tyson, htmx ve Alpine.js'nin birbirini nasıl tamamlayabileceğini ayrıntılı olarak inceledi.

Sunucu tarafı kütüphaneleriyle htmx kullanımı

Arka uç web çerçeveleri, tanım gereği ön uçtan bağımsızdır. Bir web çerçevesinin örneğin Bootstrap veya Alpine.js'yi tercih ettiğini görmezsiniz, çünkü bu sadece potansiyel kitleyi sınırlar ve ön uç ile arka uç arasında gereksiz yere sıkı bağlantılar oluşturur.

Ancak bazı web çerçeveleri, htmx de dahil olmak üzere belirli ön uçlar için ek destek sunar. Django ve FastAPI, HTMX destekli ön uçlar geliştiren geliştiriciler için kolaylık özellikleri sağlayan üçüncü taraf kütüphanelere sahiptir. Birçok arka uç çerçevesiyle kullanılan şablonlama dili Jinja2'nin, şablonların kısmen işlenmesini kolaylaştıran ve böylece bir htmx alma işlemi için yalnızca ilgili parçaların sağlanmasına olanak tanıyan Jinja2 Fragments adlı üçüncü taraf bir uzantısı vardır.

Daha yeni Python web çerçevelerinden biri olan Litestar, yerel htmx desteğine sahiptir. Bu, hedef öğeler veya olay adları gibi htmx'e özgü özniteliklerle otomatik olarak doldurulan htmx'e özgü şablonları işlemenizi sağlar.

htmx'in en büyük çekiciliği, JavaScript'in doğasında var olan karmaşıklıkları nasıl atlattığıdır. Bildirimsel HTML sözdizimi yoluyla bir web sayfası için ihtiyaç duyduğunuz etkileşimli işlevselliğin büyük çoğunluğunu size sunar. Aynı zamanda, htmx, JavaScript entegrasyonuna, Alpine.js ile birlikte çalışmaya ve htmx'in basitleştirilmiş yaklaşımıyla daha yakından çalışmayı seçen web çerçevelerine kapı açar.


Kaynak: Going deeper with htmx 4 combining htmx and JavaScript - Serdar Yegulalp / Info World

.