AngularJS zu Angular migrieren

26. Juli 2017
Angular
AngularJS wurde 2009 released und war mehr für Designer als für Entwickler gedacht. Bei großen Anwendungen bekam man da schon mal leicht Performance-Probleme. Weiterhin gab es keine Struktur auf der Code-Ebene und nur eine schlechte Steuerung des Datenflusses.
 
Version 2, welche im September 2016 erschien, brachte grundsätzliche Änderungen. Von da an gibt es nun ein natives Modul System und ein Design, welches sich an seinen Komponenten orientiert. Weiterhin wurde das Templating vereinheitlicht und das Tooling (Webpack, grunt, gulp) verbessert. Der größte Pluspunkt ist aber die deutliche Steigerung der Performance.

AngularJS vs. Angular

Um erfolgreich migrieren zu können, muss man die konzeptionellen Unterschiede und Gemeinsamkeiten zwischen AngularJS und Angular kennen. Diese werden in der Tabelle deutlich:
 

AngularJS

Angular (Version 2)

SPA SPA (gleichgeblieben)
Data-Binding Data-Binding (gleichgeblieben)
Dependency-Injection Dependency-Injection (gleichgeblieben)
Service & Factory Service
Filters Pipes
Directive ohne Template Directive
Directive mit Template Components
Controllers Components
Module NgModule
Scope
(gibt es nicht mehr)

 

Angular Migrations-Strategien für Applikationen

 
Es gibt drei Möglichkeiten eine AngularJS Applikation auf Angular zu migrieren.

Nr. 1: Big Bang

Der gesamte Code wird neu in Angular geschrieben.
 
Vorteile:
  • Fachliche Details sind bereits bekannt, daher kann die Umsetzung deutlich schneller erfolgen als bei Erstentwicklung
  • Danach keinen Legacy-Code mehr
  • Kein zusätzlicher Aufwand für Schrittweise Migration
  • Ergebnis: hoch optimierte Anwendung
Nachteile:
  • Angular-Wissen wird benötigt
  • Oft zu aufwändig / zu teuer
  • Weiterentwicklung stockt, parallele Weiterentwicklung muss nachgezogen werden

Nr. 2: Adaptieren

Die Anwendung bleibt AngularJS, es werden nur die Konzepte und Best Practices aufgegriffen. Neuer Code wird mit den neuen Konzepten geschrieben, alter Code wird schrittweise angepasst. Am Ende wird es ein Little Bang geben, wenn man dann komplett von AngluarJS auf Angular umsteigt.
 
Vorteile: 
  • Schrittweise neue Konzepte lernen und einbauen
  • Weiterentwicklungen sind parallel am laufenden Projekt möglich
  • AngularJS kann erweitert werden
    • TypeScript
    • ES Module
    • Komponenten
Nachteile:
  • Tooling / Build wird komplizierter
  • Kein echtes Angular
    • Performanceverbesserungen von Angular werden nicht genutzt
    • Angular Features können nicht genutzt werden (z.B. Style-Encapsulation) 
  • Little Bang:  sämtlicher Code muss nochmal angefasst werden

Nr. 3: Hybrid

Anwendung bleibt vorerst AngularJS, Angular wird zusätzlich mit eingebunden. Neuer Code wird nur noch für Angular geschrieben. Alter Code kann schrittweise migriert werden. Komponenten und Services von AngularJS und Angular können sich teilweise gegenseitig dank Up- und Downgrade verwenden.
 
Vorteile:
  • Schrittweise neue Konzepte lernen und einbauen
  • Weiterentwicklung profitiert sofort von Angular
  • Alter Code kann Schritt für Schritt migriert werden
  • Tiny Pop: Leichter Wechsel zu Angular am Ende
Nachteile:
  • Angular wird als Bibliothek eingebunden
    • Recht schwergewichtig (ohne Optimierung des CLI)
    • Für mobile Applikationen eher ungeeignet
  • Tooling / Build
  • Verstehen von Upgrade und Downgrade
  • Nicht alles lässt sich up- bzw. downgraden, wie z.B. Pipes bzw. Filter oder die Direktiven ohne Templates

Welche Migrations-Strategie passt am besten?

Jetzt, nachdem wir die drei Strategien kennengelernt haben, muss man noch folgendes beachten: Die Wahrheit des tatsächlichen Migrationspfades liegt irgendwo dazwischen. 
 
Bei den meisten Migrationen adaptiert man erst, danach setzt man Hybrid zum weiteren Vorgehen ein. Am Ende der Migration kommt dann eventuell noch ein Rest-Big-Bang.

Ein praktisches Beispiel einer Angular-Migration

Um ein praktisches Beispiel einer Migration zu haben, fasse ich den 10-Punkte-Plan von Asim Hussain in einer Tabelle zusammen. In dem Git können anhand der Branches die verschiedenen zehn Schritte mit direkten Codebeispielen angesehen werden.
 

Schritt 

Task

Beschreibung

1.  Style Guide Sichergehen, dass alle Entitäten eine eigene Datei haben
2.  TypeScript & build tools
Dateien: 
  • Alle js Dateien in ts-Dateien umbenennen
  • Kopiere Pakete von „bower.json“ nach „package.json“
  • Erstelle Einsprungspunkt „src/main.ts“ welche alle benötigten Importe damit webpack weiß, was er zu bundlen hat.
 
Tooling:
  • Installieren der build tools (z.B. „webpack“, „typescript“) 
3. Update AngularJS to 1.5 Upgrade der Angular Version auf neuste 1.x Version
4.  Component’ify
  • Controller zu Componenten umschreiben
  • Directives zu Compontents umschreiben
5.  ES6’ify
Update der Services/Factories um ES6 Klassen zu benutzen
  • Statt „anguar.forEach“ jetzt „for..of“ nutzen
  • Statt „$q“ jetzt „Promise“ nutzen
  • Statt „factory“ jetzt „Service“ nutzen
6.  DualBoot Einfügen der Angular 2.0 Abhängigkeit in die „package.json“
7.  Services to Angular 2.0 Services auf Angular 2.0 umschreiben
8.  Components to Angular 2.0 Komponenten auf Angular 2.0 umschreiben
9. Routing & Booting Angular 2.0

ui-route wird mit Angular Route ersetzt

  • Ersetze „UIRouterStateParams“ mit „ActivatedRoute“
  • Ersetze „UIRouterState“ mit „Router“
10, Removing AngularJS Alle Referenzen zu AngularJS werden entfernt
 
 
Quellen:
Vortrag „ng1 zu ng2+ migrieren / Philipp Burgmer @enterJS2017
NG-Conf 2017 Votrag von Asim Hussain (https://www.youtube.com/watch?v=4p1jG2QNc4U)
 

 

Neuen Kommentar schreiben