新しいツールは、合理化されたサーバーレンダリングUIでより高速なWebサイトを約束します

みなさん、こんにちは！この記事では、皆さんの興味を引くかもしれないプロジェクトの開始についてお話ししたいと思います。コードの作業は長い間行われ、貢献者からの支援も受けましたが、現在は製品版の準備が整ったと思います。

さて、実際にHMPLというプロジェクトを紹介するのは非常に興味深いでしょう。これは、サーバーからクライアントに UI を表示するための小さなテンプレート言語です。これは、フェッチを介してサーバーに送信され、既製の HTML に処理されるカスタマイズ可能なリクエストに基づいています。

実際、これはhtmxやalpine.jsなどのモジュールの代替として非常に優れています。これは、最小限の設定可能なパラメータと出力ファイルのサイズで動的なインターフェイスを作成できるためです。これは、サーバーで UI を準備し、それを API 経由でクライアントに転送するだけで実現されます。

これはコードではどのように機能するのでしょうか?

入力とボタンだけがある小さな電子メール登録フォームを例に挙げてみましょう。

 import { compile } from "hmpl-js"; const templateFn = compile( `<div> <form onsubmit="function prevent(e){e.preventDefault();};return prevent(event);" id="form"> <div class="form-example"> <label for="name">Enter your email: </label> <input type="email" name="email" id="email" required /> </div> <div class="form-example"> <input type="submit" value="Register!" /> </div> </form> <p> { { "src":"/api/register", "after":"submit:#form", "repeat":false, "indicators": [ { "trigger": "pending", "content": "<p>Loading...</p>" } ] } } </p> </div>` ); const initFn = (ctx) => { const event = ctx.request.event; return { body: new FormData(event.target, event.submitter), credentials: "same-origin", }; }; const obj = templateFn(initFn); const wrapper = document.getElementById("wrapper"); wrapper.appendChild(obj.response);

コードの結果:

このフォームにかなりの文字数が費やされており、Vue などのフレームワークで同じことを行うとすると、pinia をサーバーと連携して接続し、多数のコンポーネントを作成する必要があり、これにより大量のディスク領域が消費されることになります。

サーバーサイドアプローチの重要性

ここで、数十ページと、多数のフォーム、ボタン、カルーセル、メニュー、サブメニューなどを含むサイトがあると想像してください。この場合、膨大な数のファイルとモジュールが作成され、最終的にはビルドされたバージョンでエンドユーザーによって読み込まれます。これは数十秒間続く可能性があり、ユーザーが初めてサイトにアクセスした場合、サイトを閉じる可能性が高くなります。

そのため、コンバージョン率が低下し、販売者が構築したセールス ファネルが単純にこのために効果を発揮しなくなる可能性があります。したがって、このプロジェクトは、ページの読み込み速度が大幅に向上し (UI 全体がサーバー上にあるため)、クライアント上でユーザーがフレームワークで実行されたのと同じものを見ることができるため、非常に役立ちます。

他のモジュールと比較したこのモジュールの利点:

まず、HTMX を使用する場合、モジュールがフェッチで動作し、完全にカスタマイズされていることをここで指摘する価値があります。つまり、好きな場所にリクエストを送信し、DOM に好きなだけノードを作成できます。alpine.js と比較すると、サーバーと連動してダイナミクスを作成できるため、プロジェクトに追加のモジュールを含めずに済みます。

.hmpl 拡張子を持つ個々のファイルを操作することもできますが、現時点では webpack のみです。

結果と発展について少し

このプロジェクトに興味を持っていただければ幸いです。コメントでご意見をお聞かせいただければ幸いです。このプロジェクトには長い時間がかかりましたが、すばらしい Web サイト、リポジトリ、その他多くのものが構築されました。ご迷惑でなければ、プロジェクトの開発に参加していただければ幸いです。毎週、助けが必要な未解決の問題を公開するようにしています。一緒に作業できたら素晴らしいと思います :)。また、まだ始めたばかりなので、GitHub にはまだ星があまりありません。プロジェクトが気に入ったら、星で評価していただけると嬉しいです。ありがとうございます!