- Daha iyi performans ve akış yetenekleri için XMLHttpRequest'ten yerel fetch() API'sine geçiş yapıldı.
- Niteliklerin açıkça miras alınmasına ve standartlaştırılmış bir olay adlandırma kuralına doğru bir geçiş.
- Karmaşık DOM güncellemeleri için morph takaslarının ve hx-partial etiketinin tanıtılması.
- Yerel anlık görüntülerin gerçek sunucu istekleriyle değiştirilmesiyle geçmiş yönetiminin tamamen yeniden yapılandırılması.
Web geliştirme dünyasında bir süredir bulunuyorsanız, htmx'in HTML için adeta sihirli bir numara olduğunu muhtemelen biliyorsunuzdur. Genellikle büyük bir JavaScript çerçevesi gerektiren şeyleri (örneğin, sayfayı tamamen yeniden yüklemeden güncellemek gibi) etiketlerinize birkaç özellik ekleyerek yapmanıza olanak tanır. htmx 4'ün piyasaya sürülmesi büyük bir olay çünkü sadece birkaç küçük özellik eklemekle kalmıyor; uygulamalarınızın daha hızlı ve çok daha güvenilir hissettirmesi için motoru temelden yeniden yapılandırıyor.
Temel felsefe aynı kalıyor: mantığı sunucuda tutun ve Uygulama Durumunun Motoru Olarak Hipermetin (HATEOAS) kullanın . JSON'u ileri geri göndermek yerine, htmx 4 sunucudan HTML parçaları ister ve bunları doğrudan DOM'a yerleştirir. Modern ön uç araçlarının karmaşıklığından bıkan herkes için ferahlatıcı bir yenilik olan bu yaklaşım, davranışın yerelliğine odaklanarak kodunuzun ne yaptığını sadece HTML'ye bakarak anlamanızı sağlar.
Büyük Getirme
En önemli içsel değişiklik, htmx'in nihayet XMLHttpRequest'i terk edip yerel fetch() API'sini kullanmaya başlamasıdır . Bu, arka planda sıkıcı bir detay gibi görünse de aslında oyunun kurallarını değiştiren bir gelişmedir. Fetch kullanımı, kütüphaneyi daha yalın hale getirir ve gelişmiş HTML akışına olanak tanır. Ancak bu, XHR'ye özgü olayların ortadan kalktığı ve istek zaman aşımının artık süresiz olarak beklemek yerine varsayılan olarak 60 saniyeye ayarlandığı anlamına gelir .
Miras Alışkanlığını Kırmak
Sürüm 2'den 4'e geçişte en büyük engellerden biri, özniteliklerin alt öğelere nasıl aktarıldığıdır. Eskiden, kalıtım örtüktü; bir div'e onay iletişim kutusu koyarsanız, içindeki her düğme bu iletişim kutusunu alırdı. Şimdi ise, özniteliğe `:inherited` değiştiricisini ekleyerek bunu açıkça belirtmeniz gerekiyor . Örneğin, `hx-confirm:inherited` kullanmak , htmx'e bu davranışın DOM ağacında aşağı doğru akması gerektiğini söyler. Bu, o sinir bozucu "uzaktan etki" hissini ortadan kaldırır ve kullanıcı arayüzünüzde hata ayıklamayı çok daha kolay hale getirir.
Daha Akıllı Takaslar ve Çoklu Hedefleme
İçerik değiştirme, htmx'in gerçekten parladığı noktadır ve 4. sürüm Morph Swaps'ı (innerMorph ve outerMorph) sunar. Sayfanın bir parçasını koparıp yerine yeni HTML eklemek yerine, morphing, değişiklikleri birleştirmek için idiomorph algoritmasını kullanır. Bu, giriş odağını korumak veya içeriğin geri kalanı güncellenirken bir videonun oynatılmasını sağlamak için hayat kurtarıcıdır. Ek olarak, yeni <hx-partial> etiketi, tek bir sunucu yanıtının sayfanın birden fazla farklı bölümünü güncellemesine olanak tanıyarak, eski bant dışı (OOB) değişikliklere göre size daha fazla kontrol sağlar.
Hata ve Geçmiş İşlemleri
Önceki sürümlerde, htmx genellikle 400 veya 500 hata yanıtlarını göz ardı ederdi. Artık değil. htmx 4, varsayılan olarak hata yanıtlarını değiştirir ; bu da sunucu tarafı doğrulama hatalarını göstermek için harika bir özelliktir. Bunu yönetmek için, belirli kodları (örneğin 422) özel bir hata div'ine yönlendirmek üzere hx-status özniteliğini kullanabilirsiniz . Geçmişe gelince, kütüphane localStorage'da DOM anlık görüntüleri almayı durdurdu. Artık, bir kullanıcı geri düğmesine bastığında, htmx sayfayı sunucudan yeniden getirir ve böylece durumun her zaman güncel olmasını ve önceki bir oturumun eski bir kalıntısı olmamasını sağlar.
Olaylar, Uzantılar ve Betikleme
Olay sistemi , htmx:phase:action modelini takip edecek şekilde tamamen temizlendi . Bu tutarlılık, bir isteğin yaşam döngüsüne müdahale etmeyi çok daha kolay hale getiriyor. Eklenti cephesinde, artık SSE (Sunucu Tarafından Gönderilen Olaylar), WebSockets ve multipart/mixed yanıtları için birinci sınıf desteğe sahibiz ; bu da gerçek zamanlı panoların oluşturulmasını çok kolaylaştırıyor. İstemci tarafında biraz reaktiviteye ihtiyaç duyanlar için hx-live , Alpine.js ve jQuery karışımı gibi hissettiren DOM tabanlı bir betik çözümü sunarak, basit bir q() seçici ile öğeleri manipüle etmenizi sağlıyor.
Kurulum ve Yükseltme Yolu
Yeni bir projeye başlıyorsanız, CDN veya NPM üzerinden en son sürüm 4'ü edinin. Mevcut uygulamalar için ekip, şablonlarınızı eski özellikler ve eski olay adları açısından tarayan bir komut satırı yükseltme aracı (npx aracılığıyla) sağladı. Tam bir geçişe hazır değilseniz, htmx-2-compat uzantısı eski davranışları geçici olarak geri yükleyebilir. Sürüm 2'nin desteklenmeye devam ettiğini ve sürüm numarası olmayan CDN bağlantıları kullanan milyonlarca sitenin yanlışlıkla bozulmasını önlemek için 2027 yılının başlarına kadar NPM'de 'en son' etiketi olarak kalacağını belirtmekte fayda var.
Güvenlik ve En İyi Uygulamalar
htmx, HTML'i doğrudan enjekte etmenize olanak tanıdığı için, XSS saldırılarını önlemek amacıyla kullanıcı içeriğinin kaçış karakterleriyle işlenmesi şarttır. hx-ignore özniteliği burada harika bir araçtır; htmx'e belirli bir kapsayıcı içindeki tüm öznitelikleri işlemeyi tamamen atlamasını söyler, bu da ham kullanıcı tarafından oluşturulan içeriği güvenli bir şekilde işlemek için mükemmeldir. Yüksek güvenlikli ortamlar için, hx-csp uzantısı, nonce'ları yöneterek ve isteklerin nereye gönderilebileceğini sınırlayarak katı İçerik Güvenlik Politikalarıyla entegre olmaya yardımcı olur.
HTMLX'in bu evrimi, kütüphaneyi akıllı bir yardımcı araçtan uzun vadeli web hizmetleri için sağlam bir temele dönüştürüyor. Fetch API'yi benimseyerek, özniteliklerin nasıl miras alındığını açıklığa kavuşturarak ve gelişmiş şekil değiştirme ve kısmi güncellemeler sunarak, sunucu ve tarayıcı arasındaki sürtünmeyi ortadan kaldırıyor. İster basit bir CRUD uygulaması ister karmaşık bir gerçek zamanlı arayüz oluşturuyor olun, basitleştirilmiş bir olay sistemi ve güçlü akış uzantılarının birleşimi, HTML'nin rahatlığından ayrılmadan dinamik deneyimler oluşturmayı her zamankinden daha kolay hale getiriyor.
