Für unsere innovativen MarTech-Lösungen in den Bereichen Communication based Lead Management und Digital Customer Experience sind wir auf fortschrittliche, umfangreiche Entwicklungs-Tools angewiesen. Wir setzen dafür gerne auf Freeware und Open-Source-Software-Lösungen. Im Speziellen haben wir, wenn es um die Themen User Interfaces (UI) und Frontend-Entwicklung geht, das Frontend-Framework Vue.js im Einsatz. Doch hier bahnt sich eine Reise an, die es erst einmal zu bewältigen gilt – die Migration von Version 2 zum neuen 
Vue 3.

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 einer stärkeren Developer Experience, mehr Funktionalitäten sowie einer besseren Performance belohnt wird, aber für viele Anwender eine große Hürde bedeutet – die Migration von Vue 2 auf Version 3 gestaltet sich recht aufwändig. Denn: Viele auf der aktuellen ‘Zweier’ basierenden Frameworks wie Vuetify oder Vuex konnten noch nicht komplett auf Vue 3 migriert werden. Dies betrifft auch uns, da wir mit diesen beiden Frameworks verstärkt arbeiten. Ein Problem, das bestimmt auch andere Software-Entwickler, Agenturen oder andere Unternehmen, die ihre Anwendungen inhouse bauen, betrifft, denn es kann erst in den kommenden Monaten mit Vue 3 kompatible Versionen gerechnet werden. 

Licht am Ende des Tunnels

Doch allen, die ebenfalls vor dieser Herausforderung stehen sei bereits gesagt: Auch wenn alles im ersten Augenblick wahnsinnig schwierig und komplex aussieht … das Vue-Team hat 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.

Das Vorgehen

Nach eingehender Recherche und Prüfung haben wir (für uns) folgenden Migrationsplan entwickelt, um erfolgreich alle unsere Projekte von Vue 2 auf 3 zu migrieren: 

• Update auf Vue 2.7 (geschätzter Aufwand: erträglich bis auszuhalten)

Diese neue Version bietet uns so viele Vorteile, um den endgültigen Wechsel zur Version 3 zu vollziehen, dass wir die Möglichkeit nutzen und zeitnah unser System auf diesen Zwischenstand 2.7 bringen werden. 

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 uns in die Lage, einige Projekte jetzt schon auf Stand von Vue 3 zu bringen. Zusätzlich bekommen wir die Zeit, uns auf das große Update vorzubereiten und unsere Arbeit jetzt schon auf die Anforderungen des neuen Systems auszurichten.

Einen 6-Punkte-How-to-Plan für die Migration finden Entwickler hier.

Almost done, but not quite…

Soweit zum Hauptmigrationsprojekt, dass einige Zeit und Ressourcen in Anspruch nehmen wird. Parallel dazu gibt es aber einige daraus resultierende weitere Themen, die wir auf der Reise des Vue adressieren müssen.

Drei der wichtigsten Herausforderungen fassen wir nun kurz für euch zusammen – inkl. Aufwandseinschätzungen:

1. Update der Projekte auf Vuetify 3.1 (geschätzter Aufwand: schmerzhaft)
   Einige Elemente, die wir im Zusammenhang mit Vue einsetzen, sind Systemerweiterungen wie die oben bereits genannte UI-Bibliothek Vuetify. Hier stehen wir vor dem Problem, dass viele Komponenten, die häufig in unserer 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 für uns – und alle anderen, die diese Elemente benötigen: Wir arbeiten weiter mit der Vuetify-Library-Version 2 und upgraden erst, wenn Version 3.1 zur Verfügung steht – vorher macht das für uns keinen Sinn. Wann das genau sein wird? Werden wir sehen müssen. 
2. 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 z.B. 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. Bisher setzen wir dafür auf Vuex. Das wird sich allerdings ändern müssen, da die State Management Library im Zuge der Umstellung auf Vue 3 empfiehlt, 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.
3. Schneller testen mit Vitest (geschätzter Aufwand: mit Ibu 400 geht's)
   Und wenn wir schon beim Thema ‘schneller, höher, einfacher’ sind: Der Punkt ‘Umgebungstests’ war bisher in unseren Prozessen zwar gelöst, aber nicht zufriedenstellend. Vue 3 bietet uns hier ganz neue Möglichkeiten, die wir künftig nutzen werden – sobald wir komplett auf das neue System migriert sind. Denn: Bisher mussten wir für das Testen unserer Frontend-Projekte auf das Tool Jest mit dem Vue-Plugin Vue Test Utils bauen. Auf Dauer unbefriedigend: Wer wartet schon gerne bis zu 15 Minuten für einen kompletten Testdurchlauf eines neuen UI. Nach dem Upgrade werden wir auf die Testumgebung Vitest setzen und so unsere Testzeiten auf unter zwei Minuten reduzieren. 

Wir sind uns sicher, dass viele Entwickler in Software-Unternehmen und auch in Agenturen sich in diesen Herausforderungen und Situationen wiedererkennen werden. Man muss das Rad nicht immer neu erfinden – vor allem nicht selbst. Daher wollen wir unsere Insights mit euch teilen, um so eure Arbeit künftig leichter und unkomplizierter zu machen. Also: Stay tuned for more… und nicht vergessen: Sharing is caring!

Dieser Artikel wurde am 27.8.2022 auf der Tech-Plattform t3n veröffentlicht. Lest den Beitrag hier.

Paul Knobloch

Paul Knobloch ist unser Senior Frontend Developer. Als Techy kümmert er sich um ‘das Gesicht’ unserer innovativen, cloud-basierten Software-Lösungen und sorgt so für eine einmalige User Experience.

LinkedIn