Bekerja sebagai seorang full stack developer tentunya tidak akan lepas dari urusan frontend development. Dan jika membahas frontend development, pastinya Javascript adalah perkara wajib yang tidak bisa dipisahkan. Sebab dengan Javascript inilah aplikasi web dapat dibuat menjadi lebih interaktif dan menarik.

Mengenal Single Page Application

SPA atau Single Page Application adalah jenis aplikasi website yang di dalamnya hanya terdapat satu halaman untuk menangani segala aktivitas yang terjadi di dalam aplikasi (halaman terdiri dari komponen-komponen kecil yang modular dan dinamis). Seluruh aktivitas yang terjadi di dalam setiap komponen dieksekusi dengan pendekatan Asychronous oleh Javascript atau AJAX. Kelebihan dari jenis aplikasi ini adalah user dapat merasakan pengalaman yang sama seperti ketika menggunakan aplikasi desktop – tetap dapat berada di halaman yang sama ketika melakukan berbagai macam request.

Berbeda dari MPA atau Multi Page Application yang harus selalu reloading browser untuk me-request ulang semua file static (html, css, js) setiap kali user berpindah halaman, SPA hanya butuh memuat ulang data yang diperlukan saja – berupa JSON (Javascript Object Notation). Data JSON ini diperoleh dari komunikasi dengan REST API di sisi backend menggunakan HTTP Request tertentu, seperti : GET atau POST. Perpindahan halaman pada SPA (lebih tepat disebut sebagai komponen) dilakukan dengan sistem routing dan tanpa loading browser. Alhasil, aplikasi dapat bekerja lebih cepat, user pun menjadi lebih nyaman menggunakan aplikasi.

Sekilas Tentang Vue.js

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).

Kenapa Memilih Framework Vue.js ?

Seiring dengan berkembangnya skala aplikasi web yang kita bangun (terutama jika yang dibangun adalah Single Page Application), 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 tiga framework Javascript yang sangat populer di kalangan para web developer untuk membangun Single Page Application, 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.

Sebelum Belajar Vue.js

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 untuk mempelajari dasar-dasar HTML, CSS dan Javascript terlebih dahulu 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 REST API.

Jika Anda sudah merasa yakin memilih Vue.js, ada beberapa hal yang sebaiknya dipersiapkan sebelum 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)

Materi Dasar Belajar 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 Membuat Single Page Application

Untuk dapat mempelajari materi ini, sangat disarankan Anda telah memiliki dasar pengetahuan teknologi di sisi backend yang cukup memadai, terutama terkait implementasi REST API dan pengoperasian Database. Jika belum, mungkin Anda tertarik untuk membaca beberapa materi yang telah saya tulis di Belajar Laravel.

  1. Membuat Single Page Application dengan Vue.js Lumen
  2. Autentikasi Vue.js dengan JWT Lumen