Wie viele Webanwendungen, die in den 2010er Jahren entwickelt wurden, basiert Leapsome auf dem MEAN-Stack: MongoDB, Express, AngularJS, Node. Diese Elemente boten uns ein kampferprobtes, solides Fundament, auf dem wir unser Produkt von Grund auf entwickelten.

Im Jahr 2014 kündigte Google (berüchtigt) seine Absicht an, das Angular-Framework von Grund auf neu zu schreiben. Bei dieser Entscheidung wurde kein klarer Migrationspfad von AngularJS 1.x zu Angular 2 in Betracht gezogen. Infolgedessen wurde AngularJS 2018 in den LTS-Modus versetzt, was bedeutet, dass keine neuen Funktionen hinzugefügt werden und nur kritische Sicherheitspatches veröffentlicht werden können. Das Ende des Lebenszyklus von AngularJS wird für den 30. Juni 2021 erwartet.

So klischeehaft es in der Webentwicklung auch klingen mag, wir haben beschlossen, unseren Code zu migrieren. Wir wollten nicht mit einem ungewarteten Framework feststecken, also haben wir letztes Jahr begonnen, nach Alternativen für unser Frontend zu suchen.

Abwägen von Nutzen und Risiken

Die Migration von Code ist keine einfache Aufgabe. Dieser Prozess ist oft risikoreich und zeitaufwändig - Zeit, die in die Entwicklung noch tollerer Funktionen investiert werden könnte!

In unserem Fall war es nicht nur eine technische Notwendigkeit, ein bald veraltetes Framework abzulösen, sondern die Migration eröffnete auch neue Möglichkeiten. Die überzeugendsten sind die gesteigerte Leistung, die Produktivität (eine neuere Lösung würde auf den neuesten Werkzeugen basieren) und die Attraktivität für neue Mitarbeiter (Entwickler arbeiten in der Regel lieber mit neueren Technologien).

Um die Risiken während unserer Migration weiter zu minimieren, haben wir uns für folgenden Ansatz entschieden:

• Die Migration sollte schrittweise erfolgen, da wir den alten Code noch ausführen und pflegen müssen;
• Die ausgewählten Tools und Prozesse sollten dem Test der Zeit standhalten (in der Frontend-Welt sind das höchstens 3-4 Jahre);
• Der migrierte Code sollte eine solide Grundlage für weitere Verbesserungen bieten (PWA, a11y, Leistung, SSR, Electron usw.); und
• Für den Endbenutzer sollte kein Unterschied zwischen UI und UX erkennbar sein.

Auftritt Vue!

Unter Berücksichtigung der oben genannten Einschränkungen und nach gründlicher Evaluierung von mehr als einem Dutzend Frameworks und Sprachen (ja, einschließlich Ihrer Lieblingssprache) kamen wir zu dem Schluss, dass Vue den natürlichsten Entwicklungspfad für unsere Codebasis darstellt.

Wir hatten anfänglich Zweifel an Vue 3, vor allem wegen eines möglichen Déjà-vu bezüglich der AngularJS-Situation im Jahr 2014. Dennoch wurde die Abwärtskompatibilität von Vue-2-Komponenten umgehend angegangen, und so wie es aussieht, wird der gesamte Vue-2-Code sofort mit Vue 3 funktionieren.

Um uns mit dem neuen Framework vertraut zu machen, nutzten wir Vue zunächst für den Aufbau unserer Lob Wall. Die Erfahrung war insgesamt sehr positiv und hat uns in unserer Entscheidung bestärkt, unser gesamtes Frontend von AngularJS auf Vue zu migrieren.

Migrationsstrategie

In unserem Fall war es nicht zwingend erforderlich, während der Migration eine Single Page Application (SPA) beizubehalten. Dies ermöglichte es uns, einen anderen Weg als bei anderen Migrationsprozessen einzuschlagen.

Um eine rollende Migration durchzuführen, mussten wir sicherstellen, dass AngularJS und Vue nebeneinander bestehen können. Dazu setzten wir auf eine hybride Frontend-Architektur, die je nach Route nahtlos den richtigen Code ausliefert, ohne dass der Nutzer es merkt.

Dementsprechend haben wir eine neue /v/app-Route neben /app/ definiert und die Routen unter der Haube ausgetauscht. Dabei haben wir darauf geachtet, dass wir wissen, welche Route von jeder App bedient wird.

Wie bei jedem anderen Refactor benötigten wir eine Reihe von Tests, um unseren Frontend-Code erfolgreich zu migrieren. Daher waren agnostische End-to-End-Tests mit Cypress ein entscheidender Teil unserer Migrationsbemühungen.

Vorteile und Nachteile dieses Ansatzes

Wie bei jeder Entscheidung hat auch unser Ansatz zur Migration unseres Codes von AngularJS zu Vue Vorteile und Fallstricke.

Ein Vorteil war, dass wir mit unserem Frontend neu anfangen konnten, mit modernen Tools und einer völlig unabhängigen Toolchain. Das bedeutete, dass wir die notwendigen Kompilierungsschritte leicht hinzufügen und eine in sich geschlossene Codebasis für das Frontend haben konnten.

Die klare Trennung zwischen AngularJS- und Vue-Codebases ermöglichte es uns auch, mit verschiedenen Ansätzen innerhalb des neuen Vue-Codes zu experimentieren. Gleichzeitig stellten wir sicher, dass unser Legacy-Code weiterhin wie erwartet funktionierte und dass er unabhängig verbessert und betrieben werden konnte.

Der größte Nachteil dieses Ansatzes besteht darin, dass wir unseren Nutzern am Ende zwei Apps anbieten und damit den SPA-Vertrag brechen, auf den sich die meisten modernen Frameworks für die Erstellung reichhaltiger Web-Erlebnisse verlassen. Dennoch haben wir es geschafft, den Übergang schnell genug zu vollziehen, um die User-Experience nicht zu beeinträchtigen. Obwohl dies in unserem Fall kein großes Hindernis darstellte, kann nicht jedes Produkt erfolgreich mit solchen Einschränkungen umgehen.

Beachten Sie, dass die Migration in diesem Fall bedeutet, dass die gesamte Route neu geschrieben werden muss. Dies kann sowohl ein Nachteil (ein ganzer Bildschirm muss auf einmal migriert werden) als auch ein Vorteil sein, da so hybride Ansichten aus miteinander verwobenen AngularJS- und Vue-Komponenten vermieden werden.

Aktueller Stand

Nachdem wir diesen Weg vor ein paar Monaten eingeschlagen haben, haben wir bereits erfolgreich ein komplett neues Modul in Vue entwickelt (nämlich unser Lern-Modul). Außerdem haben wir die meisten Verwaltungsbereiche auf das neue Framework umgestellt und bieten unseren Kunden weiterhin hervorragende Funktionen.

Dieser Ansatz hat sich für uns bisher bewährt, und wir wollen die Migration noch vor dem Ende der Lebensdauer von Angular im nächsten Sommer abschließen.

Letztlich ist jedes technische Vorhaben, das wir bei Leapsome in Angriff nehmen, auf unser Ziel ausgerichtet, die Arbeit für alle erfüllender zu machen. Die Fähigkeit, schnell hochwertige Funktionen zu entwickeln, unterstützt unser Ziel.

- Übrigens, wir stellen ein!