Media Pengembangan Web & App | by APPKEY

Pembuatan WebsiteWeb ProgrammingFramework Javascript 5, Kenalan dengan Alpine Js Yuk!

Framework Javascript 5, Kenalan dengan Alpine Js Yuk!

-

Last Updated on April 1, 2022 by

Alpine.js adalah framework JavaScript 5 yang tergolong baru jika dibandingkan dengan beberapa framework JavaScript yang lebih kondang seperti Angular.JS dan Vue.js.

Alpine.js sebuah framework yang baru dirilis pada Desember 2019 dan diciptakan oleh Caleb Porzio yang juga menciptakan Laravel Livewire. Menariknya, saat ini Alpine.js sudah memperoleh sponsor dari Tailwind CSS.

Syntax dari Alpine.js sendiri terinspirasi dari Vue dan Angular. Hal ini juga disampaikan langsung oleh Caleb Porzio, bahwa syntax Alpine.js dibuat dengan inspirasi dari dua framework JavaScript yang paling terkenal dan banyak digunakan oleh developer.

Bagi para developer yang telah familiar dengan Angular maupun Vue, tidak akan kesulitan saat menggunakan framework ini.

Alpine.js menawarkan ukuran yang kecil yakni hanya 8KB. Alpine.js adalah framework yang menawarkan kemudahan yang memungkinkan para developer untuk membuat website interaktif tanpa menulis JavaScript. Anda juga dapat membuat serta memanipulsi state, langsung pada markup html. Beberapa kelebihan yang dimiliki oleh Alpine.js adalah:

  1. Alpine.js secara deklaratif untuk binding data ke DOM menggunakan atribut x-bind. Ini dapat digunakan untuk mengikat atribut apa pun ke data reaktif pada komponen Alpine.js. Pada framework ini, seperti framework maupun library yang memiliki tampilan deklaratif seperti React dan Vue menyediakan x-ref sebagai solusi untuk mengakses langsung elemen DOM dari kode komponen JavaScript saat binding tidak cukup (misalnya, saat mengintegrasikan library dari pihak ketiga yang membutuhkan untuk melewati Node DOM).
  2. Alpine.js menyediakan fitur x- on directive dan $event magic value, yang memungkinkan fungsi JavaScript untuk menangani event. Untuk melakukan trigger pada event yang dikostumisasi, Alpine.js menyediakan fitur $dispatch magic property yang merupakan wrapper tipis di atas Event dan Dispatch Event API browser.
  3. Alpine.js menyediakan seperangkat fitur yang terinspirasi dari transisi API pada Vue.js, disebut x-transition directives yang dapat menambah dan menghilangkan classes selama transisi elemen.

Dengan fitur ini, developer dapat menambahkan animasi pada website seperti animasi yang ada pada jQuery yaitu, slideUp, slideDown, fadeIn, dan fadeOut.

  1. Pada Alpine.js juga disediakan plugin. Komponen-komponen pada Alpine.js cenderung sederhana, bahkan para developer dapat mengaplikasikannya dengan copy paste.
  2. Ukuran Alpine.js yang ringan jika dibandingkan dengan framework atau library JavaScript lainnya yakni hanya 21,9 KB minified dan 7,1 KB minified + gzipped. Cukup ringan untuk para developer pemula yang ingin belajar membuat website.
Artikel Terkait  Cara Git Clone untuk Mendownload Repository Github ke Komputer Kita

Bagi Anda yang ingin mencoba menggunakan Alpine.js dalam membuat proyek Anda, kami menyediakan berapa panduan singkat terkait instalasi dan dasar-dasar penggunaan Alpine.js berdasarkan fitur-fitur yang ada.

Instalasi Alpine.js

alpine js

1. Gunakan CDN atau NPM
Instalasi Alpine.js cenderung mudah. Anda dapat menginstalnya dengan CDN atau NPM.
– Menggunakan CDN:

Tambahkan kode berikut diakhir section <head> pada file HTML Anda.

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

– Menggunakan NPM

Masukan kode berikut ini pada script Anda menggunakan import alpinejs.

npm i alpinejs
komponen dasar saat menginstal Alpine.js:
<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">Alpinjs</h1>
</div>
</body>
</html>

Tahap pertama dalam mengoperasikan Alpine.js adalah menentukan state. State dapat berjalan dimana saja ketika dibutuhkan, dan memiliki cakupan dengan HTML selector yang Anda masukkan. Pada kode di atas, didefiniskan cakupan menggunakan direktif x-on directive untuk mengirimkan objek sebagai nilai dari suatu state.

Pada Alpine.js terdapat 14 fitu direktif yang disediakan untuk para developer:

javascript-3

1. x-data untuk mendeklarasikan cakupan komponen yang baru.
Contoh: <div x-data="{ foo: 'bar' }">...</div>
Struktur: <div x-data="[object literal]">...</div>\

Anda juga dapat mengekstrak data ke dalam fungsi yang dapat digunakan kembali:

<div x-data="dropdown()">
<button x-on:click="open">Open</button>

<div x-show="isOpen()" x-on:click.away="close">
// Dropdown
</div>
</div>

<script>
function dropdown() {
return {
show: false,
open() { this.show = true },
close() { this.show = false },
isOpen() { return this.show === true },
}
}
</script>

2. x-init untuk menjalankan ekspresi ketika komponen sedang di inisialisasi.
Contoh: <div x-data="{ foo: 'bar' }" x-init="foo = 'baz'"></div>
Struktur: <div x-data="..." x-init="[expression]"></div>

Jika Anda ingin menjalankan kode setelah Alpine membuat update pada DOM, Anda dapat melakukan callback dari x-init dan menjalankannya setelah kode berikut:

x-init="() => { // we have access to the post-dom-initialization state here // }"

3. x-show terdiri dari toggle display, none, pada elemen bergantung pada ekspresi (true atau false). Anda dapat
Contoh: <div x-show="open"></div>
Struktur: <div x-show="[expression]"></div>

4. x-bind adalah seperangkat value atau nilai dari atribut untuk menghasilkan suatu ekspresi JavaScript (JS).
Contoh: <input x-bind:type="inputType">
Struktur: <input x-bind:[attribute]="[expression]">

5. x-on untuk melampirkan event listener pada elemen. Direktif ini juga berguna untuk menjalankan ekspresi JS ketika dikeluarkan.
Contoh: <button x-on:click="foo = 'bar'"></button>
Struktur: <button x-on:[event]="[expression]"></button>

6. x-model berisi elemen two-way data binding atau dua cara untuk mengikat data. Tetap menginput elemen pada sinkronisasi dengan komponen data.
Contoh: <input type="text" x-model="foo">
Struktur: <input type="text" x-model="[data item]">

7. x-text cara kerjanya mirip dengan x-bind namun akan melakukan update innerText pada elemen.
Contoh: <span x-text="foo"></span>
Struktur: <span x-text="[expression]"

8. x-html cara kerjanya mirip dengan x-bind, tetapi akan diupdate innerHTML dari suatu elemen.
Contoh: <span x-html="foo"></span>
Struktur: <span x-html="[expression]"

9. x-ref adalah cara mudah untuk mengambil elemen raw DOM dari komponen Anda.
Contoh:
div x-ref="foo"></div><button x-on:click="$refs.foo.innerText = 'bar'"></button>

Struktur:
<div x-ref="[ref name]"></div><button x-on:click="$refs.[ref name].innerText = 'bar'"></button>

10. x-if untuk menghilangkan elemen sepenuhnya dari DOM. Anda perlu menggunakannya pada tag <template>.
Contoh: <template x-if="true"><div>Some Element</div></template>
Struktur: <template x-if="[expression]"><div>Some Element</div></template>

11. x-for untuk membuat simpul DOM baru untuk setiap item pada baris. Harus menggunakannya pada tag <template>.
Contoh:
<template x-for="item in items" :key="item">
<div x-text="item"></div>
</template>

12. x-transition adalah direktif untuk mengaplikasikan class pada stage yang bervariasi pada suatu transisi elemen.
Contoh:

Artikel Terkait  TypeScript vs JavaScript : Apa bedanya?

<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>

<template x-if="open">
<div
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>
</template>

13. x-spread memungkinkan Anda untuk mengikat suatu objek dari Alpine secara langsung pada suatu elemen untuk penggunaan ulang yang lebih baik.
Contoh:

<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
},
}
}
}
</script&gt
;

14. x-cloak adalah atribut yang dihilangkan ketika Alpine melakukan inisialisasi. Direktif ini sangat berguna untuk menyembungikan DOM yang baru pada tahap pra- inisialiasi.
Contoh:

Artikel Terkait  Low Code Platform : Ulasan dan Pilihan Terbaiknya Lengkap!

<div x-data="{}" x-cloak></div>

Pada Alpine.js juga terdapat 6 properti magic atau magic properties, diantaranya:

1. $el yang berfungsi untuk mengambil simpul DOM pada komponen akar.
Contoh:

<div x-data>
<button @click="$el.innerHTML = 'foo'">Replace me with "foo"</button>
</div>

2. $refs berfungsi untuk mengambil elemen DOM yang ditandai dengan x-ref di dalam komponen.
Contoh:

<span x-ref="foo"></span>
<button x-on:click="$refs.foo.innerText = 'bar'"></button>

3. $event untuk mengambil native browser pada objek event tanpa sebuah event listener.
Contoh:

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

4. $dispatch untuk membuat sebuah CustomEvent dan mengirimnya menggunakan .dispatchEvent() secara internal.
Contoh:

<div @custom-event="console.log($event.detail.foo)">
<button @click="$dispatch('custom-event', { foo: 'bar' })">
<!-- When clicked, will console.log "bar" -->
</div>

5. $nextTick untuk mengeksekusi sebuah ekspresi yang diberikan setelah Alpine membuat update reactive DOM.
Contoh:

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

6. $watch berfungsi untuk mengaktifkan callback yang diberikan saat property komponen yang sedang Anda awasi mengalami perubahan.
Contoh:

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

Demikian penjelasan tentang Alpine.js. Kesimpulannya, Alpine.js adalah salah satu framework yang ringan, serta mudah dipelajari khususnya bagi developer yang familiar dengan Angular.js dan Vue.js karena syntax dari Alpine.js sangat mirip dengan kedua framework tersebut.

Selain itu, dengan berbagai fitur yang dimilikinya, membuat Alpine.js cocok digunakan oleh para developer untuk membangun website atau aplikasi yang lebih interaktif.

Jika Anda tertarik untuk mendapat informasi terbaru seputar pemrograman, jangan lupa kunjungi situs Web App di https://appkey.id/ atau download aplikasi web app di Google Play Store agar Anda tidak ketinggalan informasi terbaru.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Mau posting artikel iklan?

Yuk klik dan ikuti ketentuan layanan dari kami, dapatkan penawaran paket dengan harga terbaik!

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Contoh PHP Curl : 10 Hal Luar Biasa yang dapat Anda Kembangkan dengan Curl

Meningkatnya jumlah aplikasi yang pindah ke web telah membuat "HTTP Scripting" lebih sering diminta dan diinginkan. Untuk dapat secara...

Encoding Adalah : Proses Komunikasi Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Rekomendasi 7 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Cara Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

4 Cara Mengatasi Autentikasi Google Play Store dengan Cepat dan Mudah

Apakah Anda sedang mengalami masalah autentikasi Google Play Store? Permasalahan autentikasi Google Play Store adalah permasalahan umum sering dialami...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Ini Cara Mudah Membuat Redirect PHP | Seri Belajar PHP

Fungsi redirect PHP sangat banyak digunakan dalam kehidupan berwebsite alias mengelola website. Script redirect PHP banyak dipergunakan oleh user...

Rekomendasi 10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya