Migration von Vue 2 zu Svelte

• Wir haben Vue2 zwei Jahre lang verwendet, aber da es nun nicht mehr weiter gewartet wird, haben wir uns für eine Migration entschieden
• Wir haben zwischen Vue 3 und Svelte abgewogen und die Gründe zusammengefasst, warum wir uns für Svelte entschieden haben

Vergleich von Svelte und Vue 3

• In einer Umfrage unter JS-Entwicklern ist die Retention bei Svelte besser
• Svelte
  • bietet eine deutlich bessere Type-Unterstützung und schränkt globalen Zugriff ein
  • hat (meiner persönlichen Meinung nach) eine elegantere und benutzerfreundlichere Syntax
  • kann ohne zusätzliches HTML wie <template> direkt verwendet werden
  • behandelt Styles automatisch als scoped
  • benötigt keine berechneten Eigenschaften, um Daten zu aktualisieren. Man schreibt einfach nur =>-Funktionen
  • macht es einfacher, reine JS-Plugins hinzuzufügen
  • kompiliert ohne virtuelles DOM. Dadurch ist es stärker optimiert und kann Tasks schneller abschließen
  • ermöglicht automatische Datenaktualisierung über deklarierte Variablen

Auch Svelte hat Nachteile

• relativ kleine Community (da es 2019 erschienen ist)

Wie wurde die Migration durchgeführt?

• Wann: Die Migration wurde im August durchgeführt, als die Zahl der App-Nutzer geringer war
• Dauer: Die Migration aller Dateien von Vue zu Svelte dauerte 2 Wochen
• Anzahl der Entwickler: Zwei Frontend-Entwickler arbeiteten 2 Wochen lang in Vollzeit daran, ein weiterer wurde 1 Woche lang in Vollzeit eingesetzt, also insgesamt 3 Personen
• Workflow: Über Notion wurden den Entwicklern Tickets zugewiesen, neue Komponenten in Storybook erstellt, und jeder Entwickler schrieb die ihm zugewiesenen Seiten in Svelte neu
• Da es ein Startup war, gab es keine Tausenden von Dateien zu bearbeiten, daher war die Arbeit vergleichsweise einfach
  Allerdings wurde die Migration risikoreich durchgeführt, während SvelteKit noch aktiv entwickelt wurde, sodass bereits einen Monat nach dem Umstieg ein größerer Wechsel vorgenommen werden musste. Das SvelteKit-Team stellte jedoch hervorragende Migrationsleitfäden bereit, sodass die Anpassung an die neuen Updates leicht möglich war. Im September teilte das SvelteKit-Team mit, dass das Framework endlich die RC-Phase erreicht habe, womit nun auch Stabilität gewährleistet sei
• Datei- & Komponentenstruktur: Das "folder-based routing" von SvelteKit brachte viele Vorteile. Jede Seite konnte in Unterseiten aufgeteilt werden, wodurch Standardvariablennamen wie "loading" und "submit" wiederverwendet werden konnten. Außerdem wurden Layouts in die jeweiligen Routen integriert, was den Zugriff vereinfachte.

Was wurde gewonnen?

• verbesserte und flüssigere Performance
• bessere Developer Experience
• schnellere Codeausführung
• SSR in Betrieb und produktiv im Einsatz
• kompakterer und leichter verständlicher Code
• Behebung von Type-Checking-Fehlern