Dalam membangun sebuah aplikasi berbasis web yang optimal maka perlu adanya tampilan interaktif dan mudah untuk digunakan oleh user. JavaScript merupakan salah satu bahasa pemrograman yang khusus untuk menangani hal tersebut. Selain itu, JavaScript juga dikenal memiliki berbagai macam framework yang memiliki fitur dan kegunaan yang berbeda – beda, salah satunya adalah Vue JS.
Apa itu Vue JS
Vue JS adalah salah satu framework atau library dari JavaScript yang digunakan untuk membuat tampilan (interface) pada website agar tampak lebih interaktif. Fungsi lain dari Vue JS adalah membuat SPA (Single Page Application). Apabila digunakan pada arsitektur MVC (Model – View – Controller), maka Vue JS menempati pada posisi View yang berjalan di sisi front-end.
Jadi tugas utama dari framework ini adalah mengirim dan menerima data, kemudian membuat tampilan UI (User Interface) yang menarik. Framework ini juga sangat mudah untuk diintegrasikan dengan library yang lain. Jika diimplementasikan pada komponen HTML, maka Vue JS menggunakan ID, class, atau name untuk menginisialisasikannya.
Framework ini mengalami perkembangan yang pesat, bahkan beberapa perusahaan besar menggunakannya, sebagai contoh Google dan Adobe. Terlepas dari itu, Vue JS pertama kali dikembangkan pada tahun 2013 oleh Evan You yang sebelumnya bekerja di Google dengan menggunakan AngularJS. Hal itulah yang melatarbelakangi seorang Evan You mengembangkan sebuah library yang lebih ringan daripada AngularJS.
Fitur dalam Vue JS
Berikut ini terdapat beberapa fitur dan komponen yang tersedia dalam Vue JS, diantaranya adalah sebagai berikut.
1. Components
Fitur components digunakan untuk membuat berbagai elemen pada HTML secara custom. Elemen custom ini juga dapat digunakan secara berulang – ulang.
2. Computed Properties
Kedua, fitur computed properties digunakan untuk melihat setiap perubahan yang terjadi dalam elemen user interface tanpa harus melakukan penambahan kode di dalamnya.
3. Data Binding
Kemudian, data binding digunakan untuk memanipulasi dan memberikan nilai (value) pada atribut HTML. Sebagai contoh, mengubah style dengan menggunakan bantuan binding directives, yaitu V-Bind.
4. Directives
Fitur directives berfungsi untuk melakukan berbagai aksi (action) pada antarmuka front end website. Contoh perintah bawaan yang digunakan adalah v-if, v-else, v-model, dan lainnya.
5. Event Handling
Fitur yang kelima adalah, event handling atau v-on yang berfungsi sebagai atribut yang dapat ditambahkan ke dalam suatu elemen DOM untuk sebuah event pada Vue JS.
6. Lightweight
Keenam, terdapat fitur lightweight yang digunakan untuk membuat menjadi lebih sederhana, akan tetapi masih tetap cepat dan powerful.
7. Routing
Fitur yang selanjutnya adalah routing, dimana mempunyai kegunaan sebagai perantara atau penghubung antar setiap halaman. Fitur ini memiliki kelebihan dalam membuat aplikasi single-page, cukup dengan menggunakan satu file HTML saja.
8. Templates
Fitur templates berfungsi untuk menghubungkan DOM dengan data instance pada Vue JS, yang nantinya akan mengkompilasi template menjadi fungsi DOM Render Virtual.
9. Virtual DOM
DOM atau kependekan dari Document Object Model merupakan suatu interface yang memudahkan dalam mengakses atau menambah konten pada suatu dokumen. Fitur dari Virtual DOM berfungsi untuk menyimpan perubahan dokumen pada replika DOM, sehingga dapat di review lebih cepat setiap perubahannya.
10. Watchers
Fitur yang terakhir adalah watchers, dimana memiliki fungsi untuk dapat menangani setiap perubahan data, sehingga mampu untuk membuat kode menjadi sederhana dan cepat.
Kelebihan Vue JS
- Ringan dan mudah dipelajari: Vue.js memiliki ukuran file yang kecil sehingga proses instalasinya pun tidak akan lama. Selain itu, VueJS juga mudah dipahami dan dipelajari sehingga dapat digunakan oleh pemula yang ingin belajar diterapkan pada aplikasi web apa saja.
- Reaktif: Vue.js memiliki sistem reaktif yang membuat aplikasi web lebih responsif dan cepat.
- Komponen: Vue.js memiliki sistem komponen yang membuat pengguna dapat membuat komponen yang dapat digunakan ulang dan diterapkan pada berbagai bagian aplikasi.
- Dokumentasi yang baik: Vue.js memiliki dokumentasi yang baik dan aktif yang membantu para developer untuk memahami dan mengaplikasikan Vue.js.
- Ekosistem yang kuat: Vue.js memiliki ekosistem yang kuat, dengan banyak pustaka dan tools yang tersedia, membuat pengguna dapat dengan mudah mengembangkan aplikasi web.
- Komunitas yang aktif: Vue.js memiliki komunitas yang aktif dan berkomitmen untuk meningkatkan dan memperbaiki Vue.js.
- Flexibel: Vue.js memiliki fleksibilitas yang tinggi, memungkinkan untuk membuat berbagai jenis aplikasi web, dari aplikasi sederhana hingga aplikasi yang kompleks.
Kekurangan Vue JS
Sedangkan berikut ini adalah kekurangan-kekurangan Vue.js:
- Minim plugin: Plugin berfungsi untuk mempermudah developer saat mengembangkan suatu proyek. Sayangnya, Vue tidak menyediakan banyak plugin.
- Terlalu dinamis: Developer harus mempelajari framework ini secara terus menerus, karena perkembangannya sangat cepat.
- Komunitasnya belum ramai: Dibanding Angular atau React, komunitas Vue masih belum begitu ramai. Hal ini wajar mengingat Angular dan React memang lebih populer.
Proses Instalasi Vue JS
Pada materi berikutnya, kita akan membahas beberapa tahapan dalam menginstall Vue JS pada perangkat komputer anda. Untuk proses instalasi dari Vue JS, kami hanya memberikan panduannya melalui perangkat Windows saja.
Langkah pertama, anda dapat menginstall Node.Js terlebih dahulu dengan menggunakan NPM (Node Package Manager). Selanjutnya, setelah berhasil menginstall Node.Js dengan benar, anda dan pastikan bahwa Node.Js dapat berjalan dengan baik.
Untuk menginstall Vue JS, anda dapat menggunakan perintah “npm install -g @vue/cli”. Pastikan juga agar anda selalu terhubung dengan jaringan internet dan tunggu hingga selesai.
Setelah proses selesai, anda dapat memulai project baru dan jangan lupa untuk menambahkan nama proyek pertama anda.
Daftar Pustaka
https://www.sekawanmedia.co.id/blog/pengertian-vue-js/
