Migrar de Vue 2 a Svelte

• Habíamos estado usando Vue2 durante 2 años, pero como ya no tendrá mantenimiento, decidimos migrar
• Dudamos entre Vue 3 y Svelte, y resumimos las razones por las que decidimos ir con Svelte

Comparación entre Svelte y Vue 3

• En la encuesta a desarrolladores de JS, la retención de Svelte es mejor
• Svelte
  • Tiene un mejor soporte para tipos y limita el acceso global
  • (Personalmente) su sintaxis es más elegante y amigable para el usuario
  • Se puede usar tal cual, sin necesidad de HTML adicional como <template>
  • Los estilos se manejan automáticamente con scope
  • No necesita propiedades computadas para actualizar datos. Basta con escribir funciones =>
  • Es más simple agregar plugins de JS puro
  • Compila sin DOM virtual. Está más optimizado y puede completar tareas más rápido
  • Permite actualizar datos automáticamente mediante variables declaradas

Svelte también tiene desventajas

• Una comunidad relativamente pequeña (ya que apareció en 2019)

¿Cómo hicimos la migración?

• Cuándo: hicimos la migración en agosto, cuando había menos gente usando la app
• Tiempo requerido: tomó 2 semanas migrar todos los archivos de Vue a Svelte
• Número de desarrolladores: 2 desarrolladores frontend trabajaron tiempo completo durante 2 semanas y otro más se sumó 1 semana tiempo completo, para un total de 3 personas
• Flujo de trabajo: asignamos tickets a los desarrolladores en Notion, los nuevos componentes se escribieron en Storybook, y cada desarrollador reescribió en Svelte las páginas que le correspondían
• Como era una startup, no había miles de archivos que modificar, así que el trabajo fue sencillo
  Sin embargo, como migramos asumiendo el riesgo cuando SvelteKit todavía estaba en desarrollo activo, un mes después del cambio tuvimos que hacer modificaciones importantes. Aun así, el equipo de SvelteKit proporcionó una excelente guía de migración, así que pudimos adaptarnos fácilmente a las nuevas actualizaciones. En septiembre, el equipo de SvelteKit anunció que el framework por fin había entrado en etapa RC, así que ahora su estabilidad también está garantizada
• Estructura de archivos y componentes: el "folder-based routing" de SvelteKit aportó mucho. Pudimos dividir cada página en subpáginas y reutilizar nombres de variables estándar como loading y submit. Además, los layouts quedaron integrados en las rutas relacionadas, lo que hizo más sencillo el acceso.

¿Qué obtuvimos?

• Un rendimiento más fluido y mejorado
• Una mejor experiencia para desarrolladores
• Ejecución de código más rápida
• SSR en funcionamiento y en operación
• Código conciso y fácil de entender
• Corrección de errores de verificación de tipos