Berkenalan dengan Alpine.JS

Mualip Suhal
Wednesday, Jan 20, 2021

Apa itu Alpine.JS

Alpine.js adalah library JavaScript yang menawarkan sifat reaktif dan deklaratif, yang mana dirancang bisa menulis JavaScript ke markup HTML. Meskipun mirip dengan framework populer seperti Angular, React, dan Vue, tetapi Alpine.js ini berukuran sangat kecil. Tidak ada proses build dan ukuran file library sekitar 8KB dalam format gzip.

Alpine.js pertama kali dirilis sebagai versi 0.1.0 oleh Caleb Porzio pada 29 Nov 2019 dan versi 1.0 dirilis pada 19 Des 2019

Alpine.js tidak dimaksudkan untuk menggantikan framework seperti Angular, React, dan Vue. Jika kamu membuat aplikasi satu halaman yang besar dan sangat interaktif, yang terbaik adalah tetap menggunakan Angular, Vue, atau React. Kasus penggunaan tipikal untuk Alpine JS adalah jika kamu memiliki halaman yang dirender di sisi server dari Laravel atau Rails dan kamu ingin menambahkan komponen dinamis ke dalamnya. komponen dinamis seperti dropdown, tombol, navigasi, galeri gambar, paginasi, atau modals. Sintaksnya sangat mirip dengan Vue JS tetapi Alpine.js tidak memiliki dom virtual.

Pada dasarnya, Alpine.js seperti Tailwind untuk JavaScript. Dengan Alpine.js, kamu 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 — Seperti Bootstrap dan JQuery.

Instalasi dan penggunaan dasar

Sekarang mari beralih ke langkah-langkah instalasi dan mengotori tangan kita dengan Alpine.js. Menginstal Alpine.js itu mudah. Kamu dapat menggunakan npm atau CDN dan menambahkan berikut ini ke bagian head HTML kamu.

Instalasi CDN

Tambah source code di bawah ini ke akhir bagian <head> file HTML kamu.


    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js" defer></script>

Instalasi NPM

Jalankan perintah dibawah ini pada terminal untuk meng-install


    npm i alpinejs

Tambahkan source code di bawah ini untuk import Apline.js


    import 'alpinejs'

Penggunaan dasar


    <html>
        <head>
            <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.8/dist/alpine.js" defer></script>
        </head>
        <body>
            <div x-data="{ isOpen: true }">
                <button x-on:click=" isOpen = !isOpen">Toggle</button>
                <h1 x-show="isOpen">Alpine.js</h1>
            </div>
        </body>
    </html>

Langkah pertama untuk menggunakan Alpine adalah menentukan sebuah state. state memiliki cakupan yang sama dengan scope HTML yang kamu masukkan.

Dalam kode di atas, kita mendefinisikan cakupan menggunakan direktif x-data dengan mengirimkan objek sebagai nilai dari state. Direktif x-on menjadi listiner pada event. Untuk elemen tombol, kita melihat event ketika diklik, yang mengubah nilai isOpen menjadi true atau false. Perintah x-show menampilkan atau menyembunyikan elemen dari DOM bergantung pada nilai properti isOpen objek status.

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.

Sumber: