Lutfi HanifVue JS adalah framework Javascript yang sangat ringan dan powerful. Apabila telah menguasai dasar HTML, CSS dan Javascript, mempelajari Vue JS akan mengembangkan kemampuan coding Anda.
Di artikel ini, Anda akan mendapatkan informasi mengenai pengertian, keunggulan, hingga alasan kenapa banyak orang memilih Vue JS untuk membangun aplikasi front end.
Anda juga akan mengenal sejarah singkat Vue JS serta mengetahui hal mendasar apa saja yang perlu dikuasai sebelum berkiprah menggunakan Vue JS. Dan yang terakhir, panduan untuk melakukan instalasi Vue Js.
Apa itu Vue JS?
Vue JS adalah front-end JavaScript library yang digunakan untuk membuat tampilan website lebih interaktif, terutama saat mengaplikasikan SPA (Single Page Application) menggunakan Vue JS. Selain SPA, Vue JS juga dapat diintegrasikan bersamaan arsitektur MVC (Model-View-Controller).
Selain bertugas merapikan tampilan agar lebih interaktif, Vue JS terkenal mudah dihubungkan bersama dengan library lainnya. Sama seperti React JS, Vue JS juga dapat diimplementasikan pada komponen HTML dengan memanfaatkan ID, Class, dan Name.
Vue JS dikembangkan pada tahun 2013 oleh Evan You karena terinspirasi dari AngularJS yang digunakan oleh tempat kerja sebelumnya, yaitu Google. Latar belakang pengembangan Vue JS adalah karena Evan You ingin membuat sebuah library yang lebih ringan daripada AngularJS. Dan tentunya mudah diintegrasikan bersama dengan library di luar package basic.
Kelebihan Vue JS
Meskipun sudah ada FrameWork Javascript seperti Angular dan React, lalu untuk apa ada Vue JS?
Singkat cerita, Evan You, mantan pekerja Google, pernah mengerjakan beberapa proyeknya menggunakan AngularJS. Setelah sering bekerja dengan FrameWork tersebut, ia mulai berpikir untuk menghadirkan sesuatu yang lebih baik, ringan, dan powerful. Hingga lahirlah Vue JS pada Februari 2014 dengan ukuran file yang sangat kecil, tidak lebih dari 24KB.
Berikut adalah beberapa kelebihan dari Vue JS yang perlu Anda perhatikan ;
1. JSX
Vue JS dapat menggunakan JSX untuk memproses JavaScript dan komponen script lainnya, seperti HTML. Seperti yang telah kita ketahui, penggunaan HTML pada Vue JS dapat memanfaatkan ID tag pada script. Berikut contoh scriptnya:
"
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
"
?
2. Ukuran Library Ringkas dan Mudah Dipahami
Terkenal karena keringkasannya, Vue JS menjadi salah satu, atau bahkan, framework dengan ukuran file library yang paling kecil. Hal ini membuat Vue JS sebagai framework JS tercepat dalam merender data script ataupun media.
Karena ukuran library yang tergolong kecil, yakni antara 18-21 KB, Vue memang difokuskan hanya untuk front-end development.
Vue JS juga kompatibel dengan berbagai komponen script, terutama HTML dan CSS. Selain itu, Vue JS juga mudah dipahami dan dikembangkan pada proyek tertentu, sehingga saat ini banyak peminat yang telah meliriknya.
Dilansir dari situs trends.builtwith.com pada 14 Oktober 2021, Vue JS menjadi JavaScript Library paling populer di Indonesia.
3. Dokumentasi Lengkap
Dokumentasi yang disediakan oleh Vue JS terbilang cukup lengkap untuk membantu Anda sebagai developer pemula dalam mengembangkan aplikasi web.
4. Berinteraksi Dua Arah
Vue JS mampu berinteraksi secara dua arah dengan memanfaatkan konsep MVM (Model, View, Model). Konsep ini memastikan bahwa setiap perubahan yang dilakukan dapat langsung berkomunikasi dengan proses yang sedang berlangsung.
5. Virtual Document Object Model (DOM)
Vue JS mampu membuat cache data dalam memori, yang dapat membaca perubahan dan event yang direquestkan oleh developer dan memperbaruinya pada browser. Proses ini dikenal dengan istilah virtual nodes.
Fitur Vue JS
Vue JS menawarkan berbagai fitur yang membuatnya sangat fleksibel dan mudah digunakan, baik untuk pemula maupun developer berpengalaman. Berikut adalah beberapa fitur unggulan Vue JS yang penting untuk diketahui:
Reactive Data Binding
Vue JS memungkinkan two-way data binding, yaitu data binding dua arah antara tampilan (UI) dan data model. Ini berarti, perubahan yang terjadi pada data langsung terlihat pada tampilan, dan begitu juga sebaliknya.
Fitur ini memudahkan pengelolaan data dalam aplikasi dan membuat proses pembaruan UI menjadi lebih sederhana dan efisien.
Component-Based Architecture
Vue JS dibuat dengan konsep component based architecture, yang memungkinkan pengembang membangun aplikasi dengan memecahnya menjadi bagian-bagian kecil dan terpisah yang disebut komponen.
Komponen ini dapat digunakan kembali di berbagai tempat dalam aplikasi, sehingga kode menjadi lebih terstruktur, mudah dipelihara, dan fleksibel.
Directives
Vue JS memiliki beberapa directives bawaan seperti v-bind, v-model, v-if, dan v-for yang digunakan untuk mengikat data dan memanipulasi DOM. Directives ini memungkinkan kontrol yang mudah atas tampilan dan perilaku elemen-elemen dalam UI, tanpa perlu menulis JavaScript berlebihan.
Vue Router untuk Manajemen Rute
Vue Router adalah fitur penting yang memungkinkan navigasi antar halaman dalam aplikasi berbasis Vue. Dengan Vue Router, pengembang dapat membuat aplikasi single-page application (SPA) dengan sistem rute yang memudahkan pengguna berpindah halaman tanpa memuat ulang seluruh halaman website.
Vuex untuk Manajemen State Global
Dalam aplikasi yang lebih kompleks, manajemen data atau state bisa menjadi tantangan. Vuex adalah pustaka manajemen state untuk Vue JS yang memungkinkan pengembang menyimpan dan mengelola state di seluruh komponen secara terpusat.
Hal ini sangat berguna untuk aplikasi besar yang membutuhkan konsistensi data di seluruh komponen.
Single-File Components (Komponen Berbasis File Tunggal)
Vue JS mendukung komponen berbasis file tunggal (Single-File Components) dengan ekstensi .vue. Komponen ini memungkinkan strukturisasi HTML, CSS, dan JavaScript dalam satu file, yang memudahkan pengelolaan kode serta kolaborasi tim pengembang.
Transition & Animation (Transisi dan Animasi)
Vue JS menyediakan fitur bawaan untuk menerapkan efek transisi dan animasi pada elemen dan komponen. Fitur ini dapat meningkatkan pengalaman pengguna dengan memberikan efek visual saat elemen ditambahkan, dihapus, atau dimodifikasi di dalam aplikasi.
Command Line Interface
Vue CLI adalah alat yang membantu pengembang dalam membuat dan mengelola proyek Vue dengan cepat dan efisien. Vue CLI menyediakan struktur proyek yang terorganisir dengan baik, serta berbagai template dan pustaka yang memudahkan pengembangan aplikasi Vue.
Reactivity System
Vue JS dilengkapi dengan sistem reaktivitas yang memantau perubahan pada data. Jika data berubah, Vue secara otomatis memperbarui tampilan sesuai dengan perubahan tersebut, sehingga pengembang tidak perlu mengatur pembaruan UI secara manual.
Ekosistem dan Dukungan Komunitas yang Kuat
Vue JS memiliki ekosistem yang luas dan komunitas yang aktif. Ada berbagai plugin, pustaka tambahan, serta sumber belajar yang tersedia bagi pengembang, sehingga mempercepat proses pengembangan dan memudahkan integrasi dengan teknologi lain.
Fitur diatas menjadikan Vue JS sebagai salah satu framework JavaScript yang kuat dan fleksibel, sehingga sangat cocok untuk membangun aplikasi web interaktif dari yang sederhana hingga yang kompleks.
Belajar Vue JS di Komputer
Berikut adalah tutorial yang dapat Anda ikuti untuk belajar Vue JS bagi pemula. Install Vue JS dapat dilakukan di komputer dengan panduan berikut.
Persiapan
Untuk bisa memulai coding menggunakan Vue, ada beberapa syarat yang perlu Anda penuhi. Anda harus sudah familiar atau pernah mempelajari HTML, bekerja manipulasi website menggunakan CSS, dan juga perlu belajar tentang dasar-dasar Javascript.
Peralatan
Peralatan yang perlu disiapkan antara lain;
- Text Editor, bisa memilih menggunakan VS Code, Notepad++ atau yang lainnya
- Install NodeJS dan NPM
- Vue CLI
- Web Browser
Cara Install Vue JS
Pada panduan ini, kami menggunakan komputer dengan OS Windows untuk testing instalasi Vue JS. Berikut adalah langkah-langkah instalasi Vue JS pada localhost.
Langkah 1. Install Node JS
Untuk memulai project ini, silakan menginstal Node JS terlebih dahulu dengan download file installer Node JS di halaman berikut. Pilih tipe sistem operasi yang digunakan di komputer Anda. Setelah selesai download, tinggal melanjutkan proses instalasi mengikuti instruksi yang diberikan.
Langkah 2. Cek Instalasi Node JS
Setelah melakukan instalasi Node JS, selanjutnya dicek terlebih dulu, apakah Node JS sudah berhasil terinstal atau belum. Untuk mengeceknya, silakan buka CMD atau Command Prompt.
Setelah itu ketikkan perintah berikut:
node -v
Lalu, Anda akan menjumpai tampilan berikut bila Node JS telah berhasil diinstal.
Langkah 3. Instal Vue JS
Sebelum lanjut ke langkah instal Vue JS, silakan Anda menghapus cache CMD yang ada terlebih dahulu, dengan menggunakan perintah berikut:
npm cache clean --force
Setelah cache bersih, lanjutkan instal Vue JS dengan perintah
npm install -g @vue/cli
Untuk menginstal ini, pastikan komputer Anda telah terhubung dengan jaringan Internet. Karena perintah ini akan mengunduh langsung dari server Vue.
Langkah 4. Membuat Project Vue
Pertama, silakan masuk ke directory tempat dimana project Vue Anda tersimpan. Pada panduan, project ditempatkan di direktori C:\xampp\htdocs\vueproject.
Kedua, untuk membuat project Vue, Anda cukup jalankan perintah berikut di CMD, dan ganti myproject dengan nama direktori lembar kerja Anda.
vue create myproject
Ketiga, Anda akan diminta untuk memilih opsi instalasi Vue. Disana akan ditemui 2 pilihan, yaitu Default dan Manually. Di panduan ini, Default dipilih supaya bisa menggunakan pengaturan standar Vue. Lanjutkan dengan tekan Enter.
Selanjutnya, silakan tunggu proses instalasinya selesai, hingga muncul pesan Successfully created project vueproject seperti gambar dibawa ini.
Lanjutkan dengan masuk ke directory kerja Anda, kemudian jalankan Vue JS dengan perintah
npm run serve
Setelah itu, Anda akan menjumpai tampilan seperti gambar berikut.
Sampai disini, Vue telah berhasil running. Untuk mengaksesnya, silakan menggunakan pilihan alamat diatas.
Jika sudah muncul tampilan seperti diatas, maka Anda telah berhasil menginstall Vue Js di komputer. Setelah ini Anda sudah bisa mengeksplor lebih lanjut di direktori kerja Vue JS untuk membiasakan diri. Bila Anda ingin belajar tentang dasar-dasar Vue, Anda bisa mengunjungi website W3School atau halaman resmi dari VueJS langsung.
Kesimpulan
Vue JS adalah FrameWork Javascript yang sangat ringan dan powerful. Bila Anda ingin men-deploy project langsung di hosting, Anda bisa menggunakan paket Medium atau Large hosting murah dari Rumahweb Indonesia. Di paket ini Anda diberikan akses SSH yang memungkinkan untuk bekerja menggunakan command/ shell.
Jangan sampai terlewat informasi promo dan diskon seru terbaru dari Kami lainnya, dengan memantau media sosial kami, atau bisa dengan menghubungi support live chat yang online 24/7.
