Mengenal Framework Alpine.js Untuk Membuat Website Sederhana
Pernahkah kamu menggunakan jQuery, Bootstrap, Vue.js, Svelte atau React saat mengembangkan website? Di tengah popularitas framework JavaScript tersebut, kali ini kita akan membahas Alpine.Js yaitu salah satu front-end library yang tergolong baru yang berpotensi menggantikan library seperti jQuery, Angular, Vue, hingga React. Apa itu Alpine.js? Alpine.js adalah framework ciptaan Caleb Porzio yang dirilis pada Desember 2019 yang juga menciptakan Laravel Livewire. Syntax dari Alpine.js sendiri terinspirasi dari Vue dan Angular yang secara langsung disampaikan oleh Caleb Porzio, bahwa syntax Alpine.js dibuat dengan inspirasi dari dua framework JavaScript yang paling terkenal dan banyak digunakan oleh developer. Alpine.js ini adalah framework JavaScript yang bersifat lightweight (ukuran source code yang relatif lebih sedikit). Alpine.js menghadirkan fitur yang biasa kita pakai dari framework yang jauh lebih besar, tanpa perlu load banyak kode seperti ketika kita load framework yang lebih besar misalnya jQuery.
Jika kita hanya butuh untuk bisa menampilkan dropdown, atau toggle terhadap sesuatu element, atau bikin tab yang apik dengan segala fungsionalnya, maka tidak perlu menggunakan framework yang terlalu besar untuk fitur seringan ini. Dan yang lebih hebatnya lagi, fitur-fitur unggulan dari framework yang lebih besar telah diadaptasi oleh alpine.js ini. Sebut saja fitur “reaktif” yang sangat kita butuhkan dalam beberapa kasus, yang bisa didapat dari Vue, React, atau Angular. Alpine.js bersifat open source, yang artinya kita tidak perlu membeli lisensi apapun untuk menggunakannya atau bahkan berkontribusi untuk membantu memajukan framework nya.
Bagi para developer yang sudah familiar dengan Vue maupun Angular, tidak akan merasa kesulitan saat menggunakan framework ini. Untuk kalangan pemula juga akan cocok belajar Alpine.js karena Alpine.js merupakan library JavaScript yang memberikan web kita kemampuan seperti DOM dan State namun dengan ukuran yang kecil hanya 8 KB. Keunggulan Alpine.js sendiri selain menawarkan ukuran yang ringan dan biaya yang murah, Alpine.js juga memberikan kemudahan yang memungkinkan para developer untuk membuat website interaktif tanpa menulis JavaScript. Berikut beberapa kelebihan Alpine.js lainnya.
- Alpine.js secara deklaratif untuk binding data ke DOM menggunakan atribut x-bind. Ini dapat digunakan untuk mengikat atribut apapun ke data reaktif pada komponen Alpine.js. Seperti framework maupun library yang memiliki tampilan deklaratif seperti React dan Vue, Alpine.js menyediakan x-ref sebagai solusi untuk mengakses langsung elemen DOM dari kode komponen JavaScript saat binding tidak cukup.
- 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.
- 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.
- Pada Alpine.js juga disediakan plugin. Komponen-komponen pada Alpine.js cenderung sederhana, bahkan para developer dapat mengaplikasikannya dengan copy paste.
Jika kamu ingin menggunakan Alpine.js, berikut contoh framework Alpine.js sederhana berdasarkan fitur-fitur yang ada.
Tutorial Membuat Landing Page Sederhana
Dalam tutorial ini kita akan menggunakan Bootstrap untuk style, tetapi menggunakan Alpine.js untuk semua JavaScript. Page yang sedang kita buat adalah landing page sederhana dengan formulir kontak yang ditampilkan di dalam modal yang dikirimkan ke beberapa penanganan formulir dan menampilkan pesan sukses yang bagus.
Pertama, mari kita tetapkan cakupan dan beberapa initial value:
<body class="text-center text-white bg-dark h-100 d-flex flex-column" x-data="{ showModal: false, name: '', email: '', success: false }">
Sekarang, mari kita buat tombol kita menyetel value showModal ke true:
<button class="btn btn-lg btn-secondary" @click="showModal = true" >Get in touch</button>
Saat showModal itu true, kita perlu menampilkan modal dan menambahkan beberapa class:
<div class="modal fade text-dark" :class="{ 'show d-block': showModal }" x-show="showModal" role="dialog">
Lalu kita bind input values ke Alpine:
<input type="text" class="form-control" name="name" x-model="name" >
<input type="email" class="form-control" name="email" x-model="email" >
Nonaktifkan tombol 'Submit', sampai nilai-nilai itu ditetapkan<button type="button" class="btn btn-primary" :disabled="!name || !email">Submit</button>
Terakhir, kirim data ke beberapa jenis asynchronous function, dan sembunyikan modal setelah selesai:
<button type="button" class="btn btn-primary" :disabled="!name || !email" @click="submitForm({name: name, email: email}).then(() => {showModal = false; success= true;})">Submit</button>
Demikian tutorial dan penjelasan tentang Alpine.js. Alpine.js ini cocok untuk para developer yang ingin membangun website atau aplikasi yang lebih interaktif. Alpine.js juga merupakan salah satu framework yang ringan, serta mudah dipelajari khususnya bagi developer yang familiar dengan Angular dan Vue karena syntax dari Alpine.js sangat mirip dengan kedua framework tersebut.
