Mengenai Vue.js : Sebuah Framework JavaScript Yang Populer

Blog

Apakah kalian pernah mendengar istilah Vue.js? Bagi mereka yang selalu berurusan dengan dunia pemrograman dan pengkodingan baik pemrograman website atau pemrograman lainnya,mungkin tidak asing dengan istilah tersebut,Tapi berbeda dengan mereka yang tidak terlalu sering berkecimpung di dunia pemrograman,Jadi di artikel kali ini kita akan memperkenalkan semua tentang Vue.js,fitur-fitur dasar yang ada pada vue.js dan lain-lain ini supaya kalian ada gambaran tentang vue.js ini,Langsung saja kita bahas saja.Mulai dari pengertian Vue.js.

Pengertian Vue.js

Vue.js adalah sebuah framework Javascript untuk membuat user interface dan single-page application (SPA).Vue.js dikenal juga dengan Vue dan dieja seperti membaca kata view( /vju:/ ).Pada arsitektur MVC(Model–View–Controller), Vue.js hanya akan mengambil peran pada layer View saja.

Perkembangan Versi Vue.js

Vue.js dibuat oleh Evan You setelah bekerja untuk Google menggunakan Angular.js di sejumlah proyek. Vue awalnya dirilis pada bulan Februari 2014. Vue lahir dari kebutuhan untuk membuat kinerja aplikasi lebih baik.Vue memilih beberapa sintaks template dari Angular, dan menghapus banyak sintaks yang membuatnya sangat ringan.

Berikut daftar rilis Vue.js :

Pada tanggal 08 Desember 2013 Versi pertama 0.6 VueJS dirilis.
Pada tanggal 24 Desember 2013 versi 0.7 dirilis.
Pada tanggal 27 Januari 2014 versi 0.8 dirilis.
Pada tanggal 25 Februari 2014 versi 0.9 Animatrix dirilis.
Pada tanggal 23 Maret 2014 versi 0.10 Blade Runner dirilis.
Pada tanggal 07 November 2014 versi 0.11 Cowboy Bebop dirilis.
Pada tanggal 12 Juni 2015 versi 0.12 Dragon Ball dirilis.
Pada tanggal 27 Oktober 2015 versi 1.0 Evangelion dirilis.
Pada tanggal 30 September 2016 versi 2.0 Ghost in the shell dirilis.
Pada tanggal 22 November 2016 versi 2.1 Hunter X Hunter dirilis.
Pada tanggal 26 Februari 2017 versi 2.2 Initial D dirilis.
Pada tanggal 27 April 2017 versi 2.3 JoJo’s Bizarre Adventure dirilis.
Pada tanggal 13 Juli 2017 versi 2.4 Kill la Kill dirilis.
Pada tanggal 13 Oktober 2017 versi 2.5 Level E dirilis.
Pada tanggal 04 Februari 2019 versi 0.26 dirilis.

Alat untuk Belajar Vue.js

Ada beberapa peralatan yang harus disiapkan untuk mulai belajar Vuejs :

Teks Editor.
Node.js dan NPM(Node Package Manager).
Vue CLI
Web Browser

Kelebihan Vue.js

Vue.js tidak terlepas dari kelebihan atau keunggulan yang dimiliki.Berikut kelebihan yang dimaksud antara lain sebagai berikut :

Sederhana

Vue.js bisa diintegrasi dengan aplikasi yang sudah ada sebelumnya jadi tidak perlu melakukan coding dari awal.Vue.js memiliki kemampuan dalam memuat logika, struktur, dan gaya suatu komponen dalam satu file sehingga pembuatannya menjadi mudah.Komponen fleksibelnya juga dapat digunakan ulang dalam proyek yang berbeda.

Dokumentasi Yang Detail

Dokumentasinya detail,teliti, dan ditulis dengan baik sehingga orang yang tidak terlalu ahli javascript dan HTML dasar tetap bisa menyelesaikan pengembangan website atau aplikasinya sendiri.

Berukuran Kecil

Ukuran yang tergolong sangat kecil.Framework satu ini hanya memakan tempat sebesar 18 hingga 21 kb. Ukuran tersebut tergolong sangat kecil jika dibandingkan dengan framework javascript lainnya.Ukuran juga mempengaruhi framework keberhasilan framework javascript.

Komunkasi Dua Arah

Vue.js memfasilitasi komunikasi dua arah atau two way communication.Vue js menggunakan MVVM architecture sehingga pengurusan HTML.

Fleksibilitas

Vue.js bisa ditulis dengan file javascript ataupun html sehingga memudahkan para developer framework saat memahami. Vue.js juga menangani aplikasi yang lebih canggih menggunakan JSX, ES6, bundling, dan routing.Adanya fleksibilitas membuat peralihan ke vue.js menjadi lebih mudah. Apalagi bagi pengembang yang sebelumnya sudah memiliki banyak pengalaman dalam framework react js, angular js, dan framework js lainnya. Desainnya membuat vue js terlihat familiar.

Kekurangan Vue.js

Meski memiliki kelebihan namun Vue.js juga memiliki kekurangan antara lain yaitu:

Terlalu fleksibel bisa menyebabkan masalah : Ternyata terlalu fleksibel juga bisa menyebabkan masalah bagi para developer. Vue.js bisa menjadi beban tersendiri jika digunakan untuk proyek yang besar yang melibatkan cukup banyak developer.
Komunitas developer yang tertutup :Komunitasnya yang belum sebanyak framework lain. Meskipun banyak digunakan, vue.js tetap belum sepopuler framework lain.
Sumber informasi tentang vue.js sedikit jika dibandingkan dengan framework javascript lain yang sudah populer. Komunitasnya tidak banyak ditemukan.Kalian mungkin bisa dengan mudah menemukan komunitas developer react.js, tapi kalian akan sulit mendapatkan komunitas developer vue.js.
Terkendala masalah bahasa : Sebagian besar tutorial pengkodean vue.js ternyata ditulis dalam bahasa Cina sehingga sulit dipahami bagi mereka yang menggunakan bahasa inggris ataupun bahasa lainnya.

Cara Instal Vue.js

Menginstall Vue Devtools

Sebelum memulai instalasi, disarankan untuk menginstall Vue Devtools pada browser kalian.Hal ini dilakukan agar bisa melakukan inspect dan debug vue app sehingga tampilannya menjadi lebih user friendly.

Instalasi Vue.js

Setelah itu,bisa mendownload dan mengaktifkannya dengan script tag.Vue.js akan terdaftar sebagai variabel global.

Ada dua versi Vue.js yang bisa digunakan antara lain yaitu :

Versi development : https://vuejs.org/js/vue.js
Versi produksi : https://vuejs.org/js/vue.min.js

Bisa mendownload secara langsung.Apabila tidak ingin mendownloadnya,kalian bisa menggunakan pilihan lain yaitu dengan CDN(Content Delivery Network).Kalian bisa menggunakan CDN yang sudah disediakan seperti unpkg dan cndjs.

Setelah kalian berhasil mendownload atau setelah menggunakan CDN, kalian bisa langsung membuat file index.html kemudian menambahkan script tag di bawah ini dalam kerangka tag html :

mengaktifkan atau memanggil library vue.js menggunakan script tag dan dalam script tag lainnya menggunakan vue instance.Alamat elemen menggunakan div dengan ID #VueID. Dengan begitu vue.js menjadi tahu elemen mana yang akan dituju. Elemen bisa kalian bayangkan sebagai ruang lingkup yang nantinya bisa dijangkau.Vue.js tidak akan bisa bekerja di luar elemen yang telah ditetapkan.Penggunaan elemen tersebut membuat kalian bisa menentukan target elemen yang akan ditetapkan.

Membuat Hai Dunia

Kelebihan dari Vue.js adalah flexibilitas dimana kita dapat membuat sebuah aplikasi web dengan berbagai cara tergantung pada kebutuhan dan skala dari aplikasi web kita.

Kita akan memulai belajar dengan membuat sebuah aplikasi “Hai Dunia”. Untuk memulai buatlah sebuah file html dengan code sebagai berikut :

Buka di browser maka akan menampilkan teks Hai Dunia.Ini merupakan hal yang kita perlukan untuk mulai membuat sebuah aplikasi Vue.js yang simple yang memisahkan bagian data atau state dengan bagian view atau presentation nya.

Directive pada Vue.js

Vue.js memiliki fitur penggunaan directive. Directive sendiri merupakan sebuah fitur yang memungkinkan untuk menambahkan sebuah special attribute pada tag HTML dari web app kita.Pada Vue.js sendiri setiap attribute directive yang biasa digunakan memiliki awalan atau prefix v-.

Contoh simple Directive pada vue.js :

Code di atas terdapat sebuah tag <p> yang memiliki attribute v-text.Dimana tag <p> tidak memiliki isi content,tapi karena memiliki attribute v-text yang value nya merujuk ke state message.Maka otomatis Vue.js akan melakukan manipulasi DOM dengan menambahkan isi content pada tag <p> sesuai value dari state message di script vue js.Untuk passing sebuah value ke content dari sebuah element html dapat melakukan dengan menggunakan script double curly braces {{ }}.

Conditional Rendering

Menggunakan attribute directive v-if .Dimana tag atau element HTML yang memiliki attribute ini akan ditampilkan bedasarkan kondisi value pada state. Attribute ini dapat dikombinasikan dengan attribute v-else-if dan juga v-else.

Pada state adalah 73 yang mana memenuhi kondisi kedua.maka akan menampilkan output Nilai B bro.

List Rendering

Digunakan untuk melakukan list rendering dari list berdasarkan data yang ada.v-for membutuhkan syntax khusus yang berbentuk item in items,dimana items adalah sumber data array dan item untuk setiap element dari array yang di iterasi.
Contoh penggunaannya :

Akan menampikan semua data yang ada pada array namaSiswa.

Form Input Bindings

Melakukan input bindings kita menggunakan v-model yang berfungsi untuk melakukan two-way data binding yang umumnya dilakukan pada form input,yang mana value pada input yang memiliki attribute directive v-model akan merujuk pada state yang menjadi rujukanya dan juga setiap kali terjadi perubahan value pada form input tersebut, value dari state juga akan turut berubah.

Pada script diatas jika memasukan inputan pada form input maka otomatis data pada state juga berubah sesuai inputan yang dimasukan.

Event Handling

Melakukan event handling pada vue.js kita bisa menggunakan attribute directive v-on.Attribute v-on akan untuk mengeksekusi atau menjalankan sebuah methods dari instance Vue yang diterima sebagai value dari directive atrribute ini. kita bisa menentukan jenis event yang akan dihandle seperti click, keyup, submit, dsb.
Contoh penggunaanya :

Script diatas menggunakan event onclick dimana jika button diklik akan menampilkan alert yang mengambil value dari state pesan,dimana sebelumnya untuk menampilkan alert tersebut kita buat dulu sebuah methods yang bernama showMessage untuk menampilkan alert nya.

Component di Vue.js

Salah satu fitur yang powerful dari Vue.js adalah Component,ini merupakan sebuah sistem yang memungkinkan kita meningkatkan fungsionalitas dari HTML.Dengan fitur ini kita dapat membungkus beberapa tag HTML menjadi sebuah tag baru yang dapat digunakan berulang-ulang atau reusable pada web yg akan kita bangun.

Hasil render dari script diatas adalah :

Membuat banyak component yang bisa digunakan berulang-ulang pada bagian yang diinginkan pada halaman web yang kita buat,tentunya masih banyak hal yg bisa kita lakukan dengan component ini,namun untuk mengenal component ini sudah cukup untuk modal awal belajar dasarnya, dan tentunya bisa dikembangan sendiri lebih lanjut.

Membuat counter sederhana

Membuat sebuah counter sederhana,

Menekan tombol buttonnnya,maka counternya akan otomatis bertambah.

oke itu tadi beberapa bagian pengenalan fitur-fitur vue.js ini,dari membuat Hai Dunia sampai membuat counter sederhana.

semoga artikel ini bisa membantu kalian semua,jangan lupa untuk memberi point pada bintang 🙂

HOTLINE

Mengenai Vue.js : Sebuah Framework JavaScript Yang Populer