Das Ziel dieser Arbeit ist es, die bestehenden Migrationskonzepte im Kontext der Migration und Portierung einer Webanwendung basierend auf AngularJS Framework zu analysieren, die Konzeption des Migrationsprozesses zu untersuchen und dies anhand eines Prototyps umzusetzen.
Die Architekturen, über die Webanwendung genutzt wurden, werden im Grundlagenteil näher erläutert. Im Anschluss geht die Arbeit auf das Thema Migration in der Informationstechnik ein. Deren Grundlagen werden erklärt und es wird ein Einblick in die verschiedenen Phasen einer Migration gegeben. Anschließend wird das inkrementelle Migrationskonzept von Google untersucht und konkretisiert, dieses wird an einer prototypischen Webanwendung umgesetzt und evaluiert. Abschließend wird anhand der Umsetzung ein Fazit gezogen und eine Zusammenfassung dargelegt.
Inhaltsverzeichnis
1 Einleitung
1.1 Motivation
1.2 Zielsetzung
1.3 Gang der Arbeit
2 Grundlagen
2.1 SPA-Framework
2.2 JavaScript
2.3 TypeScript
2.4 Model-View-Controller-Paradigma
2.4.1 Model-View-ViewModel-Architektur
2.4.2 Komponentenbasierte Architektur
2.5 AngularJS
2.6 Angular
2.7 Migration
2.7.1 Definition
2.7.2 Risiken
2.7.3 Ablauf
2.8 Verwandte Ansätze
2.8.1 ngUpgrade
2.8.2 Google Migration Guide
3 Analyse
3.1 Anforderungen
3.1.1 Voraussetzungen
3.1.2 Beeinflussende Faktoren
3.2 Analyse des Google Migration Guide für Angular
3.3 Einführung in AngularJS 1.5
3.3.1 Ursachen für Refaktorisierung
3.3.2 Von Direktiven zu Komponenten
4 Konzeption
4.1 Aufbau des AngularJS-Projektes
4.2 Integration von TypeScript
4.2.1 Installation
4.2.2 Einbindung
4.2.3 Portierung
4.3 Upgrade auf AngularJS Version 1.5
4.3.1 MVC und Komponenten im Angular-Umfeld
4.3.2 Refaktorisierung des AngularJS-Projektes
4.4 Integration von ngUpgrade
4.4.1 Einbindung
4.4.2 Migration der Komponente
4.4.3 Migration der übrigen Bestandteile
4.5 Erstellen eines neuen Angular-Projektes
5 Evaluation
5.1 Evaluierungskonzept
5.2 Vorbereitung
5.2.1 Projektstruktur
5.2.2 Eingesetzte Technologien
5.2.3 Codeanalyse
5.2.4 Überprüfung der Voraussetzungen
5.3 Durchführung der Migration
5.3.1 Installation Entwicklungsumgebung
5.3.2 Refaktorisierung
5.3.3 Migration
5.4 Diskussion der Evaluationsergebnisse
6 Schlussbetrachtung
6.1 Fazit
6.2 Zusammenfassung
Zielsetzung & Themen
Das Hauptziel dieser Arbeit ist es, das von Google bereitgestellte Migrationskonzept für Webanwendungen von AngularJS nach Angular kritisch zu analysieren, durch eigene Ansätze zu konkretisieren und dessen praktische Umsetzung anhand eines Prototyps zu evaluieren, um Unternehmen eine Entscheidungsgrundlage für die Portierung produktiver Anwendungen zu bieten.
- Analyse und Vergleich der Architekturen von AngularJS und Angular
- Untersuchung von Migrationsstrategien, insbesondere des inkrementellen Ansatzes
- Praktische Implementierung der Migration unter Einsatz der ngUpgrade-Bibliothek
- Refaktorisierung von Altsystemen (AngularJS 1.0-1.4) in Richtung komponentenbasierter Strukturen
- Qualitative und quantitative Evaluation des Migrationsprozesses mittels Testautomatisierung
Auszug aus dem Buch
4.3.2 Refaktorisierung des AngularJS-Projektes
”Refactoring is the process of changing a software system in such a way that it does not alter the external behavior of the code yet improves its internal structure. It is a disciplined way to clean up code that minimizes the chances of introducing bugs. In essence when you refactor you are improving the design of the code after it has been written.“
Martin Fowler, Refactoring [Fow99, S. 23]
Dieser Abschnitt beschäftigt sich mit der Refaktorisierung. Es ist ein tiefgreifendes Wissen über AngularJS und dessen Funktionsweise erforderlich, um die Umstellung ohne größere Komplikationen durchführen zu können.
Zur Einführung sei gesagt, dass Komponenten in AngularJS und Angular sich aus den folgenden zwei wesentlichen Bestandteilen zusammensetzen:
Ein Template, das HTML- und CSS-Dateien zur Darstellung der Komponente bereitstellt. Dieses kann entweder direkt im Quellcode der Komponente liegen oder in eine separate .html-Datei und auch .css-Datei ausgelagert werden.
Die Logik der Komponente, die festlegt, wie sich die Komponente in speziellen Fällen verhält.
Zusammenfassung der Kapitel
1 Einleitung: Diese Einleitung erläutert die Motivation für eine Migration von AngularJS nach Angular und definiert das Ziel dieser Arbeit, ein grundlegendes Migrationskonzept zu konkretisieren.
2 Grundlagen: Hier werden die theoretischen Grundlagen zu SPA-Frameworks, den beteiligten Programmiersprachen, dem MVC-Paradigma und dem allgemeinen Prozess der Software-Migration vermittelt.
3 Analyse: Dieses Kapitel definiert die Anforderungen an eine erfolgreiche Migration, analysiert den offiziellen Google Migration Guide und stellt AngularJS 1.5 als wichtige Zwischenstation für ältere Projekte vor.
4 Konzeption: Hier wird der detaillierte Migrationsprozess beschrieben, angefangen bei der Vorbereitung des AngularJS-Projektes über die Integration von TypeScript bis hin zum eigentlichen Umstieg mittels ngUpgrade.
5 Evaluation: In diesem Kapitel wird das vorgestellte Migrationskonzept anhand einer prototypischen Kontakt-Anwendung angewendet, dokumentiert und die Ergebnisse der Testreihen werden diskutiert.
6 Schlussbetrachtung: Die Arbeit schließt mit einem Fazit über die Effizienz des Migrationsprozesses und einer Zusammenfassung der gewonnenen Erkenntnisse ab.
Schlüsselwörter
AngularJS, Angular, Migration, Single-Page Application, Webentwicklung, TypeScript, ngUpgrade, Refaktorisierung, Softwarearchitektur, Prototyping, Komponentenbasierte Entwicklung, Testautomatisierung, Dependency Injection, JavaScript, Webanwendung
Häufig gestellte Fragen
Worum geht es in dieser Bachelorarbeit grundsätzlich?
Die Arbeit behandelt die Konzeption und Evaluation eines Prozesses, um bestehende Webanwendungen vom AngularJS-Framework auf das modernere Angular-Framework zu migrieren.
Welche zentralen Themenfelder werden abgedeckt?
Zentral sind die theoretische Fundierung von Web-Architekturen, die Analyse von Migrationsstrategien (speziell inkrementell via ngUpgrade) sowie die praktische Durchführung und Bewertung einer solchen Migration.
Was ist das primäre Ziel oder die Forschungsfrage?
Ziel ist es, das von Google vorgeschlagene Migrationskonzept zu präzisieren und zu erweitern, um insbesondere für ältere AngularJS-Projekte einen belastbaren Leitfaden für die Migration zu erstellen.
Welche wissenschaftliche Methode wird verwendet?
Die Arbeit kombiniert theoretische Analysen der Software-Migration mit einer empirischen Evaluation: Eine bestehende AngularJS-Anwendung wird analysiert, migriert und das Ergebnis anhand von End-to-End-Tests bewertet.
Was wird im Hauptteil behandelt?
Der Hauptteil gliedert sich in eine Analyse der Anforderungen, die Konzeption des Migrationspfades unter Einbeziehung von TypeScript und ngUpgrade sowie die praktische Implementierung und anschließende Evaluation.
Welche Schlüsselwörter charakterisieren die Arbeit?
Angular, AngularJS, Migration, TypeScript, ngUpgrade, Refaktorisierung und Web-Architektur.
Warum ist das Update auf AngularJS 1.5 laut Autor sinnvoll?
Die Version 1.5 führt eine komponentenbasierte Architektur ein, die sich stark an der von Angular orientiert und somit als essenzieller Vorbereitungsschritt für den späteren Umstieg dient.
Welche Rolle spielt die "ngUpgrade"-Bibliothek bei der Migration?
Sie ermöglicht den hybriden Betrieb von AngularJS und Angular innerhalb einer Anwendung, was eine schrittweise, inkrementelle Migration einzelner Komponenten erlaubt, statt das gesamte System auf einmal umzustellen.
Was sind die größten Herausforderungen bei der Migration, die der Autor feststellt?
Der Autor identifiziert insbesondere den hohen Arbeitsaufwand bei der Fehlersuche und die Notwendigkeit, ältere Projekte erst durch umfangreiche Refaktorisierung auf den neuesten Stand zu bringen, bevor eine Migration reibungslos erfolgen kann.
- Citar trabajo
- Jie Xin (Autor), 2018, Konzeption und Evaluation eines Migrationsprozesses von Webanwendungen von AngularJS nach Angular, Múnich, GRIN Verlag, https://www.grin.com/document/1019681
