Seite 4: Zur Diskussion gestellt

Im aktuellen Release von Vue.js 3 befinden sich zudem Features, die nicht final, sondern zu Testzwecken im Release verblieben sind. Dass sich die teilweise undokumentierten Funktionen dennoch nutzen lassen, ist beabsichtigt: Dadurch entsteht ein Bild, wie die Community die Neuerungen annimmt und ob noch Änderungen bis zur Version 3.1 erforderlich sind, wenn die Funktionen final sein sollen.

Eine experimentelle Neuerung ist das Tag script setup: syntaktischer Zucker, um die Composition API in Single File Components (SFC) zu nutzen. Das Framework erstellt für Code, der die Composition API nutzt, immer eine setup-Funktion, die häufig allein steht und den gesamten Code enthält. Dadurch entsteht unnötiger Boilerplate-Code. Das RFC-Dokument zur Funktion script setup führt ein Beispiel als Anschauungsmodell dafür auf, wie das neue Tag die setup-Methode spart:

<template>
  <button @click="inc">{{ count }}</button>
</template>

<script setup>
  import { ref } from 'vue'
  export const count = ref(0)
  export const inc = () => count.value++
</script>

Die angenehme Änderung könnte bei kleineren Komponenten häufig zum Einsatz kommen. Das RFC-Dokument beschreibt zudem die Edge Cases und Abwandlungen, die es bei der Implementierung ebenfalls zu berücksichtigen gilt.

Zudem gibt es in der aktuellen Vue.js-Version eine undokumentierte <Suspense>-Komponente. Sie wartet auf das initiale Rendern verschachtelter asynchroner Abhängigkeiten wie Komponenten mit einer asynchronen setup-Funktion. Davor zeigen sie ein Fallback-Template beispielsweise in Form einer Meldung wie "Die Daten werden geladen". Sind die asynchronen Funktionen bereit, rendert das System das default-Template. Auf die Weise können Entwickler Feedback in der UI anzuzeigen, wenn eine asynchrone Operation im Hintergrund läuft und noch nicht abgeschlossen ist:

<Suspense>
  <template #default>
    <div>…</div>
  </template>
  <template #fallback>
    <div>Die Daten werden geladen...</div>
  </template>
</Suspense>

Die Release-Informationen zu Vue.js 3 erklären weitere noch nicht endgültige Änderungen ausführlich. Planmäßig sollen alle in Vue.js 3.1 enthalten sein.

Blick aufs Ökosystem

Zeitgemäße Softwareentwicklung basiert auf einer Vielzahl von Einzelteilen in einem komplexen Ökosystem. Auch umfassende Web-Frameworks wie Vue.js, Angular oder React setzen auf eine Vielzahl zusätzlicher Bibliotheken und Tools. In der Webwelt spielen sie womöglich eine besonders große Rolle, da der typische Web-Stack immer komplexer wird. Bei umfassenden Änderungen einer Hauptversion muss das Ökosystem nachziehen, und bei Vue.js ist die Umstellung in vollem Gange. Zum Zeitpunkt der Veröffentlichung dieses Artikels bieten viele Tools und Librarys bereits Support für die neue Version, wenn auch noch nicht immer in der finalen Fassung.

Vue CLI arbeitet bereits seit der Mitte Juli veröffentlichten Version 4.5.0 mit Vue.js zusammen. Die Kennzeichnung als "Vue 3 Preview" dürfte sich in Kürze ändern, und wer das Plug-in vue-cli-plugin-vue-next installiert hatte, kann es jetzt gefahrlos ersetzen. Änderungen an der API des Kommandozeilentools gibt es nicht.

Bei der offiziellen Router-Komponente Vue Router besteht der Support für Vue.js 3 seit der Version 4.0. Mitte November ist der Release Candidate 3 erschienen. Die Breaking Changes in Vue Router, die sich durch die API-Änderungen von Vue.js 3 ergeben, beschreibt die Dokumentation umfassend. Wer auf die Composition API von Vue.js 3 setzt, kann neue Funktionen in Vue Router 4 nutzen können. Unter anderem bietet er Navigation Guards als Composition API-Funktionen an, die sich in einer Vue-Komponente verwenden lassen.

Die Bibliothek Vuex zum Umsetzen des State Management Pattern bringt nahezu keine gravierenden Änderungen mit. Unterstützung für Vue.js 3 ist seit Vuex 4.0 vorhanden. Die aktuelle Version steht seit Anfang November als Release Candidate zur Verfügung. Durch die Anpassungen beim Mounting von Vue.js 3 ändert sich der Installationsvorgang für das Plug-in. Daneben gibt es keine nennenswerten Änderungen, aber neue Funktionen, die ebenfalls auf die Composition API zurückgehen. Beispielsweise existiert jetzt die Composition API-Funktion useStore, um in einer Komponente auf den Store zuzugreifen.

Die überarbeitete Browser-Erweiterung Devtools für Chrome und Firefox ist aktuell in der Beta-Phase. Sie soll künftig mehrere Vue.js-Versionen unterstützen, lässt sich derzeit aber ausschließlich mit Vue.js 3 verwenden. Die Integration von Vuex und Vue Router ist noch in Arbeit. Als Entwicklungsumgebung empfiehlt sich die Kombination aus Visual Studio Code und der offiziellen Extension Vetur. Zahlreiche andere Bibliotheken wie vue-class-component, Nuxt.js, Vuetify oder Quasar sind aktuell in Beta-Phasen, um die Unterstützung für Vue.js 3 zu bieten. Einige Teams, darunter das von Vuetify, haben angekündigt, dass die nächste Hauptversion komplett auf die Composition API setzt.

Pfade der Migration

Die Migration auf eine neue Hauptversion eines Webframeworks bringt bei allen neuen Funktionen stets Herausforderung mit. Insbesondere bei laufenden Projekten kann eine Umstellung mitunter viel Arbeit verursachen, und das ist bei Vue.js 3 nicht anders. Die Dokumentation zum Webframework bietet einen Migrationsleitfaden, der alle relevanten Änderungen auflistet.

Anpassungen zu einigen Punkten auf der langen Liste der Änderungen lassen sich schnell umsetzen, während andere aufwendiger sind. Entwickler sollten den Aufwand für die Migration nicht unterschätzen. Generell sind viele Neuerungen von Vue.js 3 schon deshalb abwärtskompatibel, weil sie optional sind. Trotzdem gibt es einige verpflichtende Änderungen aufgrund grundlegend geänderter Vorgehensweisen.

Wer eine Migration anstrebt, kann die notwendigen Änderungen grob in drei Kategorien einteilen: erwähnenswerte neue Funktionen, Breaking Changes und alles rund um unterstützende Bibliotheken. Zur ersten Kategorie zählen die neuen Funktionen, die alle optional sind. Daher besteht kein zwingender Handlungsbedarf. Zu den schwerwiegenderen Breaking Changes gehören unter anderem die Änderungen an der globalen API, da sie nur die neue Art des Mounting lokaler Vue.js-Instanzen nutzen. Daneben existieren Änderungen an v-model, key, v-if, v-for, funktionalen und asynchronen Komponenten sowie der Render-Funktion.

Schließlich gibt es kleinere Änderungen, und einige APIs wurden entfernt. Nennenswert sind unter anderem die entfallenen Aufrufe von $on, $off, $once, Filtern, $children und $destroy. Dass $on, $off und $once wegfallen, könnte Auswirkungen auf einige Projekte haben, da einige Entwickler diese Funktionen zum Implementieren von Bus-Systemen im Stil von Event-Hubs genutzt haben. $emit ist dagegen weiterhin vorhanden, da die Funktion Event-Handler triggert. Der Migrationsleitfaden verweist zum Implementieren eines Bus-Systems auf Bibliotheken wie mitt oder tiny-emitter [22].

Teams sollten für langlebige Projekte einen Blick auf die Änderungen werfen, um die Weiterentwicklung in Richtung neuer und geänderter Funktionen lenken zu können. Wer nicht auf Vue.js 3 wechseln möchte, sollte berücksichtigen, dass Vue.js 2.7 die letzte Major-Version des 2er-Strangs ist. Obwohl sie Long-Term Support (LTS) für 18 Monate erhält und Ende 2020 erscheinen soll, läuft die Version 2 langfristig gesehen aus, und Version 2.7 wird nur noch kritische Bugfixes erhalten. Die Version soll als sogenannter Migration-Build einen langsamen, aber strategischen Wechseln von Version 2 auf 3 ermöglichen. Features der neuen Version, die in Version 2 funktionieren, portiert das Vue-Team zurück. Zusätzlich warnt das Release beim Verwenden auslaufender (deprecated) Funktionen. Auf die Weise können Entwickler wichtige Anpassungen vornehmen, bevor sie endgültig auf Version 3 umsteigen. Wer mit Internet Explorer 11 arbeitet, muss sich mit dem Umstieg gedulden, da noch kein kompatibler Build von Vue.js 3 dafür existiert. Eine kompakte Übersicht der Roadmap bietet die Projektübersicht zu Vue.js 3 auf GitHub.

Wer über einen Wechsel auf Version 3 nachdenkt, sollte zwingend einen Blick auf das Ökosystem werfen. Auch wenn die Community eifrig an den elementaren Bibliotheken arbeitet und erste kompatible Versionen veröffentlicht hat, sind die meisten noch nicht final freigegeben. Ein harter Wechsel auf Vue.js 3 ist daher noch nicht empfehlenswert.