Als Single Page Webanwendung englisch single page application kurz SPA oder Einzelseiten Webanwendung wird eine Webanwendung bezeichnet die aus einem einzigen HTML Dokument besteht und deren Inhalte dynamisch nachgeladen werden Im Gegensatz dazu bestehen klassische Webanwendungen aus mehreren untereinander verlinkten HTML Dokumenten Hierdurch wird die Grundlage geschaffen eine Webanwendung in Form einer Rich Client bzw Fat Client Verteilung zu entwickeln Eine verstarkte clientseitige Ausfuhrung der Webanwendung ermoglicht eine Reduzierung der Serverlast sowie die Umsetzung von selbststandigen Webclients die beispielsweise eine Offline Unterstutzung anbieten Inhaltsverzeichnis 1 Ziele und Anforderungen 2 Einsatzszenarien 3 Mogliche JavaScript Frameworks fur SPAs 4 Techniken 5 Siehe auch 6 Weblinks 7 EinzelnachweiseZiele und Anforderungen Bearbeiten nbsp Skizzierung des Ablaufs einer Single Page WebanwendungDurch die Nutzung einer einzigen Webseite als Fundament fur eine vollstandige Webanwendung kann die Client Server Kommunikation reduziert werden Die Webseite kann zur Laufzeit der Applikation dynamisch erweitert werden Auf diese Weise kann auf eine Navigation zwischen verschiedenen Webseiten verzichtet und die Wartezeit reduziert werden Bei dem sonst ublichen Wechsel von Unterseiten einer Webanwendung im Webbrowser wird samtliche clientseitige Prasentationslogik beendet und auf der nachsten Webseite neu begonnen Ein solches Verhalten unterbindet andauernden clientseitige Vorgange sowie die Nutzung einer durchgangigen WebSocket Verbindung Ein weiteres Merkmal von SPAs wird haufig mit dem Titel offline friendly bezeichnet Durch die vollstandige Umsetzung der Prasentationsschicht auf dem Client ist es moglich mithilfe der Web Storage Funktion persistente Zwischenspeicher anzulegen Fur den Fall dass der Nutzdatenserver nicht erreichbar ist konnen Daten aus dem Zwischenspeicher verwendet werden Die Anwendung kann somit weiterhin auf dem Client betrieben werden ohne dass eine Verbindung zum Server bestehen muss Der Einsatz einer clientseitigen Persistierung kann uber die Bildung von Zwischenspeicher hinausgehen und zu einer verteilten Persistenz fuhren In solchen verteilten Datenhaltungen kann jeder Client als einzelner Datenknoten betrachtet werden welcher bei einer bestehenden Kommunikationsverbindung seinen Datenvorrat mit anderen Teilnehmerknoten synchronisiert Die Eigenschaft offline friendly verweist ebenfalls auf die Portierbarkeit von Single Page Applikationen auf mobile Endgerate hin Sogenannte mobile HTML5 Offline Apps basieren grosstenteils auf der gleichen Infrastruktur wie SPAs Bei Single Page Webanwendungen findet eine Dezentralisierung statt Wahrend in bisherigen Vorgehensweisen der Webserver die zentrale Einheit zur Steuerung der Prasentation war stellt dieser in SPAs nur noch benotigte Daten bereit Die Webanwendung wird in zwei getrennte Systeme segmentiert Folgende drei Regeln fur die Segmentierung bei Single Page Webanwendungen konnen definiert werden 1 Der Sitzungszustand wird in der Client Applikation gespeichert nicht im Server Durch die Realisierung der Webanwendung auf Basis eines einzelnen HTML Dokuments bleibt der Zustand der Anwendung im Webclient stets erhalten Das erneute Laden dieses HTML Dokuments ist mit einem Neustart der Anwendung gleichzusetzen Hinzu kommt dass HTTP ein ressourcenorientiertes und zustandsloses Protokoll ist Die sonst ubliche kunstliche Emulation von Sitzungszustanden auf Basis von Cookies ist bei Single Page Webanwendungen somit nicht mehr notig Die Art der Sitzungsverwaltung ist ein klassisches Entwurfsproblem bei verteilten Anwendungen welches sich stark auf die Skalierbarkeit und Performanz der Anwendung auswirken kann Durch die clientseitige Sitzungsverwaltung konnen die serverseitigen Funktionalitaten zustandslos implementiert werden Das bedeutet dass bei einer Lastverteilung ein beliebiger Serverknoten antworten kann Des Weiteren werden serverseitig keine Ressourcen pro aktiver Clientsitzung verbraucht Der Webclient ist eine unabhangige Einheit und baut auf verschiedenen Services auf Dies erlaubt dass der Webclient selbststandig auf Benutzeraktionen reagieren kann Auf eine Vielzahl von Client Server Roundtrips kann verzichtet werden wodurch der Datenverkehr reduziert wird die Anwendung schneller reagiert und die User Experience zunimmt Des Weiteren kann der Client losgelost von einem Server entwickelt werden und muss die Services nur einsetzen wenn diese benotigt werden Die verwendeten Services treffen keine Annahmen daruber wie der Webclient die angebotenen Dienste einsetzt Die Serverseite kann ebenfalls losgelost vom Client implementiert und getestet werden Durch diese Entkopplung konnen die bereitgestellten Dienste ebenfalls in verschiedenen anderen Projekten verwendet werden Einsatzszenarien BearbeitenGrosse Benutzerzahlen Einsatzgebiete mit grossen Benutzerzahlen sind das typische Standardszenario fur Single Page Webanwendungen Erfolgreiche Projekte wie Facebook Google Gmail Google Maps und Twitter haben hierbei Pionierarbeit geleistet Alle Beispiele sind im B2C Markt vertreten Hierbei ist mit grossen Benutzeranzahlen zu rechnen Um die Serverlast zu reduzieren und zeitgleich eine optimale Skalierbarkeit der Anwendung zu realisieren bietet sich das SPA Paradigma an Der Betrieb einer ausschliesslich clientseitigen Prasentation und Sitzungsverwaltung entlastet die serverseitige Infrastruktur und erlaubt eine Skalierung ohne verteilte Caches auf der Ebene des Anwendungsservers Dezentralisierung Offlineszenarien Die Realisierung von Offlineszenarien ist zwar auf Basis des HTML5 Application Cache auch fur klassische Webanwendungen moglich jedoch erfolgt in einem solchen Szenario lediglich eine clientseitige Speicherung von serverseitig generierten HTML Dokumenten Geschaftslogiken konnen nicht ausgefuhrt werden Offlineszenarien auf Basis des SPA Paradigmas erlauben im Gegensatz dazu die Ausfuhrung von clientseitiger Fachkonzeptlogik in einem Offlineszenario Begrenzt wird dies im Endeffekt lediglich durch die Verfugbarkeit der benotigten Daten Zur clientseitigen Datenbereitstellung erlaubt das SPA Paradigma die Implementierung von Datenbereitstellungsstrategien wie Caching Replikation oder Hoarding Hierdurch kann ein produktiver Einsatz einer Webanwendung in einem Offlineszenario angeboten werden Kleine Projekte Ein uberschaubares Fachkonzept wie bei Unternehmensauftritten oder Product Landing Pages bietet sich fur eine Implementierung nach dem SPA Paradigma an Aufgrund des kleinen Fachkonzepts halt sich die Menge der Geschaftslogik welche clientseitig umgesetzt wird in Grenzen Das Hauptaugenmerk bei der Implementierung befindet sich auf der Prasentationsschicht Das SPA Paradigma kann in diesem Einsatzgebiet eine hohe Interaktivitat bieten und erlaubt die Umsetzung einer ansprechenden Bedienoberflache Hohe Interaktivitat Fur Anwendungen wie Computerspiele bietet der Webbrowser gerade im 2D Bereich eine plattformunabhangige Infrastruktur an In diesem Anwendungsbereich sind eine hohe Interaktivitat und kurze Latenzzeiten erforderlich Die Implementierung solcher Anwendungen wurde in der Vergangenheit bereits als Plug in unterstutzte SPA mit Adobe Flash oder Microsoft Silverlight durchgefuhrt Mit dem Einzug von HTML5 Canvas WebSockets und WebGL stellen RIA JS SPAs eine Alternative dar Die auf JavaScript basierende Umsetzung bietet den Vorteil dass ausschliesslich Webstandards eingesetzt werden welche ebenfalls auf mobilen Endgeraten zur Verfugung stehen Auf diese Weise konnen mit einer Implementierung mehrere Zielsysteme adressiert werden Hybride Web Apps Das SPA Paradigma eignet sich fur die Einbettung in native mobile Anwendungen Bei sogenannten hybriden Anwendungen wird ein Webclient uber ein Framework wie Apache Cordova eingebettet Die Art und Weise der Implementierung einer solchen Web App erfolgt clientnah und meist nach dem SPA Paradigma Mogliche JavaScript Frameworks fur SPAs BearbeitenFolgende MV Frameworks MV als Platzhalter fur MVC MVVM MVP konnen zur Implementierung eines SPA Webclients verwendet werden AngularJS Angular Aurelia io Backbone js DurandalJS Ember js Knockout js OpenUI5 React Svelte Vue jsTechniken BearbeitenEs gibt verschiedene Ansatze um eine Kommunikation zwischen SPAs und Servern zu ermoglichen Die unten aufgefuhrten Beispiele unterscheiden sich vor allem hinsichtlich ihrer Richtung des Datenflussen und in ihrem Verbindungsaufbau HTTP Requests Ajax Techniken WebSockets Server sent events SSE Siehe auch BearbeitenREST Rich Internet ApplicationWeblinks BearbeitenSingle page applications Website mit Definitionen und SPA Beispielen englisch Migrating Multi page Web Applications to Single page Ajax Interfaces Delft University of Technology englisch The Single Page Interface Manifesto englisch Single Page Websites Auflistung von SPA Sites englisch Single Page Webanwendungen Prasentation mit Referenzarchitektur zum Thema SPA deutsch Einzelnachweise Bearbeiten Experiences on a Design Approach for Interactive Web Applications Abgerufen am 28 Marz 2021 Abgerufen von https de wikipedia org w index php title Single Page Webanwendung amp oldid 234853172
