Wie kann eine Single Page Application mit dem Architektur Muster MVC umgesetzt werden? Die Antwort erfolgt in dieser Arbeit prototypisch am Beispiel des JavaScript Frameworks AngularJS.
Weltweit verwenden immer mehr Menschen das Internet. Das belegt die Studie von International Telecommunication Union (ITU) die besagt, dass die Anzahl 2005 noch bei 1 Milliarden und 2017 bereits 3,9 Milliarden Benutzern lag. Auch die Nutzungsdauer des Internet ist gestiegen. 2005 lag sie in Deutschland bei 46 Minuten am Tag und hat sich 2018 mit 196 Minuten mehr als vervierfacht. Daraus kann abgeleitet werden, dass die Auslastung der Webserver stetig steigt. Um diese Auslastung zu senken, können Single Page Applications (SPA), welche nur teilweise den Inhalt der Seite nachladen, verwendet werden.
Ein weitere Herausforderung ist, dass die Anforderungen der User an die Webseiten immer größer werden. Schlagwörter sind User Experience (UX) und Usability. Ersteres beschreibt das subjektive Nutzererlebnis, Usability hingegen die Benutzbarkeit der Webseiten. Durch die Umsetzung der Anforderungen, steigt die Komplexität der Webanwendung und in Folge dessen die des Programmcodes. Um einen komplexen Programmcode zu entwickeln, zu testen und zu warten, sollten bestimmte Architekturmuster eingehalten werden. Dies kann durch das MVC Muster erreicht werden, welches die Programmkomponenten in Model, View und Controller unterteilt. Somit ist eine Single Page Applikation mit einem MVC Muster geeignet, um die oben genannten Herausforderungen zu adressieren. Ob die Kombination umsetzbar ist, soll in dieser Hausarbeit herausgearbeitet werden.
Inhaltsverzeichnis
1. Einleitung
1.1 Problemstellung
1.2 Motivation
1.3 Forschungsfrage
1.4 Ziel und Aufbau der Arbeit
2. Einführung in Angular
2.1 HTML und CSS
2.2 JavaScript
2.3 MVC
2.4 Single Page Application (SPA)
2.5 Angular
3. Hauptteil
3.1 Methodisches Vorgehen
3.2 Implementierungsgrundlagen
3.2.1 Ordnerstruktur
3.2.2 Extern eingebundene Inhalte
3.3 Implementierung View
3.3.1 Index.html
3.3.2 home.html
3.3.3 game.html
3.4 Implementierung Controller
3.4.1 game.js
3.4.2 controller.js
3.4.3 service.js
3.5 Auswertung und Diskussion
4. Schluss
4.1 Fazit
4.2 Reflektion
Zielsetzung & Themen
Das Hauptziel dieser Arbeit ist es, die praktische Implementierung einer Single Page Application (SPA) unter Verwendung des JavaScript-Frameworks AngularJS zu erläutern und dabei die Eignung des Frameworks für den Architekturansatz des Model-View-Controller (MVC) Modells zu bewerten.
- Grundlagen moderner Webtechnologien wie HTML, CSS und JavaScript
- Einführung in das MVC-Architekturmuster und das Konzept von Single Page Applications
- Detaillierte Vorstellung der AngularJS-Framework-Komponenten (Controller, Scopes, Services)
- Prototypische Implementierung eines "Rock, Paper, Scissors"-Simulators
- Bewertung der Modularität und Wartbarkeit von SPA-Architekturen
Auszug aus dem Buch
2.4 Single Page Application (SPA)
Single Page Application sind über den Browser aufrufbare Webseiten. Gegenüber der Multi Page Application (MPA) werden sie dadurch charakterisiert, dass durch eine User Interaktionen nicht die volle Webseite neu geladen werden muss. Es werden nur die nötigen Komponenten der Seite nachgeladen. Dadurch wird Bandbreite gespart und die Ladezeit verkürzt. Resultat ist, dass der User ein flüssiges Userinterface bedient, welches mit einer Desktop Anwendung vergleichbar ist. Der Ablauf eines Aufrufs einer SPA startet mit dem initialen HTTPS Request vom Client an dem Server. Der Client erhält anschließend das initiale HTML Dokument, Skripte, Bilder und weitere Webinhalte. Bei anschließender User Interaktion wird ein AJAX Request an den Server gesendet, der via JSON Response beantwortet wird.
Zusammenfassung der Kapitel
1. Einleitung: Die Arbeit thematisiert die steigende Serverauslastung und Benutzeranforderungen im Web und stellt die SPA als Lösungsansatz mit MVC-Muster vor.
2. Einführung in Angular: Dieses Kapitel erläutert die technologischen Grundlagen von HTML, CSS und JavaScript sowie das MVC-Paradigma und spezifische Konzepte von AngularJS wie Data-Binding und Module.
3. Hauptteil: Der Hauptteil beschreibt das methodische Vorgehen bei der Prototypenentwicklung und dokumentiert detailliert die Implementierung der Ordnerstruktur, der Views sowie der Controller-Logik.
4. Schluss: Das Fazit bestätigt die Eignung von AngularJS zur Umsetzung von SPA-Architekturen mit MVC-Strukturen, während die Reflektion den kleinen Projektumfang und mögliche Erweiterungen diskutiert.
Schlüsselwörter
AngularJS, Single Page Application, SPA, MVC, Architekturmuster, JavaScript, Webentwicklung, Controller, Scope, Databinding, HTML5, CSS, Prototyp, User Experience, Web-Architektur
Häufig gestellte Fragen
Worum geht es in dieser Arbeit grundsätzlich?
Die Arbeit behandelt die Entwicklung einer Single Page Application (SPA) mithilfe des AngularJS-Frameworks, um moderne Web-Architekturprinzipien praktisch anzuwenden.
Welche zentralen Themenfelder werden abgedeckt?
Die zentralen Themen umfassen die Architekturmuster MVC, die Funktionsweise von SPAs, das AngularJS-Framework sowie die Implementierung einer interaktiven Webanwendung.
Was ist das primäre Ziel oder die Forschungsfrage?
Die Forschungsfrage lautet, wie eine Single Page Application unter Anwendung des MVC-Architekturmusters mit AngularJS umgesetzt werden kann.
Welche wissenschaftliche Methode wird verwendet?
Der Autor verwendet einen prototypischen Ansatz: Ein theoretischer Rahmen wird durch die Entwicklung einer konkreten Anwendung (ein Schere-Stein-Papier-Simulator) in der Praxis validiert.
Was wird im Hauptteil der Arbeit behandelt?
Der Hauptteil dokumentiert das methodische Vorgehen, die grundlegende Dateistruktur, die Implementierung der verschiedenen Komponenten wie View-Templates und Controller sowie die logische Anbindung über Services.
Welche Schlüsselwörter charakterisieren die Arbeit?
Die wichtigsten Begriffe sind AngularJS, Single Page Application (SPA), Model-View-Controller (MVC) und moderne Web-Frontend-Technologien.
Welche spezifischen Aufgaben übernehmen die "Services" in der AngularJS-Anwendung?
Die Services werden dazu genutzt, die Geschäftslogik aus den Controllern auszulagern, speziell für die Bestimmung des Spielergebnisses und die Verwaltung der Spielhistorie.
Warum ist die Wahl des MVC-Musters für SPAs laut Autor vorteilhaft?
Durch die Trennung von Datenhaltung (Model), grafischer Oberfläche (View) und Steuerung (Controller) wird die Modularität erhöht und die Wartung sowie Erweiterbarkeit des Codes vereinfacht.
- Arbeit zitieren
- Dominik Horwath (Autor:in), 2019, Konzept und Implementierung einer Single Page Application mit AngularJS, München, GRIN Verlag, https://www.grin.com/document/501302
