こんにちは、みんな！この記事では、hmpl.

この記事に登場する技術的アプローチは新しいものではありませんが、それでも今日では話題にする価値があるほど人気が​​あります。

JavaScript ファイルのサイズを小さくすると、クライアントでのページの読み込みが速くなります。最新の SPA を使用すると、すべての縮小を考慮したとしても、ファイル サイズは依然としてかなり大きいことがわかります。もちろん、ページを一度読み込むと、そのページをナビゲートするのは簡単になりますが、最初の読み込み時間自体は 1 秒から、インターネット接続が悪い場合には数分かかる場合があります。そんなに長く待ちたいと思う顧客はほとんどいないでしょう。

ほとんどのフレームワークやライブラリを使用して UI を作成する場合、多くの定型コードを記述する必要があります。各シンボルはメモリ領域を占有します。 Vue.js クリッカーを見てみましょう:

createApp({
  setup() {
    const count = ref(0);
    return {
      count,
    };
  },
  template: `

        Click!
        
Clicks: {{ count }}
    
`,
}).mount("#app");

非常に単純なクリッカーですが、アプリケーションが多かれ少なかれ大きい場合は言うまでもなく、js でかなりの量のコード行が必要になります。

カンマが 2 つなくても、数バイト減る可能性があります

これは Vue だけの問題ではなく、同様の方法で動作する他のフレームワークやライブラリでも問題になります。しかし、それだけではありません。膨大な数の追加モジュールがそれらに接続され、同じ数の追加モジュールがそれらに接続され、「無限」まで続きます。

実際、この問題に対する解決策の 1 つはずっと前に提案されており、それは非常に簡単です。サーバー上で UI を準備し、それをクライアントにロードするだけです。このおかげで、アプリケーション ファイルのサイズを大幅に削減できます。これはまさに HMPL で使用されているアイデアです。

この例では、クリッカーも作成してみますが、hmpl.js を使用します。

document.querySelector("#app").appendChild(
  hmpl.compile(
    `

        Click!
        
Clicks: {{ src: "/api/clicks", after: "click:button" }}
    
`
  )().response
);

ご覧のとおり、UI は同じですが、ファイル サイズが少し小さくなります。

ファイルを縮小し、テンプレートから不要なスペースをすべて削除したとしても、おそらくファイルは同等かそれより大きくなるでしょうが、これは小さな例での単なる仮定です。大規模なアプリケーションを使用する場合、このアプローチでは js.

この例からわかるように、アプリケーションの状態を計算して保存する機能は、必要に応じてサーバーに移動できます。

この例からわかるように、アプリケーションの状態を計算して保存する機能は、必要に応じてサーバーに移動できます。膨大な数のユーザーがいる場合、サーバーがダウンするだけであることは明らかですが、ユーザー インターフェイスが同じであるという事実は重要です。

はい、もちろん、この方法にはそのような欠点があるだけでなく、UI の再利用性、すべてを 100 回もロードしないように UI をキャッシュする方法などの問題もあります。代替手段は重要であり、適切に構成されていれば、ほとんどの最新のソリューションと競合できます。

この記事を読んでいただきありがとうございます!

素材一覧:

https://hmpl-lang.github.io/#/docs
https://vuejs.org/guide/quick-start.html