Obwohl Angular2 bereits 2016 veröffentlicht wurde und nur seit einem knappen Jahr komplett aus dem Support genommen wurde, hat AngularJS 1.X immer noch über 500.000 wöchentliche Downloads. So hat auch unser Kunde, die Elbehyp, sein Frontend mit AngularJS entwickeln lassen, bevor die Biga Software den Kunden in diesem Jahr übernommen hat. In den letzten Monaten wurde ein Migrationsplan auf vue.js erstellt und umgesetzt.
Vue first
Wir sind davon überzeugt, dass vue das leichtgewichtigste JavaScript Framework ist und ist daher das Framework unserer Wahl, wenn wir freie Wahl haben. Die Anwendung der Elbehyp ist allerdings zu groß und zu komplex, um dies wirtschaftlich „BigBang“ neu zu entwickeln. Wir wollen aber neue und häufig geänderte Komponenten mit modernen Werkzeug neu entwickeln. Bei der Suche nach Vorgehen findet man viele Ansätze vue Komponenten in eine bestehende AngularJS Anwendung einzubetten. Dies ist Allerdings nicht der Ansatz, den wir erreichen wollen. Wir wollen ein vue-Kompilat haben und zusätzlich auch den vue-Router nutzen und die AngularJS-Komponenten nur einbetten.
Leider ist es nicht möglich, einzelne AngularJS-Komponenten anzuzeigen, daher läuft die AngularJS Anwendung im Hintergrund. Je nachdem, ob eine Angular-Komponenten angezeigt wird, wird dies in einem Rahmen per CSS gesetzt. Dies macht die Parallelentwicklung extrem einfach, hat aber den Nachteil, dass immer nur eine Angularkomponente pro Seite anzeigbar ist.
Wie wird dies eingebunden?
Die bestehende AngularJS-Anwendung hat seine Abhängigkeiten mit bower gezogen, hat allerdings am Ende nur das JavaScript ausgeführt. Wir erstellen eine vue3 Anwendung, welche mit webpack und npm gebaut werden soll. Um die AngularJS Anwendung einzubetten, nutzten wir nun die index.html Seite im public Ordner. Hier fügen wir die Skripte mittels „klassischer“ Skript-Tags ein.
Kommunikation der beiden Systeme
Die Kommunikation zwischen den beiden Systemen sollte möglichst gering gehalten werden, trotzdem wird eine gewisse Kommunikation benötigt. Dies sind Links und Anmeldeinformationen. Hierzu werden auch die normalen Browserfunktionalitäten genutzt. Wir registrieren eine Methode am Windowobjekt, welche dann aufgerufen wird.
Code auf der Angularseite
window.doStuff = () => fooBar;
Code auf der Vueseite
window.doStuff(angularState, options, { reload: true });
Zwei Routersysteme
Wir wollen den vue-Router nutzen und dieser ist auch der primäre Router. Sofern wir aber den Angularstate ändern, ändert sich auch die Router. Diese beiden Router leben parallel nebenher. Der vue-Router reagiert aber auch, wenn AngularJS die Route ändert. Beide Router haben unterschiedliche Konzepte: vue-js routet einfach via /foo, während AngularJS eine Route /#/foo hat. Daher können wir folgenden Code nutzen.
this.$router.beforeEach((to, _) => {that.showAngular = to.hash.startsWith("#");
});
Mit diesen zwei Kniffen ist es einfach möglich, beide AngularJS Anwendungen parallel zu nutzen. Die Entwicklung mit vue.js ist viel schneller und effektiver, trotzdem sind die alten stabilen Codestellen weiterhin funktional in der Anwendung eingebettet.
