Vue 2'den Svelte'e Geçiş

• 2 yıldır Vue 2 kullanıyorduk, ancak artık bakım almayacağı açıklandığı için geçiş yapmaya karar verdik
• Vue 3 ile Svelte arasında değerlendirme yaptık ve neden Svelte'i seçtiğimizi özetledik

Svelte ve Vue 3 karşılaştırması

• JS geliştirici anketlerinde Svelte'in retention oranı daha iyi
• Svelte'in
  • Type desteği daha güçlü ve global erişimi sınırlandırıyor
  • (Kişisel olarak) söz dizimi daha zarif ve kullanıcı dostu
  • <template> gibi ek HTML katmanlarına gerek kalmadan doğrudan kullanılabiliyor
  • Stiller otomatik olarak scope ediliyor
  • Veriyi güncellemek için computed property gerekmiyor; sadece => fonksiyonu yazmak yeterli
  • Saf JS eklentileri eklemek daha kolay
  • Sanal DOM olmadan derleniyor; daha optimize ve görevleri daha hızlı tamamlayabiliyor
  • Tanımlanmış değişkenler üzerinden veri otomatik olarak güncellenebiliyor

Svelte'in de dezavantajları var

• Topluluğu görece küçük (2019'da çıktığı için)

Geçişi nasıl yaptık?

• Zamanlama: Uygulamayı kullanan kişi sayısının azaldığı ağustos ayında migration yapıldı
• Süre: Tüm dosyaları Vue'den Svelte'e taşımak 2 hafta sürdü
• Geliştirici sayısı: 2 frontend geliştirici 2 hafta boyunca tam zamanlı çalıştı, bir kişi daha 1 hafta tam zamanlı destek verdi; toplamda 3 kişi
• İş akışı: Geliştiricilere Notion üzerinden ticket atandı, yeni bileşenler Storybook'ta yazıldı ve her geliştirici kendisine ayrılan sayfaları Svelte ile yeniden yazdı
• Startup olduğumuz için üzerinde çalışılacak dosya sayısı binlerle ifade edilmiyordu; bu yüzden iş nispeten kolaydı
  Ancak SvelteKit hâlâ aktif geliştirme aşamasındayken riski göze alıp geçiş yaptık; bu nedenle taşınmadan yalnızca bir ay sonra büyük çaplı değişiklikler yapmak zorunda kaldık. Yine de SvelteKit ekibi çok iyi bir migration rehberi sunduğu için yeni güncellemelere kolayca uyum sağlayabildik. Eylülde SvelteKit ekibi framework'ün nihayet RC aşamasına girdiğini duyurdu, böylece kararlılık da güvence altına alınmış oldu
• Dosya ve bileşen yapısı: SvelteKit'in "folder-based routing" yapısı çok şey kazandırdı. Her sayfayı alt sayfalara bölerek loading, submit gibi standart değişken adlarını yeniden kullanabildik. Ayrıca layout'lar ilgili route'larla entegre olduğu için erişim daha kolay hale geldi.

Ne kazandık?

• Daha iyi ve daha akıcı performans
• Daha iyi geliştirici deneyimi
• Daha hızlı kod yürütme
• SSR'yi devreye alma ve işletme
• Kısa ve anlaşılması kolay kod
• Type checking hatalarının giderilmesi