Migration einer AngularJS Applikation – Refactoring zu TypeScript und Angular5

Moderne, webbasierte Applikationen werden neben HTML5 und CSS3 mit JavaScript programmiert. In den vergangenen Jahren haben sich mehrere JavaScript Frameworks für die Entwicklung von Software im Webumfeld etabliert. Neben dem hier zum Einsatz kommenden Framework Angular in der Version 5, gibt es noch React, Ember.js und Vue.js, die eine ähnliche Verbreitung und Beliebtheit aufweisen können. All diese Frameworks zeichnet aus, dass sie aufgrund ihres Entwicklungsstandes sowie den dahinterstehenden Treibern wie Google oder Facebook, für den Enterprise-Einsatz verwendet werden können.

Ausgangslage

Ausgangsbasis ist eine Frontend-Applikation, die in AngularJS, dem Vorgänger von Angular, geschrieben wurde. Diese soll nun erneuert und auf die aktuelle Nachfolger-Version Angular5 gehoben werden. Mit dieser Migration soll die Anwendung zukunftsfähig gehalten werden, denn AngularJS wird nicht weiterentwickelt und der Nachfolger ist Angular in aktueller Version 5.

Unterschiede

In AngularJS war es noch nicht üblich die App mit TypeScript zu bauen. Hier wurde noch überwiegend mit nativem JavaScript programmiert. Inzwischen will man auf jeden Fall die Vorteile einer Abstraktionssprache wie TypeScript nutzen, um eine starke Typisierung zu erreichen. Damit schafft man eine wesentlich größere Stabilität im System und setzt die Basis für eine objektorientierte Entwicklung. Damit geht ein wichtiger Unterschied in Angular5 einher: es wird stark auf Dependency Injection sowie die Kapselung in Komponenten gesetzt.

Ansatz für die Migration

Basis für die Migration ist eine AngularJS-Applikation mit nativem JavaScript und ohne Komponenten. Diese setzt noch auf den MVC-Aufbau mit Controller und Views. Zudem wurden Template-Direktiven verwendet, die es so in Angular5 nicht mehr gibt. Alle View/ Controller Konstrukte sowie Direktiven mit eigenem Template müssen bei einer Migration in einzelne Komponenten überführt werden. Mit dieser Ausgangslage wurde die Entscheidung getroffen, keine schrittweise Migration, in der beide Frameworks parallel installiert und betrieben werden, anzugehen. Wir haben uns für den kompletten Neubau der Applikation entschieden und werden Modul für Modul neu aufbauen.

Wichtige Schritte und Anpassungen

Zu Beginn sollte man sich Gedanken über die Struktur des Projektes machen. Der bisherige Aufbau der App gibt zwar bereits einiges vor, jedoch kommen neue Ansätze wie Lazyloading hinzu, die auch strukturell einige neue Bedingungen fordern. Code, der in allen zukünftigen Modulen genutzt werden soll, wird üblicherweise in einen Shared-Ordner verlagert. Jedes Modul bekommt einen eigenen Ordner und die Komponenten, Klassen und Services zugeordnet, die nur innerhalb des Moduls benötigt werden. So können Feature-Module separat und nach Bedarf geladen werden.

Wie bereits beschrieben, müssen alle Controller und Views in Komponenten überführt werden. Dabei hilft uns ein neuer Ansatz von Angular5, die sogenannte Angular CLI (Command Line Interface). Damit lassen sich in der Entwicklung sehr schnell neue Components, Services und Module erstellen, ohne dass die redundante Arbeit der Grundstruktur von Classes etc. jedes Mal von Hand geschrieben werden muss.

Die Angular CLI ist auch perfekt geeignet, um das Build-System (Webpack) zu steuern. Sehr einfach kann so ein Node-Server gestartet werden, der die Anwendung packt, kompiliert und im Browser bereitstellt.
Ein großer und wichtiger Unterschied ist die Verwendung des Patterns Observable in Angular5. Diese ersetzen in weiten Teilen die bekannten Promises aus AngularJS. Die Observables kommen mit der Bibliothek RxJS für Reactivity in das Angular Framework. Mit dem Einsatz von RxJS wird die Kommunikation mit Schnittstellen sehr einfach und vor allem komfortabler. Die Migration jedoch ist nicht so trivial, da sich die Konzepte von Promises und Observables unterscheiden. Ein Promise wird sofort ausgeführt, während die Ausführung eines Observables erst mit einem .subscribe() startet.

Zusammenfassung

Eine Migration von AngularJS zu Angular5 ist ein Schritt, der für die Sicherheit und Updatefähigkeit einer Software vollzogen werden sollte. Dabei gibt es unterschiedliche Ansätze. So wird beispielsweise auf der Angular-Dokumentationsseite eine Migration mit einem dedizierten Migrationspacket beschrieben. Dieses geht jedoch davon aus, dass bereits mit Components gearbeitet wurde oder dass aus dem vorhandenen Code, Komponenten erstellt werden bevor eine Migration zu Angular 5 erfolgt. Dies erscheint umständlicher als mit Angular CLI ein komplett eigenständiges neues Angular5-Projekt aufzubauen. Zudem hat man damit sofort eine lauffähige App auf Basis von TypeScript und mit Webpack als Basis. Weiterhin lässt sich die Struktur auch neu entwerfen, wodurch man alten Code und alte Strukturen nur bedingt Beachtung schenken muss.
Der Aufwand für eine Migration ist nicht zu unterschätzen, lässt sich aber mit guter Planung in einem soliden Rahmen abwickeln.

Jetzt lesen

Blog - Technologie & Innovation

Resilient-Architekturen mit Circuit Breaker

Jetzt lesen

Weitere News

WIR SIND FÜR SIE DA!

Mit Q_PERIOR steht Ihnen ein starker Partner zur Seite.
Wir freuen uns auf Ihre Herausforderung!

25. Mai 2018|