idwebhost
icon icon icon icon icon icon •

Apa Itu HMPL? Kenali Fitur, Keunggulan dan Cara Menggunakan

Apa Itu HMPL? Kenali Fitur, Keunggulan dan Cara Menggunakan
Ade Gusti's avatar
Ade Gusti

Waktu membaca menit

Kategori Website Development

Update Terakhir 18 Feb 2025

Dalam dunia pengembangan web, efisiensi dan ukuran bundle aplikasi menjadi faktor penting. HMPL hadir sebagai solusi templating engine yang membantu menyederhanakan proses rendering antarmuka pengguna (UI) langsung dari server. Tapi, apa itu HMPL? Bagaimana cara kerjanya, dan mengapa semakin banyak developer yang tertarik menggunakannya? Yuk, kita kupas tuntas dalam artikel ini!

Mengenal Apa Itu HMPL?

Pengertian HMPL

HMPL (Hyper Minimalist Page Language) adalah bahasa template kecil untuk menampilkan UI dari server ke klien. Sebagai salah satu bahasa templating, HMPL memungkinkan tampilan UI dengan ukuran file yang lebih kecil daripada framework JavaScript modern. 

HMPL berbasis pada permintaan kustom melalui Fetch API dan memprosesnya menjadi HTML siap pakai. Proses ini menawarkan cara baru dalam membangun aplikasi berbasis server-side rendering (SSR) dengan ukuran bundle yang lebih kecil. 

Dengan sintaks berbasis objek yang terintegrasi dengan JSON5, HMPL membantu mengurangi ukuran file JavaScript secara drastis tanpa mengorbankan fungsionalitas tampilan antarmuka.

Contoh Penggunaan HMPL

Berikut adalah contoh implementasi sederhana dari HMPL:

import hmpl from "hmpl-js";

const templateFn = hmpl.compile(
  `<div>
      <button data-action="increment" id="btn">Click!</button>
      <div>Clicks: {{ src: "/api/clicks", after: "click:#btn" }}</div>
  </div>`
);

const clicker = templateFn(({ request: { event } }) => ({
  body: JSON.stringify({ action: event.target.getAttribute("data-action") })
})).response;

document.querySelector("#app").append(clicker);

Kode di atas menunjukkan bagaimana HMPL menangani aksi tombol yang mengirimkan permintaan ke server, lalu menampilkan hasilnya ke dalam UI.

Baca Juga: Apa Itu Website Dinamis? Kelebihan dan Manfaat Website Dinamis

HMPL

Bagaimana Cara Kerja HMPL?

Sederhananya, HMPL memproses data di server, mengirimnya ke klien, lalu merendernya menjadi HTML dinamis tanpa perlu memuat ulang halaman. 

Kalau kamu ingin tahu bagaimana cara kerja HMPL sebagai templating engine, simak penjelasannya berikut ini:

1. Sintaks Berbasis Objek yang Mudah Dibaca

HMPL menggunakan sintaks berbasis objek yang sangat mirip dengan JSON5. Ini membuat pengembang lebih mudah dalam memahami dan menulis HMPL, bahkan untuk kalian yang baru mengenal templating engine. 

Dengan format ini, kamu bisa mendefinisikan bagaimana data diambil dari server dan bagaimana data tersebut dirender menjadi HTML, tanpa perlu menulis kode HTML yang berlebihan. 

Keuntungan utamanya adalah kode yang lebih bersih dan lebih mudah dikelola.

2. Permintaan Data dengan Fetch API yang Fleksibel

HMPL memanfaatkan Fetch API untuk mengirimkan permintaan data ke server. 

Dengan menggunakan Fetch, pengembang bisa dengan mudah menyesuaikan permintaan, seperti memilih metode HTTP, menambahkan header, atau mengonfigurasi payload sesuai kebutuhan proyek. 

Keunggulan utama penggunaan Fetch API adalah kemampuannya untuk memanfaatkan fitur JavaScript modern, sehingga proses pengambilan dan pengiriman data jadi lebih efisien.

Selain itu, Fetch API memberikan kontrol yang lebih baik atas proses pengambilan data, termasuk untuk membatalkan permintaan dengan menggunakan AbortController, yang sangat berguna dalam aplikasi yang memerlukan respons cepat.

3. Rendering HTML Dinamis di Sisi Klien

Setelah data diterima dari server, HMPL merendernya langsung menjadi HTML di sisi klien. Hal ini memungkinkan pembaruan UI secara dinamis tanpa perlu memuat ulang seluruh halaman.

Pendekatan ini mirip dengan teknik yang digunakan oleh framework modern seperti React atau Vue, yang memungkinkan pengembang untuk mengelola tampilan secara efisien tanpa harus menunggu seluruh halaman dimuat ulang.

Baca Juga: Jamstack Adalah: Definisi, Cara Kerja, Fungsi & Kelebihannya

Fitur-Fitur Unggulan HMPL

Menggunakan HMPL dapat mengurangi ukuran bundle aplikasi secara signifikan. Berikut ini beberapa fitur unggulan HMPL antara lain:

  • Customizable: Dapat mengirim permintaan kustom ke server saat menerima UI.
  • Memory Preserving: Mengurangi ukuran file pada klien secara drastis.
  • Berbasis Fetch API: Menggunakan standar modern, bukan XMLHTTPRequest.
  • Server-Oriented: Berinteraksi langsung dengan server melalui markup dengan sedikit kode JavaScript.
  • Mendukung Generasi Ribuan Node DOM: Cocok untuk menangani komponen besar baik di server maupun klien.
  • Simple & Flexible: Bisa digunakan di berbagai proyek, baik melalui script maupun file dengan ekstensi .hmpl.
  • Terintegrasi dengan JSON5: Fleksibel dalam penulisan objek dan didukung parser yang banyak digunakan.
  • Ukuran Bundle Kecil: Banyak fungsi dalam beberapa kilobyte saja.

Dengan fitur-fitur ini, HMPL menjadi solusi yang menarik bagi developer yang ingin membuat aplikasi web cepat, ringan, dan efisien.

Apa Bedanya HMPL vs HTMX?

Banyak pengembang pemula menganggap bahwa HMPL adalah alternatif HTMX karena pendekatan berbasis server. HTMX dan HMPL sama-sama mendukung pembuatan Server-Side Rendering (SSR) tanpa banyak kode JavaScript di klien. 

Namun demikian, HMPL menggunakan sintaks berbasis objek yang menawarkan cara berbeda dari HTMX dalam menangani interaktivitas dan dinamisme aplikasi web. 

Berikut adalah perbandingan antara HMPL vs HTMX, serta alasan mengapa HMPL sering dianggap sebagai alternatif HTMX:

  • Pendekatan dan Tujuan:
    • HTMX adalah pustaka JavaScript yang menambahkan interaktivitas pada halaman web menggunakan atribut HTML khusus, memungkinkan pembaruan konten dinamis tanpa menulis JavaScript tambahan.
    • HMPL adalah bahasa templat berbasis server yang merender HTML di sisi klien, menggunakan Fetch API dan sintaks berbasis objek, mengurangi ketergantungan pada JavaScript di sisi klien.
  • Sintaks dan Penggunaan:
  • HTMX menggunakan atribut HTML seperti hx-get, hx-post, dan hx-target untuk menentukan interaksi.
  • HMPL menggunakan sintaks berbasis objek yang terintegrasi dengan JSON5, memudahkan pengelolaan dan pemeliharaan kode.

Fleksibilitas dan Ekstensi:

  • HTMX memungkinkan penambahan interaktivitas tanpa mengubah struktur halaman.
  • HMPL mendefinisikan komponen dan interaksi secara terpisah, memfasilitasi penggunaan ulang di berbagai bagian aplikasi.

Keunggulan HMPL

  • Ukuran lebih kecil dibanding HTMX, membuat aplikasi lebih ringan.
  • Menggunakan fetch API, standar modern untuk komunikasi dengan server.
  • Dapat dikombinasikan dengan JSON5 untuk manipulasi data yang lebih fleksibel.

Kekurangan HMPL

  • Tidak mendukung WebSockets, sehingga implementasi real-time menjadi lebih sulit.
  • Tidak didukung di beberapa browser lama karena mengandalkan fetch API.
  • Masih tergolong baru, sehingga bisa memiliki bug atau keterbatasan dibandingkan framework yang sudah lebih matang seperti HTMX.

Baca Juga: Cara Meningkatkan Performa JavaScript: Website Jadi Sat Set!

HMPL templating engine

Cara Menggunakan HMPL untuk Web Developer

Nah, setelah kamu memahami apa itu HMPL?, mulai dari definisi, cara kerja, fitur dan perbedaannya dengan HTMX, kini saatnya kamu tahu cara menggunakan HMPL.

Mengutip dari GitHub, HMPL bisa kamu instal dengan beberapa cara, tergantung kebutuhan proyek yang sedang kamu lakukan:

1. Menggunakan Package Manager (npm)

Cara ini cocok bagi developer yang menggunakan Node.js dan membutuhkan pengelolaan dependensi:

npm i hmpl-js

File HMPL bisa ditemukan di dalam direktori node-modules/hmpl/dist.

2. Menggunakan CDN

Jika ingin menggunakannya langsung di dalam HTML tanpa pengaturan tambahan, bisa menggunakan CDN:

<script src="https://unpkg.com/json5/dist/index.js"></script>
<script src="https://unpkg.com/hmpl-js/dist/hmpl.min.js"></script>

Dengan metode ini, HMPL bisa langsung digunakan tanpa perlu konfigurasi tambahan.

3. Manual Download

Bagi yang ingin lebih fleksibel, HMPL bisa diunduh dan dimasukkan langsung ke dalam proyek:

<script src="./hmpl.min.js"></script>

Untuk performa yang lebih baik, disarankan menggunakan versi minified agar ukuran file lebih kecil.

Baca Juga: 11 Tips Mempercepat Website Magento: Cache sampai Setup CDN

Kesimpulan

Jadi, apa itu HMPL? HMPL adalah templating engine yang efisien untuk pengembangan aplikasi web ringan. Dengan pendekatan berbasis Fetch API dan JSON5, HMPL menawarkan keunggulan dibandingkan metode tradisional seperti HTMX.

Keunggulannya terletak pada kemampuannya untuk merender HTML di sisi klien tanpa memerlukan JavaScript berukuran besar, yang membuatnya ideal untuk aplikasi server-side rendering (SSR) dengan ukuran bundle yang lebih kecil.

Jika kamu berencana membangun aplikasi web dengan HMPL, pilihan hosting yang tepat sangat penting untuk mendukung performa aplikasi kamu. Gunakan VPS Murah dari IDwebhost, yang menawarkan layanan hosting yang andal dan cepat, ideal untuk proyek berbasis HMPL. 

Dapatkan VPS Murah Sekarang!

Related Articles