Migrando do Vue 2 para o Svelte

• Usei Vue 2 por 2 anos, mas como ele não recebe mais manutenção, decidi fazer a migração
• Entre Vue 3 e Svelte, organizei os motivos pelos quais decidi ir de Svelte

Comparação entre Svelte e Vue 3

• Nas pesquisas com desenvolvedores JS, a retenção do Svelte é melhor
• O Svelte
  • tem suporte a Type melhor e restringe mais o acesso global
  • (na minha opinião) tem uma sintaxe mais elegante e amigável
  • pode ser usado diretamente, sem precisar de HTML extra como <template>
  • aplica escopo aos estilos automaticamente
  • não precisa de propriedades computadas para atualizar dados; basta escrever uma função =>
  • torna mais simples adicionar plugins puros de JS
  • compila sem Virtual DOM, o que permite mais otimização e conclusão de tarefas mais rápida
  • permite atualização automática de dados por meio de variáveis declaradas

O Svelte também tem desvantagens

• Comunidade relativamente menor (já que surgiu em 2019)

Como a migração foi feita?

• Quando: a migração foi realizada em agosto, quando havia menos pessoas usando o app
• Tempo necessário: levaram 2 semanas para migrar todos os arquivos de Vue para Svelte
• Número de desenvolvedores: 2 desenvolvedores front-end trabalharam em tempo integral por 2 semanas, e mais 1 entrou em tempo integral por 1 semana, totalizando 3 pessoas
• Fluxo de trabalho: os tickets foram distribuídos aos desenvolvedores via Notion, os novos componentes foram escritos no Storybook, e cada desenvolvedor reescreveu em Svelte as páginas que lhe foram atribuídas
• Como era uma startup, não havia milhares de arquivos, então o trabalho foi relativamente simples
  No entanto, como a migração foi feita assumindo o risco enquanto o SvelteKit ainda estava em desenvolvimento ativo, foi necessário realizar uma grande mudança apenas um mês depois da mudança. Ainda assim, a equipe do SvelteKit forneceu um excelente guia de migração, o que permitiu adaptar-se facilmente às novas atualizações. Em setembro, a equipe do SvelteKit anunciou que o framework finalmente havia entrado em fase RC, então sua estabilidade passou a estar garantida
• Estrutura de arquivos e componentes: o "folder-based routing" do SvelteKit trouxe muitos benefícios. Foi possível dividir cada página em subpáginas e reutilizar nomes de variáveis padrão como loading e submit. Além disso, os layouts foram integrados às rotas relacionadas, tornando o acesso mais simples.

O que foi ganho?

• Performance melhor e mais fluida
• Melhor experiência para desenvolvedores
• Execução de código mais rápida
• SSR em funcionamento e em produção
• Código conciso e fácil de entender
• Correção de erros de checagem de tipos