Migrer de Vue 2 vers Svelte

• Nous utilisions Vue 2 depuis deux ans, mais comme il n’est désormais plus maintenu, nous avons décidé de migrer
• Nous avons hésité entre Vue 3 et Svelte, puis résumé les raisons qui nous ont fait choisir Svelte

Comparaison entre Svelte et Vue 3

• Dans l’enquête auprès des développeurs JS, Svelte affiche un meilleur taux de rétention
• Svelte
  • offre un meilleur support de Type et limite davantage l’accès global
  • a (à titre personnel) une syntaxe plus élégante et plus conviviale
  • peut être utilisé tel quel sans HTML supplémentaire comme <template>
  • applique automatiquement un scope aux styles
  • n’a pas besoin de propriétés calculées pour mettre à jour les données. Il suffit simplement d’écrire des fonctions =>
  • facilite davantage l’ajout de plugins JS purs
  • compile sans DOM virtuel. C’est plus optimisé et permet d’exécuter les tâches plus rapidement
  • permet une mise à jour automatique des données via les variables déclarées

Svelte a aussi des inconvénients

• Une communauté relativement plus petite (puisqu’il est apparu en 2019)

Comment la migration a-t-elle été effectuée ?

• Quand : la migration a été menée en août, quand le nombre d’utilisateurs de l’application avait diminué
• Durée : il a fallu deux semaines pour migrer tous les fichiers de Vue vers Svelte
• Nombre de développeurs : deux développeurs frontend ont travaillé à plein temps pendant deux semaines, et une autre personne a été mobilisée à plein temps pendant une semaine, soit trois personnes au total
• Workflow : attribution des tickets aux développeurs via Notion, création des nouveaux composants dans Storybook, puis réécriture en Svelte des pages assignées à chaque développeur
• Comme il s’agissait d’une startup, nous n’avions pas des milliers de fichiers à traiter, ce qui a simplifié le travail
  Cependant, nous avons pris le risque de migrer alors que SvelteKit était encore en développement actif, et nous avons dû effectuer un changement majeur un mois seulement après la migration. Heureusement, l’équipe SvelteKit a fourni un excellent guide de migration, ce qui nous a permis de nous adapter facilement à la nouvelle mise à jour. En septembre, l’équipe SvelteKit a annoncé que le framework était enfin entré en phase RC, ce qui garantit désormais aussi sa stabilité
• Organisation des fichiers et des composants : le "folder-based routing" de SvelteKit nous a apporté beaucoup. Nous avons pu diviser chaque page en sous-pages et réutiliser des noms de variables standard comme "loading" et "submit". De plus, les layouts sont intégrés aux routes concernées, ce qui simplifie l’accès.

Qu’avons-nous gagné ?

• Des performances meilleures et plus fluides
• Une meilleure expérience développeur
• Une exécution du code plus rapide
• Mise en place et exploitation du SSR
• Un code concis et facile à comprendre
• Résolution des erreurs de vérification de types