Mencoba Alpine.js, Tailwind for Javascript
Tags: alpinejs, tailwindcss
Published: 2020-09-11 15:50:24

---
title: Mencoba Alpine.js, Tailwind for Javascript
published: true
date: 2020-08-30 05:45:11 UTC
tags: alpinejs,tailwind
canonical_url: https://medium.com/@armedi.id/mencoba-alpine-js-tailwind-for-javascript-ff6dd64611b9
---

Di tengah popularitas _frontend libraries_ seperti [React](https://reactjs.org/), [Vue](https://vuejs.org/), atau [Svelte](https://svelte.dev/) yang sekarang sedang naik daun, ada satu _library_ yang relatif masih baru, yaitu [Alpine.js](https://github.com/alpinejs/alpine). 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](https://angular.io/), [Ember.js](https://emberjs.com/), [Preact](https://preactjs.com/), 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](https://tailwindcss.com/) 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.

```html
<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/](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.

![](https://cdn-images-1.medium.com/max/926/1*Ss6Fmj0f4XDz_I1P0pFTPg.png)<figcaption>markup + css (tailwind) + alpine, total hanya 12.8 kB</figcaption>

{% github armedi/pokedex-alpinejs no-readme %}

Live _website-_nya bisa diakses di [https://pokedex-alpinejs.netlify.app/](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.