BT

InfoQ ホームページ ニュース JSX代替のHTM 3.0がリリース、静的サブツリーのキャッシュとTypeScriptをサポート

JSX代替のHTM 3.0がリリース、静的サブツリーのキャッシュとTypeScriptをサポート

ブックマーク

原文(投稿日:2020/02/05)へのリンク

1KB未満でトランスパイラ不要なJSX代替であるHyperscript Tagged Markup(HTM)ライブラリが、3度目のメジャーバージョンをリリースした。テンプレートの静的セクションの自動検出とキャッシュにより、テンプレートのレンダリングが最適化されている。TypeScriptタイピングファイル(typing file)の追加とドキュメントアップデートも提供される。

HTM 3.0では、静的ノードの検出とキャッシュが可能になった。動的部分を含まないノードは、HTMが静的であると判断する。静的というのは、そのノードあるいは子ノードがテンプレート文字列でわたされる値に依存しない、という意味だ。リリースノートには次のような例が記載されている。

html`
 <div>
   <p class="a">
     This is a <em>static</em> subtree.
   </p>
   <p class="b">
     This is ${"not"}.
   </p>
 </div>
`;

この例では、<p class="a">をルートとするサブツリーが静的で、<p class="b">をルートとするサブツリーは静的ではないと判断される。リリースノートには次のような説明がある。

テンプレートが最初に評価される時に、HTMはh関数の生成した<p class="a">サブツリーをキャッシュして、以降の評価ではその値を使用します。

静的サブツリーのキャッシュによってUIライブラリは、参照上同一(referentially-equal)なノードのレンダリングを省略することができるため、レンダリングパフォーマンスの向上が期待できる。HTMとPreactのメンテナであるJason Miller氏は、サーバレンダリング時のパフォーマンスも向上する、とTwitterで述べている

クライアント上と同じように、静的サブツリーのメモリ消費量とレンダリング時間を削減することができるのです。

レンダリングのパフォーマンスの違いは、次のデモから確認することができる。

HTM 3 caching demo

デモでは、最初のレンダリングが2回目以降よりもかなり時間を要していることが分かる。同じような最適化機能は他のUIライブラリにもあるかも知れないが、HTM 3は、(type, props, ...children) => Xという形式のハイパースクリプト関数hを公開する任意のライブラリ(React、Preact、lit-htmlなど)でそれを可能にする。実際にHTM 3は、innerHTMLの更新で構成されたような、最小限のレンダリングテクニックでも使用することができる

Joachim Viide氏はTwitterで、次のようにコメントしている。

HTMのキャッシュはhttps://babeljs.io/docs/en/babel-plugin-transform-react-constant-elementsにあるように、スマートさではやや欠けますが、完全にランタイムで行われます。どちらの場合(React+プラグイン、React+HTML)でも、静的なVDOMノードオブジェクトがレンダリング間で再利用され、Reactはその情報("old_vnode == new_vnode")を使って差分処理を省略することができるのです。

Preactをバンドルしたビルドおよび最適化済みのHTMも提供されており、HTM 3.0で新しくなったバンドルでは、hookをサポートしたPreact Xバージョンが使用されている。さらにHTM用のタイピングファイルとドキュメントのアップデートも追加されている。

前バージョンのHTM 2では、サイズと速度が改善され、サーバレンダリングが可能になり、JSXに近い構文が採用された。HTM 3では静的サブツリーのキャッシュが追加されたが、バンドルサイズで700バイト程度という軽量さは維持されている。

JSXを使用可能な場所であれば、HTMを使用することができる。HTMはApache 2.0オープンソースライセンス下で利用可能だ。HTMのGitHubプロジェクトには、さまざまな種類のデモやサンプルが提供されている。コントリビューションやフィードバックも、GitHubプロジェクト経由で提出可能である。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT

あなたのプロファイルは最新ですか?プロフィールを確認してアップデートしてください。

Eメールを変更すると確認のメールが配信されます。

会社名:
役職:
組織規模:
国:
都道府県:
新しいメールアドレスに確認用のメールを送信します。このポップアップ画面は自動的に閉じられます。