Vue.js adalah sebuah framework JavaScript yang dilengkap beragam tools untuk mempermudah dan mempercepat pembuatan antarmuka aplikasi web. Evan You (kreator Vue.js) melabeli karyanya sebagai “progressive framework” yang artinya implementasi bisa dilakukan secara bertahap di website yang sudah jadi tanpa harus merubah bagian lain. Vue.js mengusung konsep Virtual DOM yang membuatnya sangat cocok digunakan untuk membangun aplikasi web berjenis Single Page Application.

Vue.js rilis pada Februari 2014. Meskipun tergolong sebagai pendatang baru, popularitas Vue.js mampu meroket dengan cepat. Hingga artikel ini ditulis, repositori Vue.js sukses membukukan 155 ribu bintang di GitHub, mengalahkan React yang digawangi oleh Facebook (142 ribu bintang) dan Angular dari Google (59 ribu bintang).

Seiring dengan berkembangnya skala aplikasi web yang kita bangun, dibutuhkan cara pengorganisasian setiap kode program yang kita tulis. Tujuannya agar tidak terjadi penulisan bagian kode yang sama berulang kali. Tanpa bantuan framework, upaya tersebut bakal terasa cukup sulit untuk dilakukan (bahkan ruwet dan njelimet bila developer yang dilibatkan semakin banyak jumlahnya).

Saat ini setidaknya ada 3 (tiga) framework JavaScript yang sangat populer di kalangan para web developer untuk urusan frontend development, yaitu : React yang digawangi oleh Facebook, Angular yang didukung raksasa mesin pencari Google dan Vue.js karya perorangan bernama Evan You. Nah di antara ketiga framework tersebut, Vue.js adalah yang paling muda jika dibandingkan dari urutan tahun release-nya.

Meskipun terhitung pendatang “paling” anyar dan juga karya perorangan (pada awalnya), popularitas Vue.js yang terus menanjak hingga hari ini jelas tidak bisa dipandang sebelah mata. Dari banyak artikel dan debat panas di forum diskusi online, setidaknya ada satu hal yang dapat saya simpulkan, tren minat pasar terhadap Vue masih jauh dari kata berakhir. Note Keras : ini hanya pendapat pribadi, sebab jika Anda bertanya ke web developer lain, bisa jadi Anda akan memperoleh insight yang berbeda total.

Beberapa kelebihan yang membuat pertumbuhan pengguna Vue.js melesat tajam :

  • Sangat ringan dan cepat untuk dimuat, ukurannya kurang dari 100 KB.
  • Kemampuan data binding dua arah seperti yang dimiliki oleh framework Angular.
  • Mudah dimengerti berkat strukturnya yang sederhana (dibandingkan framework serupa).
  • Kemudahan integrasi dengan aplikasi lain yang ditulis dengan bahasa JavaScript.
  • Kebebasan untuk menulis template HTML dan file JavaScript pendukung.
  • Dokumentasi detail dan rinci, memudahkan developer yang ingin melakukan migrasi dari framework lain ke Vue.

Bagi Anda yang sebelumnya telah terbiasa atau familiar dengan React dan terutama Angular, saya cukup pede menjamin, belajar Vue.js akan jauh dari kata sulit. Malah, “mungkin” terasa jauh lebih mudah ketimbang mempelajari React dan Angular itu sendiri. Sedangkan untuk Anda yang masih awam dengan framework JavaScript, saya sarankan aagr terlebih dahulu mempelajari dasar-dasar HTML, CSS dan JavaScript sebelum membulatkan tekad belajar Vue.js.

Secara garis besar, Vue.js hanya mengambil peran di bagian frontend saja atau bahasa paling gampangnya adalah segala sesuatu yang tertampil / terlihat di layar. Untuk pengolahan data di sisi backend, kita bebas menggunakan bahasa pemrograman apa saja, bisa PHP, Ruby, Python, Node.js, Java, APAPUN … asalkan mendukung penggunaan RESTful API.

Jika Anda sudah merasa yakin memilih Vue.js, berikut beberapa hal yang perlu dipersiapkan untuk belajar :

  • Editor (disarankan Visual Studio Code)
  • Node.js dan npm (Node Package Manager)
  • Webpack dan Vue-CLI
  • Web Browser (disarankan Google Chrome)
  • Sistem Operasi (disarankan Linux / MacOS)

Referensi Belajar Vue.js

Sebelum memutuskan belajar Vue.js, pastikan Anda telah menguasai (minimal wajib tahu) aspek dasar apa saja yang dibutuhkan dalam pembuatan aplikasi web di sisi klien, antara lain : HTML, CSS dan JavaScript.

Setelah HTML, CSS dan JavaScript, berikutnya adalah framework CSS. Pada dasarnya framework CSS adalah gabungan dari HTML, CSS dan JavaScript yang sudah di-standarkan untuk mempercepat proses perancangan layout website responsive (tampilan bisa berubah menyesuaikan ukuran layar device). Ada cukup banyak pilihan framework CSS yang tersedia saat ini, sebut saja : Tailwind, Bulma, Materialize, UI Kit dan masih banyak lagi. Tapi bagi pemula, Bootstrap 4 mungkin lebih cocok karena framework ini termasuk yang paling mudah dipelajari dan sangat banyak tutorialnya di internet.

Beralih dari urusan layout, masuk ke ES6, singkatan dari ECMA (European Computer Manufacturers Association) Script versi 6 yang dirilis pada tahun 2015. Sederhananya, ES6, ES7, ES8 dan seterusnya adalah JavaScript modern yang rilis pada tahun 2015 ke atas, dapat dijalankan dengan NodeJs. Penguasaan ES6 akan sangat berguna dalam pengembangan aplikasi web berbasis Vue.js yang lebih baik dan efisien.

Dasar Vue.js

Semua materi tahap dasar (Vue.js versi 2.6) yang saya susun disertai contoh kode program dan gambar (beberapa dalam animasi GIF). Pembahasan materi akan terus saya perbarui mengikuti versi Vue terbaru (jika diperlukan).

  1. Cara Install Vue.js
  2. Cara Install Node.js di macOS dan Linux
  3. Dasar Pembuatan Aplikasi Vue.js
  4. Apa Itu Vue Directive
  5. Prinsip Data Binding pada Vue.js
  6. Menggunakan Directive v-for Pada Vue.js
  7. Menggunakan Directive v-if v-show v-else Pada Vue.js
  8. Attribute, Class, Style Binding Pada Vue.js dengan v-bind
  9. Event Handling Pada Vue.js dengan v-on
  10. Cara Kerja Computed Property Pada Vue.js
  11. Dasar Pembuatan Komponen Vue.js
  12. Pembuatan Komponen di Dalam Komponen Vue.js
  13. Komunikasi Komponen Pada Vue.js dengan props dan $emit
  14. Komunikasi Komponen Vue.js Collapsible Card dan Modal
  15. Contoh Komponen Tabs Pada Vue.js
  16. Lifecycle Hooks Pada Vue.js
  17. Komunikasi Komponen Vue.js dengan EventBus
  18. Penggunaan Slot, Named Slots dan Scoped Slots pada Vue.js
  19. Membuat Custom Filter Pada Vue.js
  20. Menggunakan Webpack dan Vue-CLI
  21. Routing Pada Vue.js dengan vue-router
  22. Membuat EventBus dengan Akses Global Pada Vue.js

Praktek Lanjutan

Sebelum masuk ke materi ini, disarankan Anda telah memiliki dasar pengetahuan teknologi di sisi backend yang cukup memadai, terutama cara kerja RESTful API dan pengoperasian DBMS. Jika belum, mungkin Anda tertarik untuk membaca beberapa materi yang telah saya tulis di Belajar Laravel Lumen.

  1. Membuat Single Page Application dengan Vue.js Lumen
  2. Autentikasi Vue.js dengan JWT Lumen
  3. CRUD RESTful API dengan Vue.js, Nuxt.js, JSON Server
  4. CRUD RESTful API dan JWT dengan Vue.js, Nuxt.js, Laravel Lumen
  5. Progressive Web Apps Pada Vue.js dengan Nuxt PWA