htmz - 超小型HTMLフレームワーク

 (leanrada.com)
21 ポイント 投稿者 GN⁺ 2024-02-21 | 3件のコメント | WhatsAppで共有
  • plain HTMLと同じようなシンプルな方法で、モジュール式かつ動的なWebユーザーインターフェースを作れるミニマリストHTMLマイクロフレームワーク
  • 動作はたった1つだけ: ページ上のあらゆる要素からHTMLリソースを読み込める
    • ページの一部だけを更新できるため、ページ断片を置き換えられる
  • 合計166バイトのサイズで、純粋なHTMLだけを使い、依存関係がなく、JSバンドルやバックエンド、特別な属性やDSL、カスタム要素も不要
  • 実際のDOMとの相互作用を利用し、VDOMやクリックリスナー、AJAX、fetchなどは使わない
  • iframeによるインラインHTMLスニペットを追加するだけでよい
<iframe hidden name=htmz onload="setTimeout(()=>document.querySelector(this.contentWindow.location.hash||null)?.replaceWith(...this.contentDocument.body.childNodes))"></iframe>

基本的な使い方

  • htmzを使うには、リソースURLを指すhref属性（またはformのaction）と、宛先IDセレクタを持つハイパーリンク（またはform）が必要。
  • URLフラグメントを宛先IDセレクタとして再利用しているように見えるが、この文脈ではURLフラグメントを他の用途に使わないため、再利用されている。

正確には何をするのか?

  • htmzは、ページ内のどの要素の中でもHTMLリソースを読み込めるようにする単一の機能を提供する。
  • このアイデア自体は新しいものではなく、Webページを独立して再読み込みできる部分に分けるという考え方は1990年代半ばから存在していた。
  • htmzはHTMLフレームの一般化であり、ページ内のどの要素からでもHTMLリソースを読み込める。

高度な使い方

  • 現在のHTML5では、a 要素と form 要素だけが htmz を対象として指定して呼び出せる。
  • base 要素を使って、すべての相対リンクについて htmz をデフォルトの対象に設定できる。
  • 実際のtarget値を使うほうを好むなら、宛先IDセレクタを target 属性そのものに書けるハックを使うこともできる。

スクリプティング / 相互作用

  • より多くの相互作用が必要な場合は、htmzの相棒となるスクリプティング言語であるJavaScriptを使える。
  • htmzはJSを書くことやUIライブラリの利用を排除せず、htmzで通常のHTTPフォームとして引き続きフォーム値を送信することもできる。

拡張性

  • 高度なセレクタ、エラー処理、複数ターゲットなどが必要な場合は、開発者が必要に応じて拡張できる。

FAQ

  • htmzは名前が htmz の iframe であり、iframe経由でURLを読み込むことで htmz を呼び出す。
  • htmzはプロキシターゲットとして機能し、指定された対象へレスポンスを渡す。
  • htmzはDOMを継続的にパースしたり、特別な属性や構文を検索したり、DOMにリスナーを取り付けたりしない。
  • htmzはHTMLマイクロフレームワークであり、最小限のJSしか使わない。
  • htmzはスニペットであり、'Html with Targeted Manipulation Zones' の略。
  • このプロジェクトはhtmxへの反応として始まり、htmxを使わずに現在のWebでロード・リンク・ターゲット機能を実装できるかを試す実験だった。
  • htmzはその小さなサイズにもかかわらず強力に感じられ、主な制約はレスポンスごとに1つの宛先しか持てないこと。

GN⁺の意見

  • 革新的なアプローチ: htmzはWeb開発におけるフレームワークの複雑さを減らし、純粋なHTMLを使ってWebインターフェースを構築する革新的なアプローチを提供する。これは初級ソフトウェアエンジニアにも取り組みやすいWeb開発の方法を意味する。
  • 性能とシンプルさの両立: 166バイトという極めて軽量なサイズと依存関係のない構造は、Webページの性能を大きく向上させうる。また、複雑なJavaScriptフレームワークを学ばなくても効果的なWebページを作れるシンプルさも提供する。
  • Web開発の未来: htmzはWeb開発の未来に対する興味深い視点を示している。Web標準と技術の進化が、開発者によりシンプルで効率的なツールをどう提供できるかを見せている。

関連記事

3件のコメント

 
joyfui 2024-03-06

わあ、これ斬新ですね（笑） リンクでは、自分はライブラリでもフレームワークでもなく、ただのスニペットだと書いてありますね…（笑）
 
savvykang 2024-02-21

高度な使い方: 現在のHTML5では、要素と 要素だけが HTMLエスケープが適用されていないようです
 
GN⁺ 2024-02-21
Hacker Newsのコメント

  • 1つ目のコメント要約:

    • サーバーレンダリングされたページとスタイルスコープ付きウィジェットのために、名前付きiframeとターゲット指定フォームを使うというアイデアに対して好意的な反応。
    • htmzはこのアイデアをうまく実装しているように見える。
    • 良いアイデアを諦めず、完成度と卓越性に集中し、アイデアをうまく伝えることの重要性を強調。
    • ブラウザが標準でSPAを提供できることを示す素晴らしいハックだと評価。
    • プラットフォームをよく理解している人による見事なデモ。
    • バニラWebはシンプルかつ強力であるべきだという意見。
    • Webに与えられた素材を最大限活用している点を高く評価。
    • 作者のコミュニケーション力とマーケティング力を称賛。

  • 2つ目のコメント要約:

    • ブラウザが標準でSPAを提供できることを示すハック。
    • iframeを避けるには、いくつかの属性があれば十分だと指摘。
    • 実用的なツールというよりは、主張を証明するためにより有用かもしれない。
    • htmxが提供するものと比べると複雑すぎると指摘。

  • 3つ目のコメント要約:

    • 2001年ごろにHTMLベースのメールクライアントを開発した経験を共有。
    • 隠しiframeを使ってサーバーからデータを読み込み、DOMを操作していた。
    • 当時はブラウザ対応が十分ではなかったが、基本的な仕組みは同じ。
    • 多くのライブラリを必要とせず、簡潔なパッケージとして実装されている点を評価。
    • 現在広く使われているReactなどのフロントエンドフレームワークと比べても、多くのユースケースに適している可能性がある。

  • 4つ目のコメント要約:

    • DOMをレスポンスで置き換える行為はプラットフォームの一部になるべきだと強く主張。
    • 外部コンテンツを宣言的にページへ読み込める要素に向けた第一歩を提案。
    • HTMLはリンク先になれる要素をサポートすべきだと言及。

  • 5つ目のコメント要約:

    • プラットフォームを本当に理解している人による見事なデモだと称賛。
    • 実際に使う可能性は低いが、それでも素晴らしいと評価。

  • 6つ目のコメント要約:

    • インラインイベントリスナーから this. を削除すれば、コードサイズをさらに減らせると提案。
    • スニペットで10バイト節約できるヒントを提供。

  • 7つ目のコメント要約:

    • target を使うことで、JSが無効なときにhtmxのようなグレースフルデグラデーションにならない可能性があると指摘。
    • JS無効環境について理想主義的な見方を示す。

  • 8つ目のコメント要約:

    • <slot> 要素をこのように再利用するのは悪いアイデアだと指摘。
    • ブラウザにおいて <slot> は非常に特定の動作を持ち、ライブラリが何をしようとホスト要素の子に置き換えられると説明。
    • このような用途には <output> 要素がすでに存在すると言及。

  • 9つ目のコメント要約:

    • デモセクションには改善が必要だと指摘。
    • 「タブ」をクリックしてサンプルコードを切り替えると履歴イベントは追加されるが、URLは更新されない。
    • 「単なるHTML」を掲げながら、Web/UXの基本ルールを破っていると批判。

  • 10つ目のコメント要約:

    • pjaxとの類似を思い起こさせると指摘。pjaxはiframeの代わりにXHRを使い、デフォルトでpushStateを使うことで戻るボタンが機能するようにしている。