Alpine js, framework javascript yang mudah dipakai

Sering ngga sih, mengerjakan proyek, tapi butuh hal hal seperti bikin dropdown, toggle sesuatu, bikin tab dll, akhirnya harus load jQuery secara keseluruhan? padahal yang dibutuhkan hanya bagian tertentu saja.

Alpine JS datang menyelamatkan kita! untuk keperluan seperti yang disebutkan di atas sampai fitur "reaktif" di framework "besar" lainnya, seperti Vue atau React, Alpine bisa melakukannya.

Tentang AlpineJS

Framework yang dimulai pada tahun 2019, ini dibuat oleh Caleb Porzio , orang yang sama membuat Laravel Livewire dan menulis buku tentang VS Code. Saat ini Alpine sudah mendapatkan sponsor dari tailwindcss.

Dengan rendah hati, Caleb menuliskan, kalau gaya syntax ini terinspirasi dari Vue dan ekstensi Angular. Ia pun berterima kasih untuk itu.

Yang menarik lagi Evan You, penulis framework VueJS pernah nge-tweet

tweet evan you ke alpine.js

Ia mengatakan, kalau Alpine JS mengisi ketika Vue terlalu berlebihan untuk menangani suatu kasus.

Cara install Alpine JS?

Untuk mulai menggunakan Alpine, kita hanya perlu load sumber filenya. Tidak perlu menginisialisasi atau melakukan berbagai macam aksi di command lines

Cara install

A. Install dari CDN

Ambil source code dari CDN langsung, letakkan di dalam tag Head

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

Untuk production pastikan menyertakan versi terakhir yang stabil. sebagai contoh saat artikel ini dibuat versi 2.6

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

B. Install dari NPM

npm i alpinejs

Masukkan di script kamu

import 'alpinejs'

C. Untuk IE11 support

<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine-ie11.min.js" defer></script>

Cara menggunakan AlpineJS

Setelah load dari souce codenya, kamu bisa langsung pakai, tanpa perlu inisialisasi apapun.

Menampilkan atau menyembunyikan (toggle) div dengan tombol

<div x-data="{ open: false }">
    <button @click="open=true">Open Modal</button>

    <div x-show="open" @click.away="open=false">
      Ini isi modal
    </div>
</div>

[[embed]]codepen=hilmanski/pen/QWWWeQW[[/embed]]

Penjelasan

Setiap ingin menggunakan Alpine, kita tinggal mendeklarasikan datanya di div yang mau menggunakannya.

x-data

Di sini kita memasukkan variable dan valuenya

Contoh kita membuat variable "open" yang nilai awalnya false.

@click

Saat item di klik, lakukan sesuatu

Contohnya kita mengubah nilai open menjadi true

x-show

Tampilkan div ini jika true. Sembunyikan jika false

@click.away

Saat area manapun diklik, kecuali item ini sendiri

Two way data Binding

<div x-data="{name:''}">
 <label for="name">Nama:</label>
 <input id="name" type="text" x-model="name" />
 <p x-text="name">
</div>

[[embed]]codepen=hilmanski/pen/dyMdMmb[[/embed]]

x-model

menyambungkan input dengan data

x-text

Mengubah isi dari text berdasarkan nilai data

Directive di Alpine JS

Directive di Alpine JS adalah attribute attribute di Alpine yang ditandai dengan

"x-NAMA" dengan kegunaannya masing-masing (seperti contoh sebelumnya).

Berikut daftar directive di Alpine JS:

x-data

Mendeklarasikan komponen Alpine

x-init

Menjalankan javascript saat komponen sudah diinialisasi. Seperti onMounted pada VueJS

contoh

<div x-data="{ foo: 'bar' }" x-init="foo = 'baz'"></div>

x-show

Toggle display:none; untuk menampilkan dan menyembunyikan elemen tersebut. Tergantung nilai false atau true

x-if

Mirip dengan x-show.

<template x-if="[expression]"><div>Some Element</div></template>

Perhatikan kita harus menggunakan kata "tag template".

x-bind

Mengatur nilai atribute ke hasil ekspresi Javascript

Contoh

<input x-bind:type="inputType">

Struktur dasarnya

<input x-bind:[attribute]="[expression]">

Untuk atribute kelas

<div x-bind:class="{ 'hidden': foo }"></div>
//Foo adalah tipe boolean. True atau False

Untuk attribute boolean

<button x-bind:disabled="myVar">Click me</button>

x-text

Mirip seperti x-bind, tapi menggunakan innerText

x-html

Mirip seperti x-bind, tapi menggunakan innerHTML

x-on

Memasang event listener ke element. Mengeksekusi expresi javascript saat dijalankan. Semua event javascript seperti click, keydown, mouse up dan lainnya bisa disini.

contoh

<button x-on:click="foo = 'bar'"></button>

x-on punya tambahan opsional, seperti

.away

<div x-on:click.away="showModal = false"></div>
//Saat semua diklik kecuali elemen tersebut

.prevent

memanggil preven default

x-ref

Menerima RAW DOM ke elemn tersebut

contoh

<div x-data="{ open: false }">
    <button
        @mouseenter.once="
            fetch('/dropdown-partial.html')
                .then(response => response.text())
                .then(html => { $refs.dropdown.innerHTML = html })
        "
        @click="open = true"
    >Show Dropdown</button>

    <div x-ref="dropdown" x-show="open" @click.away="open = false">
        Loading Spinner...
    </div>
</div>

Di sini, "x-ref dropdown", sebagai penanda, kalau kita akan mengganti nilainya nanti melalui $refs.dropdown

x-for

Melakukan pengulangan

<template x-for="item in items" :key="item">
    <div x-text="item"></div>
</template>

x-transition

Untuk menambahkan kelas dari beberapa tahapan transisi

<div
    x-show="open"
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0 transform scale-90"
    x-transition:enter-end="opacity-100 transform scale-100"
    x-transition:leave="transition ease-in duration-300"
    x-transition:leave-start="opacity-100 transform scale-100"
    x-transition:leave-end="opacity-0 transform scale-90"
>...</div>

x-spread

Mengambil element Alpine manjadi objek yang bisa dipakai berkali kali

<div x-data="dropdown()">
    <button x-spread="trigger">Open Dropdown</button>

    <span x-spread="dialogue">Dropdown Contents</span>
</div>

<script>
    function dropdown() {
        return {
            open: false,
            trigger: {
                ['@click']() {
                    this.open = true
                },
            },
            dialogue: {
                ['x-show']() {
                    return this.open
                },
                ['@click.away']() {
                    this.open = false
                },
            }
        }
    }

x-cloak

Attribute ini akan terhapus saat Alpine diinisialisasi. Berguna untuk menyembunyikan DOM yang diinisialisasi sebelumnya.

Tambahkan di CSS kamu

<style>
    [x-cloak] { display: none; }
</style>

Magic properties di Alpine JS

Ada juga beberapa property yang bisa kamu gunakan

$el

Mengambil DOM Node dari root

$refs

Pasangkan dengan x-ref untuk menampilkan konten HTML Raw

$event

Bisa digunakan di event listener untuk fungsi asli browser "Event"

contoh:

<input x-on:input="alert($event.target.value)">

$dispatch

untuk membuat event sendiri dan bisa dijalankan melalui .dispatchEvent()

<div x-data>
    <span @custom-event="console.log($event.detail.foo)"></span>
    <button @click="$dispatch('custom-event', { foo: 'bar' })">
<div>

$nextTick

Menjalankan fungsi hanya setelah DOM item tersebut terupdate

<div x-data="{ fruit: 'apple' }">
    <button
        x-on:click="
            fruit = 'pear';
            $nextTick(() => { console.log($event.target.innerText) });
        "
        x-text="fruit"
    ></button>
</div>

$watch

Memantau property tertentu dan melakukan sesuatu ketika berubah.

<div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))">
    <button @click="open = ! open">Toggle Open</button>
</div>

Selamat mencoba proyek kamu berikutnya

dengan menggunakan Alpine JS!

tag: belajar Alpine JS bahasa Indonesia, tutorial Alpine JS bahasa Indonesia, apa itu apline js, bagaimana menggunakan alpine js