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.

Sekilas Tentang Vue.js

Vue.js adalah sebuah framework Javascript yang dilengkapi dengan 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 rilis pertama kali pada Februari 2014. Meskipun tergolong sebagai pendatang baru, popularitas Vue.js mampu meroket dengan sangat cepat. Hingga artikel ini ditulis, repositori Vue.js telah berhasil 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 dan kompleksitas aplikasi web yang kita bangun, dibutuhkan cara pengorganisasian setiap kode program yang kita tulis (apapun teknologi / bahasa pemrograman yang digunakan). 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, antara lain : 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 rasa-rasanya masih awam dengan istilah 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 RESTful APIs.

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