htmz - ultra küçük bir HTML framework'ü

• plain HTML kadar basit bir yaklaşımla modüler ve dinamik web kullanıcı arayüzleri oluşturmayı sağlayan minimalist bir HTML mikroframework'ü
• Yalnızca tek bir şey yapar: sayfadaki herhangi bir öğeden HTML kaynağı yükleyebilir
  • Sayfanın yalnızca bir bölümünü güncellemeyi mümkün kılarak sayfa parçalarının değiştirilebilmesini sağlar
• Toplam 166 bayt boyutundadır; yalnızca saf HTML kullanır, bağımlılığı yoktur ve JS bundle'ı, backend, özel öznitelikler ya da DSL, custom element gerektirmez
• Gerçek DOM ile etkileşim kullanır; VDOM, click listener, AJAX, fetch vb. kullanmaz
• Yapmanız gereken tek şey, iframe tabanlı satır içi bir HTML snippet'i eklemek

<iframe hidden name=htmz onload="setTimeout(()=>document.querySelector(this.contentWindow.location.hash||null)?.replaceWith(...this.contentDocument.body.childNodes))"></iframe>  

Temel kullanım

• htmz kullanmak için, kaynak URL'yi gösteren bir href özniteliğine (veya form için action) ve hedef ID seçicisine sahip bir hiperlinke (veya forma) ihtiyaç vardır.
• Bu, URL fragment'ini hedef ID seçicisi olarak yeniden kullanıyormuş gibi görünür; ancak bu bağlamda URL fragment'i başka bir amaçla kullanılmadığı için yeniden kullanılır.

Tam olarak ne yapıyor?

• htmz, sayfa içindeki herhangi bir öğe içinde HTML kaynağı yüklemeyi sağlayan tek bir özellik sunar.
• Bu fikir yeni değildir; web sayfalarını bağımsız olarak yeniden yüklenen bölümlere ayırma yaklaşımı 1990'ların ortalarından beri vardır.
• htmz, HTML frame'lerinin genelleştirilmiş bir biçimidir ve sayfa içindeki herhangi bir öğeden HTML kaynağı yükleyebilir.

İleri düzey kullanım

• Şu anda HTML5'te yalnızca ve öğeleri htmz için hedef belirleyip onu çağırabilir.
• öğesi kullanılarak tüm göreli bağlantılar için htmz varsayılan hedef olarak ayarlanabilir.
• Gerçek bir hedef değeri kullanmayı tercih ediyorsanız, hedef ID seçicisini doğrudan target özniteliğinin içine yazabileceğiniz bir hack kullanabilirsiniz.

Script yazımı / etkileşim

• Daha fazla etkileşim gerekiyorsa, htmz'nin eşlik eden script dili olan JavaScript kullanılabilir.
• htmz, JS yazmayı veya UI kütüphaneleri kullanmayı dışlamaz; ayrıca htmz ile normal HTTP formları üzerinden form değerleri göndermeye devam edebilirsiniz.

Genişletilebilirlik

• Gelişmiş seçiciler, hata işleme, çoklu hedefler vb. gerektiğinde geliştiriciler bunu ihtiyaçlarına göre genişletebilir.

SSS

• htmz, adı "htmz" olan bir iframedir ve URL'yi iframe üzerinden yükleyerek htmz'yi çağırır.
• htmz, proxy hedef olarak çalışır ve yanıtı belirtilen hedefe iletir.
• htmz, DOM'u sürekli parse etmez, özel öznitelikleri veya söz dizimini aramaz ve DOM'a listener eklemez.
• htmz, yalnızca minimum JS kullanan bir HTML mikroframework'üdür.
• htmz bir snippet'tir ve adı 'Html with Targeted Manipulation Zones' ifadesinin kısaltmasıdır.
• Bu proje, htmx'e bir tepki olarak başladı ve htmx kullanmadan mevcut web ile yükle-bağla-hedefle işlevinin uygulanıp uygulanamayacağına dair bir deneydi.
• htmz, bu kadar küçük olmasına rağmen güçlü hissettirir; ana sınırlaması ise yanıt başına yalnızca tek bir hedefe sahip olabilmesidir.

---

GN⁺ görüşü

• Yenilikçi yaklaşım: htmz, web geliştirmede framework karmaşıklığını azaltan ve saf HTML kullanarak web arayüzleri oluşturmayı sağlayan yenilikçi bir yaklaşım sunuyor. Bu, başlangıç seviyesindeki yazılım mühendisleri için bile kolay erişilebilir bir web geliştirme yöntemi anlamına geliyor.
• Performans ve sadeliğin dengesi: 166 baytlık son derece hafif boyutu ve bağımlılıksız yapısı, web sayfası performansını ciddi ölçüde artırabilir. Ayrıca karmaşık JavaScript framework'lerini öğrenmeden etkili web sayfaları oluşturma sadeliği sunuyor.
• Web geliştirmenin geleceği: htmz, web geliştirmenin geleceğine dair ilgi çekici bir bakış sunuyor. Web standartları ve teknolojilerinin evriminin geliştiricilere nasıl daha basit ve verimli araçlar sağlayabileceğini gösteriyor.

[joyfui]

Vay canına, bu bayağı ilginçmiş haha. Linkte bunun bir kütüphane ya da framework değil, sadece bir snippet olduğunu söylüyor... hehe

[savvykang]

İleri düzey kullanım: mevcut HTML5'te yalnızca ve öğeleri -> mevcut HTML5'te yalnızca ve öğeleri HTML escape uygulanmamış gibi görünüyor

[GN⁺]

Hacker News görüşleri

• Birinci yorum özeti:

  • Sunucu tarafında render edilen sayfalar ve stil kapsamı belirlenmiş widget'lar için adlandırılmış iframeler ve hedeflenmiş formlar kullanma fikrine olumlu tepki.
  • htmz'nin bu fikri iyi hayata geçirmiş göründüğü belirtiliyor.
  • İyi fikirlerden vazgeçmemek, tamamlanmışlık ve mükemmelliğe odaklanmak ve fikri iyi aktarmak gerektiği vurgulanıyor.
  • Tarayıcının SPA'leri yerleşik olarak sunabileceğini gösteren harika bir hack olarak değerlendiriliyor.
  • Platformu iyi anlayan birinin etkileyici bir demosu olarak görülüyor.
  • Vanilla web'in basit ve güçlü olması gerektiği görüşü dile getiriliyor.
  • Web'in sunduğu malzemeleri sonuna kadar değerlendirme yaklaşımı olumlu bulunuyor.
  • Yaratıcının iletişim ve pazarlama becerileri övülüyor.

• İkinci yorum özeti:

  • Tarayıcının SPA'leri yerleşik olarak sunabileceğini gösteren bir hack olduğu belirtiliyor.
  • iframelerden kaçınmak için yalnızca birkaç özelliğin gerektiği söyleniyor.
  • Gerçek bir araç olmaktan çok bir noktayı kanıtlamak için daha faydalı olabileceği ifade ediliyor.
  • htmx'in sunduklarına kıyasla fazla karmaşık olduğu eleştirisi yapılıyor.

• Üçüncü yorum özeti:

  • 2001 civarında HTML tabanlı bir e-posta istemcisi geliştirme deneyimi paylaşılıyor.
  • Gizli iframe kullanarak sunucudan veri yükleyip DOM'u manipüle ettiklerini anlatıyor.
  • O dönemde tarayıcı desteği yeterli olmasa da temel mekanizmanın aynı olduğu belirtiliyor.
  • Çok fazla kütüphane gerektirmeden derli toplu bir paket olarak uygulanmış olması olumlu değerlendiriliyor.
  • Günümüzde yaygın kullanılan React gibi frontend framework'lerine kıyasla çoğu kullanım senaryosu için daha uygun olabileceği söyleniyor.

• Dördüncü yorum özeti:

  • DOM'u yanıtla değiştirme davranışının platformun bir parçası olması gerektiği güçlü biçimde savunuluyor.
  • Harici içeriği bildirime dayalı biçimde sayfaya yükleyebilen bir öğe için ilk adım önerisi yapılıyor.
  • HTML'in, bağlantıların hedefi olabilen öğeleri desteklemesi gerektiği belirtiliyor.

• Beşinci yorum özeti:

  • Platformu gerçekten anlayan birinin etkileyici demosu olduğu söylenerek övülüyor.
  • Gerçekte kullanma ihtimalinin düşük olduğu, ama yine de harika olduğu ifade ediliyor.

• Altıncı yorum özeti:

  • Satır içi event listener'larda this. ifadesinin kaldırılmasıyla kod boyutunun daha da küçültülebileceği öneriliyor.
  • Snippet'te 10 bayt tasarruf sağlayan bir ipucu veriliyor.

• Yedinci yorum özeti:

  • target kullanımı nedeniyle, JS devre dışıyken htmx gibi zarif biçimde kademeli bozulma göstermeyebileceği belirtiliyor.
  • JS'nin devre dışı olduğu durumlara dair idealist bir bakış açısı ifade ediliyor.

• Sekizinci yorum özeti:

  • <slot> öğesini bu şekilde yeniden kullanmanın kötü bir fikir olduğu belirtiliyor.
  • Tarayıcıda <slot>un çok belirli bir davranışı olduğu ve kütüphane ne yaparsa yapsın host öğenin çocuklarıyla değiştirildiği söyleniyor.
  • Bu tür durumlar için zaten <output> öğesinin mevcut olduğu hatırlatılıyor.

• Dokuzuncu yorum özeti:

  • Demo bölümünde iyileştirme gerektiği belirtiliyor.
  • "Tab"a tıklayıp örnek kodu değiştirince geçmiş olayları eklense de URL'nin güncellenmediği söyleniyor.
  • "Sadece HTML" iddiasına rağmen web/UX'in temel kurallarının ihlal edildiği eleştirisi yapılıyor.

• Onuncu yorum özeti:

  • pjax'i hatırlattığı söyleniyor; pjax'in iframe yerine XHR kullandığı ve geri düğmesinin çalışması için varsayılan olarak pushState kullandığı belirtiliyor.