Wie Entwickler erfolgreich von Vue 2 auf 3 migrieren
Kurz die Fakten: Im Februar 2022 wurde von den Framework-Entwicklern um Gründer Evan You beschlossen, künftig nur noch auf die umfangreichere, neue Version Vue 3 zu setzen, die bereits seit dem letzten Jahr erhältlich ist.
Ein großer Schritt, der mit mehr Funktionalitäten, besserer Performance und einer stärkeren Developer-Experience belohnt wird, aber für viele Anwender eine große Hürde bedeutet – die Migration von Vue 2 auf Version 3 gestaltet sich recht aufwendig.
Denn: Viele auf der aktuellen „Zweier“ basierende Frameworks wie Vuetify oder Vuex konnten noch nicht komplett auf Vue 3 migriert werden. Ein Problem, das viele Softwareentwickler, Agenturen oder Unternehmen, die ihre Anwendungen inhouse bauen, betrifft, denn es kann erst in den kommenden Monaten mit einer Vue 3 kompatible Versionen gerechnet werden.
Licht am Ende des Tunnels
Doch zum Glück hat das Vue-Team eine Lösung skizziert, die die Migration etwas leichter gestaltet: Seit dem 1. Juli ist die Vue-Version 2.7 online, die einige Funktionalitäten aus der Version 3 verfügbar macht, um den Übergang deutlich zu erleichtern und den Aufwand zu minimieren.
Im Zentrum stehen Features wie die Composition API, das Script Setup sowie eine verbesserte TypeScript-Unterstützung.
Mit dem folgenden Migrationsplan können Entwickler erfolgreich alle Projekte von Vue 2 auf 3 migrieren:
Update auf Vue 2.7 (geschätzter Aufwand: erträglich bis auszuhalten)
Diese neue Version bietet so viele Vorteile, um den endgültigen Wechsel zur Version 3 zu vollziehen, dass es Sinn ergibt, das System zeitnah auf diesen Zwischenstand 2.7 zu bringen. Warum? Ganz einfach: Die hier bereits zur Verfügung gestellten Funktionalitäten wie Composition API, das Script Setup oder die verbesserte TypeScript-Unterstützung versetzen Entwickler in die Lage, einige Projekte jetzt schon auf Stand von Vue 3 zu bringen.
Zusätzlich bekommen sie die Zeit, sich auf das große Update vorzubereiten und ihre Arbeit jetzt schon auf die Anforderungen des neuen Systems auszurichten.
Einen Sechs-Punkte-How-to-Plan für die Migration finden Entwickler auf dem Blog von Vue.js.
So weit zum Hauptmigrationsprojekt, das einige Zeit und Ressourcen in Anspruch nehmen wird. Parallel dazu gibt es aber einige daraus resultierende weitere Themen, die Entwickler auf dem Schirm haben sollten.
Update der Projekte auf Vuetify 3.1 (geschätzter Aufwand: schmerzhaft)
Einige Elemente, die in Zusammenhang mit Vue eingesetzt werden, sind Systemerweiterungen wie die oben bereits genannte UI-Bibliothek Vuetify.
Hier stehen Entwickler vor dem Problem, dass viele Komponenten, die häufig in der Vue-2-Installation zum Einsatz kommen, leider nicht in der ersten für Vue 3 kompatiblen Version (Vuetify 3) enthalten sind. Dazu zählen etwa Tabellen-Komponenten oder Date- und Timepicker, die erst in Vuetify 3.1 eingeplant sind.
Das heißt konkret: Entwickler arbeiten weiter mit der Vuetify-Library-Version 2 und upgraden erst, wenn Version 3.1 zur Verfügung steht – vorher ergibt es keinen Sinn. Wann das genau sein wird, werden wir sehen müssen.
Einführung von Pinia als State-Management-Bibliothek (geschätzter Aufwand: erträglich bis auszuhalten)
Viele Frontend-Projekte benötigen einen einheitlichen und zentralen Zugriffspunkt auf gemeinsam genutzte Daten wie etwa User-Einstellungen, Status-Informationen oder Benachrichtigungen – eine Art Connector. Über diese Anwendung können Entwickler die Informationen einmalig laden, dezidiert jeder Komponente zuweisen und sie zentral verwalten.
Die State Management Library empfiehlt im Zuge der Umstellung auf Vue 3, auf das neuere System Pinia umzusteigen. Der Vorteil: Mit Pinia können User ihre Daten noch einfacher und modularer verwalten als bisher. Zudem können sie die Informationen typsicher speichern und eine bessere Autovervollständigung im Code-Editor bereitstellen.
Im Ergebnis heißt das: Alles wird schneller, einheitlicher und unkomplizierter – die User-Experience steigt und damit auch die Zufriedenheit der Entwickler.
Schneller testen mit Vitest (geschätzter Aufwand: mit Ibu 400 geht’s)
Und wenn wir schon beim Thema „schneller, höher, einfacher“ sind: Vue 3 bietet für Umgebungstests ganz neue Möglichkeiten.
Bisher mussten Entwickler für das Testen von Frontend-Projekten auf Tools wie Jest mit dem Vue-Plugin Vue Test Utils zurückgreifen. Auf Dauer unbefriedigend: Wer wartet schon gerne bis zu 15 Minuten für einen kompletten Testdurchlauf eines neuen UI?
Nach dem Upgrade soll die Testumgebung Vitest die Testzeiten auf unter zwei Minuten reduzieren.
