htmz - framework HTML ultra-kecil

 (leanrada.com)
21 poin oleh GN⁺ 2024-02-21 | 3 komentar | Bagikan ke WhatsApp
  • Mikroframework HTML minimalis yang memungkinkan pembuatan antarmuka pengguna web yang modular dan dinamis dengan cara sesederhana HTML biasa
  • Hanya melakukan satu hal: dapat memuat sumber daya HTML dari semua elemen di halaman
    • Dengan memungkinkan pembaruan hanya pada sebagian halaman, ini membuat penggantian fragmen halaman menjadi mungkin
  • Ukurannya hanya 166 byte, hanya menggunakan HTML murni, tanpa dependensi, dan tidak memerlukan bundel JS, backend, atribut khusus, DSL, maupun elemen kustom
  • Menggunakan interaksi dengan DOM nyata, dan tidak menggunakan VDOM, click listener, AJAX, fetch, dan sebagainya
  • Cukup tambahkan snippet HTML inline berbentuk iframe
<iframe hidden name=htmz onload="setTimeout(()=>document.querySelector(this.contentWindow.location.hash||null)?.replaceWith(...this.contentDocument.body.childNodes))"></iframe>

Cara penggunaan dasar

  • Untuk menggunakan htmz, diperlukan hyperlink (atau form) yang memiliki atribut href yang menunjuk ke URL sumber daya (atau action pada form) serta selector ID tujuan.
  • Ini tampak seperti mendaur ulang fragmen URL sebagai selector ID tujuan, tetapi dalam konteks ini fragmen URL tidak digunakan untuk tujuan lain sehingga bisa digunakan kembali.

Sebenarnya apa yang dilakukan?

  • htmz menyediakan satu fungsi tunggal yang memungkinkan pemuatan sumber daya HTML di dalam elemen mana pun di halaman.
  • Ide ini bukan hal baru; membagi halaman web menjadi bagian-bagian yang dimuat ulang secara mandiri sudah ada sejak pertengahan 1990-an.
  • htmz adalah generalisasi dari frame HTML, sehingga sumber daya HTML dapat dimuat dari elemen mana pun di dalam halaman.

Penggunaan lanjutan

  • Saat ini di HTML5, hanya elemen a dan form yang dapat ditetapkan dan dipanggil sebagai target htmz.
  • Anda dapat menggunakan elemen base untuk menetapkan htmz sebagai target default bagi semua tautan relatif.
  • Jika Anda lebih suka menggunakan nilai target yang sebenarnya, Anda bisa memakai trik dengan menuliskan selector ID tujuan langsung pada atribut target.

Scripting / interaksi

  • Jika membutuhkan interaksi yang lebih kaya, Anda dapat menggunakan JavaScript, bahasa scripting pendamping untuk htmz.
  • htmz tidak menutup kemungkinan penulisan JS atau penggunaan library UI, dan dengan htmz Anda tetap bisa mengirim nilai form melalui form HTTP biasa.

Ekstensibilitas

  • Jika memerlukan selector lanjutan, penanganan error, banyak target, dan sebagainya, pengembang dapat memperluasnya sesuai kebutuhan.

FAQ

  • htmz adalah iframe bernama "htmz", dan memanggil htmz dengan memuat URL melalui iframe tersebut.
  • htmz bertindak sebagai target proxy, meneruskan respons ke target yang ditentukan.
  • htmz tidak terus-menerus mem-parsing DOM, tidak mencari atribut atau sintaks khusus, dan tidak memasang listener pada DOM.
  • htmz adalah mikroframework HTML yang hanya menggunakan JS seminimal mungkin.
  • htmz adalah sebuah snippet, singkatan dari 'Html with Targeted Manipulation Zones'.
  • Proyek ini dimulai sebagai respons terhadap htmx, dan merupakan eksperimen untuk melihat apakah fungsi load-link-target bisa diwujudkan di web modern tanpa menggunakan htmx.
  • Meski ukurannya sangat kecil, htmz terasa bertenaga, dan batasan utamanya adalah hanya bisa memiliki satu tujuan per respons.

Pendapat GN⁺

  • Pendekatan inovatif: htmz menawarkan pendekatan inovatif dalam pengembangan web dengan mengurangi kompleksitas framework dan membangun antarmuka web menggunakan HTML murni. Ini berarti pendekatan pengembangan web yang mudah diakses bahkan oleh software engineer pemula.
  • Perpaduan performa dan kesederhanaan: ukurannya yang sangat ringan, hanya 166 byte, serta struktur tanpa dependensi dapat sangat meningkatkan performa halaman web. Selain itu, ini memberikan kesederhanaan untuk membuat halaman web yang efektif tanpa harus mempelajari framework JavaScript yang kompleks.
  • Masa depan pengembangan web: htmz menawarkan sudut pandang menarik tentang masa depan pengembangan web. Ini menunjukkan bagaimana evolusi standar dan teknologi web dapat memberi pengembang alat yang lebih sederhana dan efisien.

Bacaan terkait

3 komentar

 
joyfui 2024-03-06

Wah, ini keren banget wkwk. Di tautannya dia bilang ini bukan library atau framework, cuma snippet aja... hehe
 
savvykang 2024-02-21

Penggunaan lanjutan: dalam HTML5 saat ini, tampaknya hanya elemen dan yang tidak dikenai HTML escaping Tampaknya HTML escaping tidak diterapkan
 
GN⁺ 2024-02-21
Opini Hacker News

  • Ringkasan komentar pertama:

    • Reaksi positif terhadap ide menggunakan iframe bernama dan form bertarget untuk halaman yang dirender di server serta widget dengan cakupan gaya yang terisolasi.
    • htmz tampak mengimplementasikan ide ini dengan baik.
    • Menekankan agar tidak menyerah pada ide bagus, fokus pada kematangan dan keunggulan, serta menyampaikan ide dengan baik.
    • Dinilai sebagai hack hebat yang menunjukkan bahwa browser dapat menyediakan SPA secara bawaan.
    • Demonstrasi keren dari seseorang yang benar-benar memahami platform.
    • Ada pendapat bahwa web vanila seharusnya sederhana dan kuat.
    • Penilaian positif terhadap upaya memanfaatkan semaksimal mungkin bahan-bahan yang sudah disediakan web.
    • Pujian untuk kemampuan komunikasi dan pemasaran pembuatnya.

  • Ringkasan komentar kedua:

    • Hack yang menunjukkan bahwa browser dapat menyediakan SPA secara bawaan.
    • Hanya perlu beberapa atribut untuk menghindari iframe.
    • Mungkin lebih berguna untuk membuktikan suatu poin daripada sebagai alat yang benar-benar dipakai.
    • Menunjukkan bahwa ini terlalu rumit dibandingkan apa yang disediakan htmx.

  • Ringkasan komentar ketiga:

    • Berbagi pengalaman mengembangkan klien email berbasis HTML sekitar tahun 2001.
    • Menggunakan iframe tersembunyi untuk memuat data dari server dan memanipulasi DOM.
    • Pada saat itu dukungan browser belum memadai, tetapi mekanisme dasarnya sama.
    • Penilaian positif karena ini diimplementasikan sebagai paket ringkas tanpa perlu banyak library.
    • Bisa lebih cocok untuk sebagian besar kasus penggunaan dibandingkan framework frontend seperti React yang kini banyak dipakai.

  • Ringkasan komentar keempat:

    • Argumen kuat bahwa tindakan mengganti DOM dengan respons seharusnya menjadi bagian dari platform.
    • Mengusulkan langkah pertama berupa elemen yang dapat memuat konten eksternal ke dalam halaman secara deklaratif.
    • Menyebut bahwa HTML seharusnya mendukung elemen yang dapat menjadi target dari tautan.

  • Ringkasan komentar kelima:

    • Pujian atas demonstrasi keren dari seseorang yang benar-benar memahami platform.
    • Kemungkinan kecil akan benar-benar digunakan, tetapi tetap dinilai hebat.

  • Ringkasan komentar keenam:

    • Saran untuk menghapus this. pada inline event listener agar ukuran kode bisa lebih kecil lagi.
    • Memberikan tip yang dapat menghemat 10 byte pada snippet.

  • Ringkasan komentar ketujuh:

    • Menunjukkan bahwa dengan menggunakan target, ini mungkin tidak mengalami graceful degradation seperti htmx saat JS dinonaktifkan.
    • Mengungkapkan sudut pandang yang idealistis tentang kondisi saat JS dinonaktifkan.

  • Ringkasan komentar kedelapan:

    • Menunjukkan bahwa menggunakan ulang elemen <slot> dengan cara seperti ini adalah ide yang buruk.
    • Di browser, <slot> memiliki perilaku yang sangat spesifik, dan apa pun yang dilakukan library, ia akan digantikan oleh anak dari elemen host.
    • Menyebut bahwa elemen <output> sebenarnya sudah ada untuk situasi seperti ini.

  • Ringkasan komentar kesembilan:

    • Menunjukkan perlunya perbaikan pada bagian demo.
    • Saat mengklik "tab" untuk mengubah kode contoh, event history memang ditambahkan tetapi URL tidak diperbarui.
    • Mengkritik klaim "hanya HTML" karena melanggar aturan dasar web/UX.

  • Ringkasan komentar kesepuluh:

    • Mengingatkan pada pjax, tetapi pjax menggunakan XHR alih-alih iframe dan secara default memakai pushState agar tombol kembali berfungsi.