Migrasi dari Vue 2 ke Svelte

• Sudah menggunakan Vue 2 selama 2 tahun, tetapi karena kini tidak lagi dipelihara, diputuskan untuk melakukan migrasi
• Saat mempertimbangkan antara Vue 3 dan Svelte, berikut rangkuman alasan memilih Svelte

Perbandingan Svelte dan Vue 3

• Dalam survei pengembang JS, retensi Svelte lebih baik
• Svelte
  • Dukungan Type lebih unggul dan membatasi akses global
  • (Secara pribadi) sintaksnya lebih elegan dan ramah pengguna
  • Bisa langsung digunakan tanpa perlu HTML tambahan seperti <template>
  • Style otomatis ditangani sebagai scope
  • Tidak memerlukan computed property untuk memperbarui data. Cukup tulis fungsi => saja
  • Lebih sederhana untuk menambahkan plugin JS murni
  • Dikompilasi tanpa virtual DOM. Lebih teroptimasi dan mampu menyelesaikan task lebih cepat
  • Data dapat diperbarui otomatis melalui variabel yang dideklarasikan

Svelte juga punya kekurangan

• Komunitasnya relatif kecil (karena baru muncul pada 2019)

Bagaimana migrasinya dilakukan?

• Kapan: migrasi dilakukan pada Agustus saat jumlah pengguna aplikasi sedang menurun
• Waktu yang dibutuhkan: perlu 2 minggu untuk memigrasikan semua file dari Vue ke Svelte
• Jumlah developer: 2 frontend developer bekerja full-time selama 2 minggu, dan 1 orang lainnya full-time selama 1 minggu, total 3 orang
• Workflow: tiket dibagikan ke developer lewat Notion, komponen baru ditulis di Storybook, lalu masing-masing developer menulis ulang halaman yang telah ditentukan ke Svelte
• Karena ini startup, file yang dikerjakan tidak sampai ribuan, jadi pengerjaannya cukup sederhana
  Namun, karena migrasi dilakukan dengan mengambil risiko saat SvelteKit masih aktif dikembangkan, perubahan besar harus dilakukan hanya sebulan setelah perpindahan. Meski begitu, tim SvelteKit menyediakan panduan migrasi yang sangat baik sehingga mudah beradaptasi dengan update baru. Pada September, tim SvelteKit mengumumkan bahwa framework tersebut akhirnya memasuki tahap RC, sehingga stabilitasnya kini juga lebih terjamin
• Struktur file & komponen: folder-based routing milik SvelteKit sangat membantu. Setiap halaman bisa dipecah menjadi subhalaman, sehingga nama variabel standar seperti loading dan submit dapat digunakan kembali. Selain itu, layout terintegrasi dengan route terkait, sehingga akses menjadi lebih sederhana.

Apa yang didapat?

• Performa yang lebih meningkat dan mulus
• Pengalaman developer yang lebih baik
• Eksekusi kode yang lebih cepat
• SSR aktif dan berjalan di production
• Kode yang ringkas dan mudah dipahami
• Perbaikan error type checking