- İnsanlar sanki htmx, SPA çağında web’i kurtarıyormuş gibi konuşuyor
- htmx’in yaratıcısı Carson Gross bu dinamiği esprili şekilde "Hegelci diyalektik" olarak açıklıyor:
- tez (thesis): geleneksel MPA
- antitez (antithesis): SPA
- sentez (synthesis): hipermedya tabanlı etkileşimli adacıklardan oluşan bir uygulama
- Ama ben bunu görmedim ve bir süre önce "htmx ile bir SPA yaptım"
- Bu, basit bir ToDo liste uygulamasının PoC’si
- Sayfa yüklendikten sonra artık sunucuyla iletişim kurmuyor
- Her şey istemcide yerel olarak işleniyor
- htmx ağ üzerinden hipermedya alışverişini yönetmeye odaklanıyorsa bu nasıl çalışıyor?
- Basit bir numara var: "Sunucu tarafı" kodu bir Service Worker içinde çalışıyor
Service Worker
- Web sayfası ile internet arasında bir proxy gibi çalışır
- Ağ isteklerini yakalayıp değiştirebilir
- İstekleri değiştirebilir, çevrimdışı kullanım için yanıtları önbelleğe alabilir ve isteği tarayıcı dışına göndermeden yeni yanıtlar üretebilir
- Bu son özellik, bu tek sayfalı uygulamanın merkezinde yer alıyor
- htmx ile bir ağ isteği yapıldığında Service Worker bunu yakalar
- Ardından Service Worker iş mantığını çalıştırır ve yeni HTML üretir
- htmx yeni HTML’yi DOM içinde değiştirir
Geleneksel SPA’lere göre avantajları
- Service Worker depolama için IndexedDB kullanmak zorunda
- Bu da sayfa yüklemeleri arasında durumu koruyor
- Sayfayı kapatıp geri gelseniz bile uygulama verileri hatırlıyor
- Bu, bu mimariyi seçtiğinizde "bedava" gelen yan faydalardan biri
- Çevrimdışı çalışacak hale getirmek de kolay
Dezavantajlar
- Geliştirici araçları desteği zayıf
console.log çıktıları zaman zaman kayboluyor- Service Worker’ın kurulup kurulmadığını gösterme konusunda güvenilir değil
- Firefox’ta ES modül desteği yok
- Tüm kodu tek bir dosyaya koymak gerekiyor
- Genel geliştirme deneyimi "pek eğlenceli değil"
Buna rağmen htmx SPA iyi çalışıyor
Uygulama ayrıntıları
- Temel HTML, tek sayfalı uygulamanın boş iskeleti
<body> etiketi htmx kullanarak uygulamanın gövdesini kuruyor
hx-boost="true": htmx’e, tam sayfa gezinmesi olmadan bağlantı tıklamalarını ve form gönderim yanıtlarını Ajax ile değiştirmesini söylerhx-push-url="false": htmx’in bağlantı tıklamaları ve form gönderimleriyle URL’yi değiştirmemesini sağlarhx-get="./ui": sayfa yüklendiğinde /ui adresinden içeriği alıp değiştirmesini söylerhx-target="body": sonucu <body> öğesiyle değiştirmesini söylerhx-trigger="load": sayfa yüklenince tüm bunları yapmasını söyler
/ui uç noktası
- Uygulamanın gerçek işaretlemesini döndürür
- Sonrasında htmx bağlantıları ve formları kontrol ederek bunu etkileşimli hale getirir
- Service Worker, istek yönlendirmesini Express tarzı bir kütüphane ile ele alır
setFilter ve listTodos, IDB Keyval’i saran basit fonksiyonlardırApp bileşeni filtre formu, yapılacaklar listesi ve ekleme formundan oluşur
/todos/add uç noktası
- Yapılacak öğeyi kaydettikten sonra arayüzü yeniden render eden bir yanıt döndürür
- htmx bu yanıtı DOM içinde değiştirir
Todo bileşeni
- Bir onay kutusu, silme düğmesi ve yapılacak metninden oluşur
- Onay kutusu
/todos/${id}/update isteğini tetikler
- Silme düğmesi
/todos/${id} silme isteğini tetikler
- Yapılacak metninin iki durumu vardır: "normal" ve "editing"
- htmx çift tıklama olayını dinler
/ui/todos/${id}?editable=true isteğini yapar- Service Worker, içinde
<input> bulunan Todo HTML’sini döndürür
- htmx yanıtın HTML’siyle mevcut yapılacak öğeyi değiştirir
Özet
- Teknik olarak çalışıyor
- İyi bir fikir mi? Gerçekten hipermedya tabanlı uygulamaların zirvesi mi? React’i bırakıp bunu mu yapmalıyız?
- Tamamen yerel bir uygulamada, htmx’in dolaylı yapısı özgürleştirici olmaktan çok yük gibi hissettiriyor
- Çoğu uygulama zaten tamamen yerel değil
- "Etkileşimli adacıklar (islands of interactivity)" deseninin, "sunucu tarafı" kodunu Service Worker ile gerçek sunucu arasında bölmekten daha iyi olduğunu düşünüyorum
- Bu, hipermedya ile tamamen yerel bir tek sayfalı uygulama kurmanın nasıl göründüğünü göstermek için yapılan deneysel bir denemeydi
Henüz yorum yok.