Mencoba Alpine.js, Tailwind for Javascript

#alpinejs #tailwindcss

Di tengah popularitas frontend libraries seperti React, Vue, atau Svelte yang sekarang sedang naik daun, ada satu library yang relatif masih baru, yaitu Alpine.js. Versi 1.0.0-nya rilis pada Desember 2019, belum genap setahun yang lalu.

Barangkali pertanyaan yang muncul adalah apa kita masih perlu library baru lagi? Bukannya sekarang udah kebanyakan library? Ya, selain tiga nama populer yang saya sebutkan diatas masih ada lagi nama-nama seperti Angular, Ember.js, Preact, dan masih banyak lagi yang lainnya.

Tidak ada salahnya mencoba dan mempelajari library baru. Bisa jadi cocok untuk dipakai pada kasus-kasus tertentu yang akan datang nantinya. Karena tidak semua project harus dikerjakan dengan React atau Vue. Mungkin saja ada yang lebih cocok dengan solusi dari library yang lebih sederhana, atau bahkan tanpa library tambahan sama sekali.

Sebagai pembeda dengan yang lain, Alpine.js menawarkan ukuran yang kecil (8 kB minified + gzipped), dan kemudahan penggunaan. Dengan Alpine.js, anda bisa membuat website interaktif tanpa harus menulis javascript sama sekali. Membuat dan memanipulasi state, semuanya bisa dilakukan langsung pada markup html. Makanya di repositorinya disebut bahwa Alpine.js ini seperti tailwind tapi untuk javascript.

Sintaksnya sangat mirip dengan Vue. Anda yang sudah terbiasa menggunakan v-bind, v-model, dan v-on di Vue, akan menemukan directives yang sama di Alpine.js, tinggal mengganti v-* dengan x-*. Bedanya di Alpine.js deklarasi data juga dilakukan pada markup dengan menggunakan directive x-data.

<div x-data="{ open: false }">
  <button @click="open = true">Open Dropdown</button>
  <ul x-show="open" @click.away="open = false">
    Dropdown Body
  </ul>
</div>

Contoh di atas saya ambil dari dokumentasi Alpine.js, dan saya yakin sintaksnya akan langsung dipahami oleh yang pernah mencoba Vue.

Saya pun mencoba membuat sebuah web sederhana menggunakan Alpine.js untuk menampilkan list pokemon serta dilengkapi fitur pencarian berdasarkan nama dan tipe monster. Sumber data dari https://pokeapi.co/ yang sudah saya fetch terlebih dahulu dan diolah menjadi sebuah file json. Data pokemon ini dipilih karena populer dan jumlah itemnya cukup banyak (1048 item dari pokeapi.co), sehingga cocok kalau ditambahkan fitur pencarian.

markup + css (tailwind) + alpine, total hanya 12.8 kB

armedi / pokedex-alpinejs

Live _website-_nya bisa diakses di https://pokedex-alpinejs.netlify.app/

Kesimpulan

Setelah sedikit bermain-main dan eksplorasi apa saja yang ditawarkan oleh Alpine.js, kesimpulan saya adalah library ini cocok dipakai untuk membuat halaman web yang membutuhkan sedikit tambahan interaktifitas seperti mengubah-ubah state active tab atau untuk toggling on dan off.

Untuk kebutuhan yang lebih kompleks dan aplikasi yang lebih besar, mungkin anda perlu mempertimbangkan untuk menggunakan library yang lebih advance seperti React atau Vue.