Die Reise des Vue – Oder: Wie wir unsere UIs künftig besser machen

by | Aug 27, 2022

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.

Vue 3: 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 mit neuen Entwicklungs-Tool 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: Kleine Schritte, viele Entwicklungs-Tools

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: https://blog.vuejs.org/posts/vue-2-7-naruto.html

How-to zu Vue 3: 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:

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.

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.

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.

Aug 27, 2022

Andere Beiträge
Related Posts

Möchten Sie mit uns in das Lead Management von morgen starten?

Überzeugen Sie sich selbst davon, wie die matelso platform for a communication based lead management Plattform Ihr Kundenerlebnis verändern wird.

Do you want to start into the lead management of the future with us?

See for yourself how the matelso platform for a communication based lead management will change your customer experience.

matelso platform

matelso verbindet Telefonie, Chat, E-Mail oder Kontaktformulare optimal. Unser intelligentes Lead Management vereinfacht die Kommunikation und sorgt dafür, dass Sie bessere Marketingergebnisse erzielen können.

matelso platform im Detail

Call Tracking

MarTech Software zur Auswertung von Telefonanrufen für Unternehmen, Agenturen & Portale.

Unsere Consultants unterstützen Sie gerne bei der Umsetzung, auf unserer Consulting Seite erfahren Sie mehr darüber: Link

Learn

Blog

Auf unserem Blog teilen wir Wissen und Insights mit unseren Lesern – immer nutzwertig, immer interessant.

Connect

Karriere

Creating a new data-based era of communication – wenn Du diese Vision teilst, sollten wir uns kennen lernen.

Partnermodell

Helfen Sie Ihren Kunden dabei, ihre Customer Journey besser zu verstehen und zu managen – generieren Sie gleichzeitig auch eine neue Umsatzquelle.

matelso

About Us

Das MarTech-Unternehmen matelso – wir stehen für innovative und einfache Lösungen, die Ihr Marketing effizienter machen.

Newsroom

News, Pressemeldungen und mehr – alle Neuigkeiten über matelso auf einen Blick.