Saat ini, kemungkinan besar Anda sudah mendengar tentang Vue 3 — versi utama berikutnya dari Vue. Lebih dari itu, mengingat periode pra-rilis Vue 3 yang diperpanjang, Anda mungkin sudah menggunakannya.

Vue 3 menghadirkan banyak perubahan. Penulisan ulang TypeScript, API Komposisi, fragmen, dukungan JSX yang ditingkatkan — itu hanya beberapa pilihan utama saya. Tidak heran mengapa begitu banyak pengembang yang sudah terjun dengan kecepatan penuh, meskipun masih dalam status beta.

Oleh karena itu, dalam kelompok pengembang ini, kita dapat membedakan 2 pengembang yang berbeda — satu yang melompat langsung ke Vue 3 dan satu lagi yang sudah mendalami Vue 2 dan ingin melanjutkan migrasi ke menuai manfaatnya.

Sebagai seseorang yang berada di antara keduanya, saya punya beberapa tip untuk kedua kelompok. Saya telah bekerja secara ekstensif dengan Vue 2 dan ekosistemnya di masa lalu dan baru-baru ini kembali menggunakan Vue 3 untuk mendukung alat code-blogging CodeWrite saya. Pengalaman ini memberi saya gambaran yang cukup istimewa tentang migrasi Vue 2 — Vue 3, yang hari ini ingin saya bagikan kepada Anda dalam bentuk tips yang penuh opini dan berguna!

1. Jaga ekosistem

Saya pikir dokumen “migrasi resmi” tidak cukup menekankan hal itu. Vue 3 mempertahankan sebagian besar API Vue 2 seperti sebelumnya, namun masih memiliki beberapa perubahan yang dapat menyebabkan gangguan. Dan karena perubahan ini, Anda kehilangan akses ke hampir seluruh ekosistem Vue 2.

Nah, itu adalah kelemahan yang serius. Jika Anda mengandalkan perpustakaan Vue 2 pihak ketiga mana pun, Anda harus menunggu hingga perpustakaan tersebut diperbarui atau mengatasinya sendiri. Saat menggunakan, misalnya, “Vuetify” (dimana dukungan Vue 3 adalah “saat ini dalam versi Alpha”), opsi kedua sebenarnya bukan sebuah pilihan, dan Anda harus menunggu “hingga diperbarui”.

Ketika saya memulai CodeWrite “segar”, saya tidak memiliki ikatan ekosistem apa pun yang menghambat saya. Namun, dampaknya masih terasa, dan pilihan peralatan saya sangat terbatas. Namun, setelah menghabiskan beberapa waktu mencari alternatif yang tidak bergantung pada kerangka kerja dan menggunakan Tailwind CSS sebagai “alternatif pustaka komponen UI” saya, saya bisa mendapatkan manfaat dari Vue 3, independensi kerangka kerja, dan semua yang saya bisa. diperlukan untuk membuat CodeWrite menjadi sesuatu.

2. Mengatasi perubahan yang dapat menyebabkan gangguan

Perubahan yang dapat menyebabkan gangguan tidak hanya berdampak pada ekosistem — namun juga berdampak langsung pada kode Anda. Itu sebabnya Anda harus bersiap dengan baik dan sangat waspada terhadapnya.

Sebaiknya Anda mengetahui terlebih dahulu apa yang harus diubah. Periksa kode Anda, lakukan riset, buat daftar. Anda hampir pasti tidak akan menangkap semua masalah, namun Anda akan menangani masalah terbesar.

Anda dapat melihat daftar lengkap perubahan yang dapat menyebabkan gangguan pada dokumen resmi. Yang terbesar adalah:

  • Perubahan pada API Global dan restrukturisasinya yang sulit diguncang
  • Perubahan pada perilaku v-model (dapat menimbulkan masalah)
  • destroyed dan beforeDestroy masing-masing mengganti nama menjadi unmount dan beforeUnmount
  • Perubahan umum pada API internal dan API “tingkat bawah” (hanya relevan jika Anda menggunakan beberapa fungsi khusus yang berinteraksi dengan API ini di Vue 2)

Ingatlah bahwa ini adalah pilihan saya, berdasarkan pengalaman saya, dan jarak tempuh Anda mungkin berbeda. Namun, permasalahannya tetap ada, dan perubahan-perubahan inovatif adalah sesuatu yang harus sangat diwaspadai, bahkan sebelum proses migrasi dimulai.

3. Adopsi fitur baru secara bertahap (namun cepat)

Hal ini mungkin sudah jelas, namun ada strategi berbeda untuk mengatasinya. Jadi, haruskah Anda benar-benar mengadopsi fitur-fitur baru secara bertahap, dan jika ya — mengapa dan bagaimana? Lagi pula, itu adalah alasan utama untuk melakukan upgrade, bukan?

Biasanya, aturan yang paling umum adalah memulai dengan komponen baru dan perlahan-lahan mengubah komponen lama. Hal ini sangat masuk akal, namun sebagai orang yang menyukai kode bersih & ahli arsitektur bersih, saya bersedia melakukan yang terbaik untuk membuat kode saya konsisten.

Saya menganggap pendekatan ini sama bagusnya (yang terbaik bagi saya), karena mengonversi komponen lama saya ke API atau gaya kode baru tidak memerlukan banyak usaha. Dalam beberapa kasus, Anda bahkan dapat mengotomatiskannya.

Untuk Vue 3, contoh perubahan “seluruh basis kode” adalah API Komposisi baru atau gula sintaksis <script setup>. Tentu saja, konversi dari Options API ke Composition API mungkin tidak tampak seperti tugas yang “sembrono” dan dapat dilakukan secara otomatis, namun hal ini menjadi semakin mudah setelah Anda mengonversi satu atau dua komponen.

Sekarang, saya tahu ini mungkin bukan ide bagus untuk basis kode besar dengan ratusan komponen. Namun, intinya adalah — jangan biarkan kode lama Anda berkarat. Mulailah mengonversinya sesegera mungkin. Jangan menunggu sampai kebutuhan akan komponen baru muncul. Upayakan konsistensi dan kebersihan.

4. Rencanakan langkah berani ke depan

Sehubungan dengan adopsi fitur secara bertahap, mari kita bahas tentang perencanaan. Lebih tepatnya — tentang perencanaan langkah berani.

Pertama, apa yang saya maksud dengan “gerakan berani”? Misalnya, penerapan TypeScript. Vue 3 telah ditulis ulang dengan menggunakannya, dan dukungannya sangat baik sekarang. Hal yang sama juga berlaku untuk perpustakaan resmi lainnya dan mungkin akan berlaku untuk sebagian besar ekosistem baru yang sedang dibangun atau diperbarui untuk Vue 3.

Sekarang, apakah mengadopsi Composition API, atau bahkan lebih gila lagi — JSX (dukungan untuk itu juga menjadi lebih baik) — juga merupakan langkah yang berani? Bagi saya - tidak. Hal ini karena hal ini sebagian besar hanyalah penerapan fitur baru — sesuatu yang diharapkan selama peningkatan versi, namun yang paling penting — karena hal ini hanya memengaruhi bagian “tampilan” proyek Anda.

Dalam proyek yang terstruktur dengan baik, “logika bisnis” Anda harus terpisah dari tampilan. Komponen Vue Anda tidak harus berurusan dengan koneksi ke backend, atau memuat sumber daya, melainkan hanya mewakili keadaan saat ini dengan benar.

Jadi, TypeScript, tidak diragukan lagi, termasuk dalam kategori ini, karena memengaruhi seluruh basis kode Anda (termasuk logika bisnis). Tentu saja, Anda dapat mengadaptasinya secara bertahap, namun Anda harus mengupayakan cakupan TypeScript penuh secara menyeluruh jika Anda melakukannya.

Oh, dan karena ini adalah daftar pendapat, saya dapat mengatakan bahwa Anda harus pindah ke TypeScript. Ini akan membuat kode Anda lebih mudah dikelola dan lebih skalabel sekaligus meningkatkan pengalaman pengembangan berkat pelengkapan otomatis di editor dan IDE modern.

5. Mulai sekarang

Dengan demikian, saran terakhir saya adalah mulai sekarang. Tidak peduli berapa banyak tips hebat yang Anda gunakan atau seberapa bagus arsitektur proyek Anda, migrasi akan tetap memakan waktu — hanya saja lebih sedikit atau lebih.

Juga, tidak ada jalan lain. Kenyataannya adalah — Anda pada akhirnya harus meningkatkan versi agar produk Anda tetap relevan dan dapat menyediakan fitur baru. Ini, atau Anda sebaiknya mulai beralih ke kerangka kerja lain.

Jika Anda sangat bergantung pada ekosistem Vue 2 saat ini, Anda mungkin tergoda untuk sedikit memperlambat, namun sebaiknya Anda tidak melakukannya. Sebaliknya, lakukan penelitian terhadap perubahan yang diperlukan, persiapkan rencana pemutakhiran Anda, mulailah mengerjakan bit-bit yang kompatibel, carilah “build kompatibilitas”, dan bahkan mungkin pertimbangkan untuk mengganti dependensi Anda. Menjadikannya tidak bergantung pada kerangka kerja akan mempermudah potensi perubahan di masa depan dan juga dapat menghasilkan alternatif yang lebih baik.

Intinya

Oke, jadi itu saja. Sekarang, satu pengingat - jangan langsung membuka komentar untuk mengeluh atau mengkritik apa pun yang baru saja Anda baca, hanya karena menurut Anda tidak demikian. Ingat, ini adalah daftar opini, dan setiap orang dapat memiliki pendapat berbeda. Oleh karena itu, saya menyambut baik diskusi yang mendalam, berharga, dan informatif.

Saya harap artikel ini bermanfaat bagi Anda. Jika iya, ikuti saya di “Twitter”, “Facebook”, atau melalui “buletin saya” (“sekarang telah di-boot ulang!”) untuk konten Vue dan web dev lainnya.

Selain itu, jika Anda seorang blogger teknis seperti saya, pertimbangkan untuk memeriksa CodeWrite — alat“code-blogging”gratis, yang menangani cuplikan Anda dengan alat pengeditan dan pemformatan yang tepat, berfungsi dengan baik dengan Grammarly, dan menangani pengeposan silang ke Dev.to, Hashnode, Medium, dan Blog Hantu, dengan fitur pengisian otomatis yang mengagumkan ( apakah saya sudah menyebutkan bahwa ini adalah ekstensi browser?) yang menangani semua “kasus tepi” untuk Anda (misalnya, mengonversi kode dalam Medium ke GitHub Gist, atau mengubah ukuran gambar besar).

Terima kasih telah membaca, dan selamat coding!

Postingan ini ditulis dengan mudah, dibuat dengan tata bahasa yang benar, dan diposting silang di sini dalam 1 klik berkat CodeWrite dengan editornya yang hebat, integrasi Grammarly yang lancar, dan “penerbitan sekali klik”. Cobalah secara gratis, dan gunakan kode first100 untuk mendapatkan diskon 20% langganan Anda (hanya $2,40/bulan!)