Kenapa harus banget Alpine.js?

Alpine.js adalah library kecil yang luar biasa untuk menambahkan “taburan interaktivitas JavaScript”.

Sebenarnya memang sudah jadi tujuan hadirnya JavaScript sejak awal: menambah fungsionalitas pada halaman HTML (misalnya, menjalankan hal yang bersifat interaktif pada elemen dan mempengaruhi cara kerja HTML itu sendiri).

Alpine.js sangat memperhatikan kondisi di sisi klien, dengan potongan-potongan kode JavaScript nya yang terbilang sangat sedikit (lihat saja ukuran filenya, sangat kecil).

Hal “magic” yang bisa dilakukannya sebagai contoh, pelacakan elemen kotak input, membuka modal, dan lain-lain.

Kalian sebenarnya juga bisa menggunakan Vanilla JavaScript untuk melakukan hal itu, tetapi yang jadi atensi disini adalah Alpine sangat menyederhanakan penerapannya.

Penulis benar-benar sangat suka hal ini jika disandingkan dengan kode HTML sisi server menggunakan Codeigniter 4, dan interaksi klien-server yang ditangani melalui jQuery. Untuk saat ini menurut penulis itu adalah stack yang ciamik.

Mengapa penulis menggunakannya?

Izinkan penulis memberikan contoh praktis terkait bagaimana Alpinejs menjadi solusi atas apa yang melatarbelakangi penyederhanaan ini.

Misal, membuat fitur menutup modal pop up (didefinisikan sebagai element tag dialog) saat area luarnya di klik.

Kalau pakai javascript biasa, kodenya akan seperti berikut

function clickAreaLuar(element, callback) {
  document.addEventListener('click', (event) => {
    if (!element.contains(event.target)) {
      callback()
    }
  }, true)
}
const targetElement = document.querySelector('#elementIIDNya')
clickAreaLuar(targetElement, () => {
  document.querySelector('dialog').close()
})

Bahkan kalian juga perlu memberikan value pada id yang unik, lalu memikirkan di mana peletakan yang cocok untuk kode javascript diatas.

Dengan Alpine.js, semua kode JavaScript tersebut dapat diubah menjadi 1 baris yang dapat kalian masukkan langsung pada elemen yang di inginkan:

@click.outside.capture="document.querySelector('dialog').close()"

Kodenya jauh lebih sedikit, deklaratif, tidak perlu menentukan isian id untuk elemen yang akan penulis gunakan hanya untuk hal tersebut, bahkan logikanya bersifat lokal terhadap elemen HTML yang terlibat (prinsip LoB = Locality of Behavior).

Penulis berikan contoh lain lagi, yaitu menampilkan dan menyembunyikan menu saat berada pada tampilan mobile/seluler, kita biasa menyebutnya sebagai “Hamburger button”, umum kita terapkan bukan?

Dengan Alpine.js kalian dapat menaruh variabel tampilkanMenu pada elemen div atau kontainer.

Lalu mensimulasikan sebuah tombol agar dapat menampilkan dan menyembunyikan kontainer tersebut.

<div
  x-data='{showMenu : false}'>
  <button
    @click='showMenu = !showMenu'>
    Tampil/Sembunyikan
  </button>
  <div x-show='showMenu'>
    ...isi konten menunya
  </div>
  ...kode lainnya
</div>

Klik tombol untuk menampilkan konten menu (variable tampilkanMenu berisi nilai true), klik lagi untuk menyembunyikannya (variable tampilkanMenu berisi menjadi nilai false).

Itu dia contoh sederhananya, maaf hanya 2 ya, tetapi intinya penulis berharap kalian mengerti inti nya.

Dalam waktu dekat penulis akan merilis portal belajar web gratis, nantinya akan ada tutorial Alpine.js nya juga, soo stay tune!.

Suka dengan yang artikel ini? cukup traktir kopi saya