HTMX: Masa Depan Web

HTMX: Memperkemas Pembangunan Web dengan Interaksi berpaksikan HTML

Siaran ini meneroka pengalaman saya menyepadukan HTMX ke dalam platform SaaS yang dibina dengan Tailwind CSS (depan), Python dan Flask (belakang). Walaupun saya sudah biasa dengan teknologi lain, HTMX ialah tambahan baharu pada kit alat saya. Siaran ini memperincikan pelaksanaannya.

Seni Bina Berorientasikan JSON: Cabaran

Sebelum terjun ke HTMX, memahami sasarannya adalah penting. Aplikasi tindanan penuh tradisional sering bergantung pada seni bina berorientasikan JSON. Bahagian belakang menghantar data JSON dan bahagian hadapan memaparkannya. Pendekatan ini, sambil meningkatkan interaktiviti, mengalami overhed data yang ketara. Muatan JSON boleh menjadi 10 kali lebih besar daripada HTML yang setara, yang membawa kepada prestasi yang lebih perlahan.

HTMX: Anjakan Paradigma

HTMX menangani ketidakcekapan ini dengan menyokong pelayan untuk mengembalikan HTML secara langsung. Ini meminimumkan pemindahan data, meningkatkan pengalaman pengguna. HTMX melangkaui penggantian JSON yang mudah; ia menyepadukan logik sisi pelayan dan sisi klien dengan ketat, menghasilkan interaksi yang lebih pantas dan lebih responsif.

Yang penting, HTMX tidak menggantikan JavaScript. Ia memerlukan kemasukan JavaScript (melalui CDN atau fail setempat).

Kelebihan utama HTMX berbanding rangka kerja JavaScript lain ialah keupayaannya untuk berinteraksi dengan API secara langsung melalui atribut HTML, meminimumkan kod JavaScript.

Contoh: Mengambil dan Memaparkan Data

Kod berikut menunjukkan cara untuk mengambil dan memaparkan data daripada API menggunakan HTMX, templat sisi klien dan enjin templat Nunjucks:

<code class="language-html"><title>Nibodhdaware News Blog</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"></code>

Ini menyediakan HTML, termasuk HTMX dan sambungan templat sisi kliennya (diterangkan kemudian). Nunjucks digunakan untuk templat.

Logik pemaparan utama:

<code class="language-html"><h1>Nibodhdaware</h1>
<p>HTMX JSON API Test</p>
<div hx-ext="client-side-templates">
  <div hx-get="https://api.spaceflightnewsapi.net/v4/blogs/" hx-trigger="load" nunjucks-template="blogs-template">
    <template>
      <p>The `hx-ext='client-side-templates'` attribute tells HTMX to utilize the extension.  We're using the Space Flight News API. `hx-trigger="load"` sends a GET request on page load.  `nunjucks-template` identifies the template.</p>

      <p>The API response schema is:</p>
      <code>
      {
        "count": 123,
        "next": "...",
        "previous": "...",
        "results": [ /* array of blog objects */ ]
      }
      </code>

      <p>Nunjucks (similar to Jinja) uses `{% %}` for code blocks and `{{ }}` for variables.  `{% if previous %}` checks for pagination. `{% for blog in results %}` iterates through blog posts, accessing properties like `{{ blog.url }}` and `{{ blog.title }}`.</p>

      <p>The blog posts are loaded directly from the API upon page load.</p>
      <img src="/uploads/20250116/17370305576788fb9d220a3.jpg" width="800" height="400" loading="lazy">

      <p>The remarkable aspect is the direct use of API data without explicit fetch calls or JavaScript manipulation of `innerHTML`.</p>
    </template>
  </div>
</div></code>

Kesimpulan

Walaupun anda mungkin masih perlu mencipta API JSON, HTMX memudahkan bahagian hadapan dengan membenarkan pemaparan HTML terus, mengurangkan kerumitan pembangunan dan meningkatkan prestasi.

Atas ialah kandungan terperinci HTMX: Masa Depan Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!