Untuk Anda seorang developer, terutama yang pekerjaan utamanya menjadi front end developer maka mungkin salah satu hal yang akan sering digunakan ketika bekerja adalah framework. Untuk seorang developer framework merupakan tempat kerja yang akan sangat memudahkan pekerjaan Anda. Banyak hal yang akan dimudahkan ketika Anda menggunakan framework.
Framework dibuat untuk memudahkan Anda sebagai front end developer dalam menentukan batasan seperti apa yang akan dibuat dalam bekerja. Dengan menggunakan framework maka Anda akan sangat terbantu karena ketika sedang bekerja sudah memiliki kerangka untuk apa yang akan dikerjakan.
Framework juga membuat seorang developer tidak perlu mengerjakan banyak hal sendirian. Jika apa yang dibutuhkan oleh seorang front end developer sudah tersedia di framework maka bisa langsung digunakan dengan bebas sesuai dengan kebutuhan dan keinginan.
Salah satu framework yang banyak digunakan oleh para front end developer saat ini adalah Vue.js. Ini merupakan framework yang bekerja dengan menggunakan bahasa pemograman javascript di mana fungsi utama dari framework ini adalah untuk membangun dan menciptakan desain dan tampila dari sebuah web atau aplikasi.
Apa Itu Vue JS
Vue.js merupakan sebuah javascript framework yang digunakan untuk membuat sebuah interface pada pengguna. Ini merupakan sebuah framework yang biasa digunakan oleh seorang front end developer untuk mendukung pekerjaan mereka. Framework ini benar – benar mendukung untuk pembangunan antar muka yang akan dengan mudah digabungkan dengan projek lain. Vue.js juga cukup bisa diandalkan untuk membuat antar muka dari single page application.
Pada arsitektur MVC, Vue JS hanya akan berperan sebagai view saja. Selama bisa mengirim dan menerima data, maka Vue Js ini bisa digunakan untuk membuat antar muka. Ini merupakan cara kerja utama dari Vue Js. Fitur paling utama dari framework ini hanya akan berfokus untuk pembuatan komponen saja. Untuk hal – hal lain yang lebih kompleks maka Anda memerlukan routing, tools, template dan lainnya.
Kelebihan dan Kekurangan Penggunaan Vue Js
Sama seperti framework lainnya, Vue js juga tidak lepas dari kelebihan dan kekurangannya. Berikut adalah beberapa kelebihan dan kekurangan yang ada pada Vue Js.
Kelebihan
Sebagai salah satu framework yang memiliki banyak pengguna, Vue Js memang memiliki banyak kelebihan jika dibandingkan dengan framework lainnya. Beberapa kelebihan yang ada pada Vue Js diantaranya adalah :
1. Ukuran Kecil
Selain bisa membuat script menjadi lebih ringkas, secara ukuran file pun Vue Js sangat lah ringan. Hal ini akan berpengaruh karena itu artinya Anda tidak memerlukan waktu yang lama saat akan mendownload nya. Ukuran kecil ini juga membantu untuk proses pembuatan website atau aplikai menjadi lebih efisien dan juga memiliki performa yang tetap baik.
2. Dokumentasi Lengkap
Jangan takut mengalami kesulitan saat Anda menggunakan framework ini. Ada banyak dokumentasi dan tutorial yang bisa Anda gunakan sebagai panduan. Semua dokumentasi itu pun bisa dibilang cukup lengkap dan sangatlah detail. Dari mulai cara melakukan instalasi, melakuka integrasi, bahkan sampai kemungkinan masalah yang akan terjadi dan bagaimana melakukan penanganannya.
3. Sangat Mudah Diintegrasikan
Keunggulan lain yang juga dimiliki oleh framework ini adalah kemudahan ketika akan melakukan integrasi dengan aplikasi lain. Hal ini karena Vue Js dibangun menggunakan bahasa javascript sehingga akan mudah diintegrasikan dengan aplikasi javascript lainnya.
Proses Integrasi ini sangat diperlukan terutama ketika Anda sedang membangun sebuah web atau aplikasi yang cukup kompleks. Seperti misalnya menggabungkan website toko online dengan sistem pembayaran yang otomatis.
4. Mudah Dipelajari
Untuk pemula, maka framework ini sangat direkomendasikan. Vue Js merupakan framework yang sangat mudah dipelajari dan dipahami. Vue Js memiliki struktur yang sangat sederhana dan juga penulisan kode yang lebih singkat, kedua hal ini yang membuat Vue Js menjadi mudah dikuasai.
5. Interaksi Dua Arah
Dengan konsep MVVM atau Model view view model yang memungkinkan terjadinya komunikasi dua arah antara javascript dengan HTML. Keunggulan ini akan membuat performa dari web atau aplikasi menjadi lebih optimal.
Sebagai contoh, pada proses data binding ketika HTML mengirim data ke javascript maka javascript akan merespon. Respon tersebut yang akan ditampilkan HTML dan akan dilihat oleh pengguna lewat browser.
6. Fleksibel
Tidak hanya javascript saja, di sini Anda bisa menggunakan juga HTML dan CSS. Fleksibilitas lain yang juga menjadi keunggulan dari Vue Js adalah masalah template. Anda bisa membuat satu template dan bisa menggunakan sampai berkali – kali. Faktor inilah yang membuat framework ini cukup diandalkan untuk membuat website atau aplikasi dengan skala kecil ataupun besar.
7. Terdapat Banyak Plug In
Ada banyak plug in pada framework ini yang bisa Anda gunakan. Semua plug in ini akan membantu Anda pada saat proses kerja yang dikerjakan. Plug in tersebut sangatlah bermacam – macam fungsinya dari mulai untuk meningkatkan kecepatan website, peningkatan UX, kompresi gambar, dan lainnya
8. Ada Banyak Tema Menarik
Vue Js juga memiliki banyak sekali tema menarik yang bisa digunakan dengan bebas. Baik yang gratis maupun yang berbayar. Selain menarik, tema yang disediakan juga memiliki fitur dan komponen yang lengkap sehingga Anda tidak perlu merancang dari awal untuk masalah tampilan.
Kekurangan
Sementara itu, Vue Js juga tidak terlepas dari beberapa kekurangan seperti beberapa hal di bawah ini
1. Komunitas Terbatas
Salah satu kekurangan dari framework ini adalah komunitas yang masih terbatas. Dibanding dengan framework lain seperti react ataupun angular, penggunaan Vue Js ini memang belum terlalu banyak. Inilah mengapa jumlah komunitas dari pengguna Vue ini masih terbatas.
2. Perubahan Terlalu Cepat
Meskipun perubahan ini bisa dibilang cukup baik tetapi dengan cepatnya perubahan itu pula bisa menimbulkan masalah lain seperti kompatibiltas perangkat. Bahkan dengan banyaknya versi yang beredar saat ini juga akan menjadi masalah ketika framework ini digunakan dalam sebuah proyek besar yang melibatkan banyak developer.
Fitur Vue JS
Sebagai salah satu framework yang memiliki banyak pengguna sudah pasti Vue Js memiliki banyak sekali fitur yang bisa diandalkan. Beberapa fitur yang ada pada Vue Js diantaranya adalah :
1. Virtual DOM
Sama dengan framework javascript lainnya, Vue Js juga memanfaatkan virtual DOM untuk mengeksekusi setiap perubahan pada DOM. DOM yang ada akan dibuat menjadi replika dalam bentuk struktur data javascript. Semua perubahan akan dilakukan pada struktur data javascript tersebut. Bentuk struktur di fase paling akhir akan dibandingkan dengan bentuk struktur awal.
Bentuk terakhir inilah yang akan dianggap sebagai pembaruan dan akan memperbarui DOM asli yang akan dilihat oleh user. Cara kerja seperti itu sangat mampu untuk membuat pengoptimalan dan membuat perubahan dilakukan dalam waktu yang lebih cepat.
2. Data Binding
Fitur lainnya yang juga ada pada Vue Js ini adalah data binding. Fitur ini akan membantu melakukan manipulasi sebuah nilai ke dalam atribut HTML. Fitur ini juga bisa membantu untuk melakukan perubahan gaya ataupun penentuan class yang dibantu oleh v-bind.
3. Komponen
Ini merupakan satu fitur khusus yang ada pada Vue Js di mana seorang developer bisa membuat berbagai macam fungsi yang sangat dibutuhkan dan bisa menggunakan nya kapan pun dan di mana pun mereka membutuhkannya. Fitur ini juga memungkinkan untuk Anda menggunakan komponen yang dibuat oleh orang lain.
4. Event Handling
Satu fitur yang akan berguna untuk mencatat semua perubahan dan aktifitas yang terjadi pada DOM. Jika terjadi sebuah kesalahan pada saat proses perubahan, maka dengan adanya fitur ini maka semua aktivitas sebelumnya bisa tercatat.
5. Animasi
Fitur lain yang juga disediakan oleh Vue Js adalah kemampuan untuk membuat animasi menggunakan javascript yang akan ditempel ke HTML. Animasi ini bisa digunakan untuk banyak hal yang berhubungan dengan pembuatan antar muka.
Kita bisa membuat animasi yang kita inginkan di sini. Selain itu, kita juga bisa menggunakan animasi bawaan yang sudah ada ataupun animasi yang sudah pernah dibuat oleh orang lain dan bebas untuk digunakan kembali. Kita juga bisa menggunakan animasi yang kita ambil dari piha ke tiga.
6. Computed Properties
Semua perubahan pada bagian antar muka tentu biasanya akan berpengaruh juga ke ukuran dari web atau aplikasi. Dengan menggunakan vue Js maka Anda bisa melakukan perhitungan terhadap kemungkinan perubahan tersebut.
Jika UI terlalu besar tanpa didukung resource yang cukup maka web atau aplikasi akan memakan waktu saat melakukan load. Hal ini tentu bukan sesuatu yang diinginkan, Dengan adanya fitur ini maka kita bisa mengetahui berapa besar perubahan yang kita lakukan dan akan seperti apa pengaruh nantinya.
7. Templates
Jika Anda bingung akan membuat tampilan antar muka seperti apa maka Anda bisa menggunakan berbagai macam templates yang sudah tersedia di Vue Js. Vue Js menyediakan berbagai macam template yang berbasis HTML yang mengikat DOM
8. Router
Seperti sudah dijelaskan, jika ingin membangun suatu tampilan yang kompleks di Vue Js maka diperlukan routingan tambahan. Hal itu juga sudah difasilitasi oleh Vue Js. Framework ini memiliki fitur router yang membuat Anda bisa melakuakn routingan navigasi sekaligus di framework tersebut.
9. Watchers
Satu fitur menarik lainnya yang ada pada framework ini adalah watchers. Fitur ini akan digunakan jika Anda ingin membuat suatu tampilan yang mungkin akan menimbulkan perubahan. Misal jika Anda ingin membuat tampilan yang berubah setiap waktu tertentu, dengan menggunakan fitur ini maka Anda bisa membuat hal tersebut dengan menggunakan kode yang lebih sederhana.
10. Lightweight
Fitur lain yang juga ada pada Vue Js adalah lightweight. Fitur ini memungkinkan Anda untuk menulis script kode secara lebih singkat namun tetap powerfull dan sangat cepat.
Belajar Vue js
Untuk Anda yang mulai tertarik untuk mempelajari Vue Js maka ada beberapa hal yang perlu untuk dipersipakan seperti berikut:
Untuk memahami konsep dasar dari Vue Js ini maka cukup dengan teks editor dan browser saja. Selain mempersiapkan hal yang diperlukan seperti di atas, ada beberapa hal juga yang harus Anda perhatikan ketika akan menggunakan Vue Js. Inilah beberapa hal yang perlu Anda ketahui untuk memudahkan dalam memahami cara dan sistem kerja pada Vue Js.
1. Struktur Dasar
Hal yang harus diingat setiap kali akan menggunakan Vue Js adalah Anda harus selalu mengimpor dan harus disisipkan ke HTML. Ini merupakan contoh Vue Js yang mengimpor dari CDN.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>Setelah itu Anda juga harus selalu ingat jika Vue Js selalu membutuhkan elemen kontainer yang akan berfungsi untuk menampilkan data. Ini merupakan contoh di mana elemen yang digunakan adalah <div> dengan id=”app”
<div id="app">
{{ message }}
</div>
Terakhir yang harus dilakukan adalah membuat objek dari app dan class vue untuk menentukan elemen yang akan ditampilkan. Ini merupakan contoh script yang digunakan.
script>
var app = new Vue({
el: "#app",
data: {
message: "Hello World!"
}
})
</script>
Pada script di atas, atribut el digunakan untuk memilih elemen yang akan ditampilkan sementara atribur data berfungsi untuk menyimpan data yang akan ditampilkan. Untuk menampilkan data pada vue Js bisa menggunakan tanda kurung seperti ini { { ……..} }. Hal lain yang juga harus diingat adalah vue Js bersifat reaktif yang artinya jika data berubah maka Vue akan melakukan render ulang.
2. Data Binding
Pada Vue Js data binding merupakan sebuah cara bagaimana mengkomunikasikan data yang menggunakan javascript dengan HTML. Pada Vue Js juga data binding ada dua macam yaitu satu arah dan dua arah.
Data Binding Satu Arah
Maksud dari satu arah adalah binding hanya dilakukan dari javascript ke HTML tapi tidak sebaliknya. Ini merupakan contoh dari script yang digunakan untuk data binding satu arah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>One Way Binding</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<input type="text" v-bind:value="message">
<p>{{ message }}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello World!"
}
})
</script>
</body>
</html>
Dengan script seperti di atas maka tampilannya akan seperti ini.
Jika dilihat dari tampilan di atas, yang dimaksud dengan satu arah adalah meskipun “message” pada kotak dirubah tidak akan berpengaruh pada data yang menggunakan kode javascript nya.
Data Binding Dua Arah
Sementara pada sistem data binding dua arah, maka interaksi terjadi antara javascript ke HTML dan begitu pun sebaliknya. Ini merupakan contoh script yang digunakan untuk membuat data binding dua arah.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Two Way Data Binding</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<input type="text" v-model:value="message">
<p>{{ message }}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello World!"
}
})
</script>
</body>
</html>
Dengan script seperti di atas maka tampilan awal nya adalah seperti ini.
Pada sistem dua arah, maka jika “message” dirubah maka “data” pun akan ikut berubah secara otomatis. Seperti tampilan di bawah ini.
3. Contoh Pembuatan Aplikasi Vue Js
Sebagai permulaan untuk Anda yang masih belajar, maka ada beberapa aplikasi dan program yang bisa Anda coba untuk lebih memahami tentang vue Js ini.
Hello World
Mungkin ini merupakan pembelajaran paling dasar yang biasa dikerjakan untuk banyak pemograman. Intinya adalah bagaimana browser bisa menampilkan apa yang kita inginkan. Di sini, Anda akan mencoba untuk menampilkan pesan “Hello World” pada browser. Tentu pesan ini bisa diganti dengan pesan lain, seperti “Selamat datang” misalnya. Ini merupakan contoh script yang akan Anda gunakan.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CONTOH 1</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello World!"
}
})
</script>
</body>
</html>
Dengan script seperti di atas maka tampilan pesan yang akan muncul menjadi seperti ini.
Dengan tampilan seperti di atas dan juga script yang digunakan terlihat jika penggunaan Vue Js ini sangat sederhana. Anda hanya perlu memisahkan bagian data dengan bagian view untuk membuat hal seperti contoh.
Directive
Directive merupakan suatu fitur yang ada pada Vue Js. Penggunaannya adalah untuk menambah sebuah spesial attribute pada tag HTML. Untuk menggunakan fitur ini pada Vue Js maka Anda bisa menggunakan prefix v-. Ini merupakan contoh dari penggunaan fitur directive.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CONTOH DIRECTIVE</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p v-text="message"> </p>
</div>
<script>
new Vue({
el:"#app",
data:{
message:"Ini merupakan contoh penggunaan fitur directive pada vue.js"
}
});
</script>
</body>
</html>
Jika dilihat pada script di atas, terlihat jika tag <p> tidak memiliki konten apapun namun memiliki attribute v-. Attribute v- yang digunakan, value nya merujuk ke state “message”. Hal ini akan membuat Vue Js secara otomatis melakukan manipulasi DOM untuk menambah konten pada tag <p>, di mana konten yang akan ditambahkan sesuai dengan value yang ada pada state “message”.
Ini adalah tampilan dari contoh script di atas.
Conditional Rendering
Secara mudah conditional rendering berarti browser akan menampilkan nilai tergantung kondisi yang diberikan pada state. Untuk menggunakan hal ini maka Anda bisa menggunaakn attribute v-if. Selain itu, attribute ini juga bisa dikombinasikan dengan attribute lain seperti v-else-if dan v-else.
Ini merupakan contoh script yang menggunakan conditional rendering.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CONTOH DIRECTIVE</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app"> <h1 v-if="nilai >= 80 && nilai <= 100"> Anda Mendapat Nilai A</h1>
<h1 v-else-if="nilai >=70 && nilai <= 79 "> Anda Mendapat Nilai B </h1>
<h1 v-else> Anda Mendapat Nilai C ! </h1>
</div>
<script>
new Vue({
el:"#app",
data: {
nilai:81
}
});
</script>
</body>
</html>
Dengan script seperti di atas maka tampilan yang akan dihasilkan adalah menjadi seperti ini.
Tampilan seperti di atas muncul karena value pada state sesuai dengan kondisi pertama. Jika value pada state sesuai dengan kondisi kedua atau ketiga maka kondisi itulah yang akan muncul di tampilan browser
Skill yang perlu dikuasai sebelum belajar vue js
Sebelum Anda memulai untuk mencoba mempelajari Vue Js ini, ada baiknya jika anda memiliki beberapa skill yang akan mampu menjadi pendukung dan akan mempermudah kerja Anda ketika melakukan pengembangan website ataupun aplikasi. Beberapa skill yang sebaiknya Anda kuasai tersebut diantaranya adalah :
1. HTML
Ini merupakan hal wajib yang harus dikuasai untuk Anda yang ingin menjadi seorang front end developer. Bahasa pemograman HTML merupakan dasar dari semuah pembentukan website. HTML akan berperan sebagai struktur yang berguna untuk membuat kerangka website itu sendiri.
Meskipun dasar, namun pembelajaraan HTML ini bisa dibilang cukup mudah, sehingga Anda tidak perlu ragu untuk mencoba mempelajarinya. Selain itu, kini juga sudah banyak materi tentang HTML yang tersebar di internet yang bisa Anda dapatkan secara gratis.
2. CSS
CSS atau cascading style sheet, merupakan sebuah bahasa pemograman yang tujuan utamanya adalah untuk membuat sebuah tampilan website ataupun aplikasi menjadi lebih menarik. Ini juga merupakan skill dasar yang harus dikuasai oleh seorang front end developer.
Jika HTML akan menentukan kerangka dari website yang akan Anda bangun, maka CSS ini akan menentukan tampilan seperti apa yang akan muncul pada website yang sedang dikerjakan. Sama seperti javascript, penggunaan CSS ini juga akan sangat mempengaruhi UI dan UX nantinya.
3. Javascript
Javascript ini merupakan hal yang tidak kalah penting untuk dikuasai sebelum Anda mempelajari tentang Vue Js. Ini merupakan bahasa utama yang digunakan sebagai basis dari framework ini. Javascript ini merupakan bahasa pemograman yang akan sangat sering digunakan bagi seorang front end developer. Ini merupakan bahasa pemograman yang bertujuan untuk membuat tampilan pada sisi klien menjadi lebih menarik.
Dengan menggunakan javascript juga tampilan dari sebuah website akan mampu menjadi lebih interaktif. Penggunaan javascript juga merupakan hal yang sangat sering, sehingga dengan menguasai bahasa ini maka akan sangat membantu pekerjaan anda. Inilah salah satu manfaat dari belajar javascript
4. Javascript Library
Jika Vue Js merupakan framework dengan basis javascript, maka ada hal lain juga yang harus anda kuasai sebelum menguasai hal tersebut. Hal itu adalah javascript library. Javascript Library ini merupakan sebuah tempat yang menyimpan banyak kode javascript yang sudah pernah dibuat dan bisa digunakan kembali oleh Anda sesuai dengan kebutuhan.
Jika framework bertujuan untuk membantu Anda dalam membuat kerangka, maka library akan membantu dalam hal penyediaan berbagai macam kode. Anda tidak perlu lagi membuat sebuah kode jika kode tersebut sudah ada di library. Dengan menguasai penggunaan library maka hal tersebut akan sangat membantu dalam pekerjaan Anda. Salah satu library yang banyak digunakan pada javascript adalah jQuery.
5. Debugging
Ini merupakan salah satu skill yang juga harus dimiliki oleh seorang front end developer. Debugging ini merupakan sebuah kegiatan di mana Anda mencari sebuah kesalahan yang mungkin terjadi pada sistem web yang Anda buat.
6. Javascript Plug In
Javascript merupakan salah satu bahasa yang pada penggunaannya banyak sekali dibantu oleh plug in. Plug in akan memiliki banyak sekali fungsi seperti optimalisasi website, kemudahan penggunaan, dan lainnya. Penggunaan plug in juga perlu Anda pelajari karena pada saat penggunaanya ada banyak sekali plug in yang bisa digunakan.
Itulah beberapa hal tentang Vue Js yang perlu Anda ketahui. Vue Js akan sangat membantu dalam banyak pekerjaan Anda sebagai seorang front end developer. Pada penggunaanya juga Vue Js akan sangat membantu dalam pembuatan desain interface dari web atau aplikasi yang sedang dikerjakan.
I’m an experienced SEO Specialist who can grow a website through organic channel. I’m also passionate about digital marketing and web development