Was sind Single Page Applications (SPAs)? Die wichtigsten Vorteile. die Entwicklung und Ausblicke

Was ist eine Single Page Application?

Will ein Browser eine Webseite darstellen, sendet er eine HTTP-Anfrage an den Webserver, der eine Datei mit HTML-Code zurücksendet (klassisches Client-Server-Modell). Das HTML enthält neben Seitenstrukturen und Text zahlreiche Links zu weiteren Ressourcen – CSS, JavaScript, Bilder, Video etc. – die der Browser nutzt, um die Webseite aufzubauen. 

Herkömmliche Webanwendungen bestehen nun in der Regel aus mehreren miteinander verlinkten Dokumenten. Bei Benutzerinteraktionen fordert der Browser eine neue HTML-Datei an (wenn nicht gerade auf eine Sprungmarke oder ein Akkordeon geklickt wird) und der gerade beschriebene Ablauf beginnt von Neuem. Auch wenn sich die angezeigten Informationen inzwischen geändert haben, muss der Browser die Seite erneut vom Server laden, um die neue Version anzeigen zu können.

Eine Single Page Application („Einzelseiten-Webanwendung“) besteht dagegen aus einem einzigen Dokument mit HTML-, JavaScript- und CSS-Code, das nur einmal vom Server geladen und niemals als Ganzes aktualisiert wird. Das HTML enthält dabei im Wesentlichen Platzhalter-Elemente. JavaScript wird genutzt, um die Benutzeroberfläche darzustellen, Anwendungslogik auszuführen und mit Servern zu kommunizieren. Der Datenaustausch erfolgt im Hintergrund; wenn Benutzer auf der Seite scrollen oder klicken, lädt der Browser die benötigten Inhalte oder auch aktualisierte Informationen vom Server und baut sie dynamisch in die Seite ein.

Wie funktionieren Single Page Applications?

Das wichtigste Prinzip, das der Funktionsweise von SPAs zugrunde liegt, heißt Ajax (das steht für „Asynchronous JavaScript and XML“). Jesse Garrett prägte den Begriff 2005 in einem Beitrag namens „Ajax: A New Approach to Web Applications“. Dabei reagiert eine clientseitige „Ajax-Engine“ auf Benutzerinteraktionen und wickelt alles clientseitig ab, was keine Kommunikation mit dem Server benötigt, insbesondere auch die Anzeige von Inhalten und die Navigation zwischen Seitenelementen. Garrett behauptet nicht, das Prinzip erfunden zu haben; Gmail oder Google Maps sind für ihn bereits Beispiele für Ajax-Anwendungen. Beides sind sogar Single-Page-Anwendungen, ebenso wie viele andere populäre Apps wie Netflix, Airbnb oder Jira.

Das „XML“ im vollen Namen steht übrigens nicht für das Format, sondern für „XMLHttpRequest“, eine Browser-Programmierschnittstelle (API), die es JavaScript erlaubt, per HTTP mit Webservern (Webservices) zu kommunizieren. Aber auch die Nutzung anderer Methoden (etwa die neuere Fetch-API) oder Formate (etwa JSON) ist möglich.

Die Kommunikation mit Webservice-APIs per Ajax-Techniken ist sinnvoll, wenn die SPA immer mal wieder aktuelle Daten nachladen möchte. Alternativ kann aber auch das TCP-basierte WebSocket-Protokoll zur Anwendung kommen, das eine dauerhafte bidirektionale Verbindung zwischen Client und Server ermöglicht. Damit kann auch der Server selbst Nachrichten an den Client schicken

Auch HTML selbst leistet inzwischen seinen Beitrag zu clientseitigen Berechnungen: Das 2014 eingeführte HTML5 kann u. a. auf lokalen Speicher zugreifen, dynamisch (mit Hilfe von JavaScript) Grafiken erzeugen und Multimedia-Dateien abspielen.

10% Rabatt auf alle DF Produkte

Jetzt 2-Jahre Laufzeit wählen!

Welche Vorteile bieten SPAs?

Ein wichtiges Ziel bei der Entwicklung der in Single-Page-Anwendungen genutzten Techniken war die Verbesserung der Benutzererfahrung: Wenn nicht mehr bei jeder Interaktion ganze Seiten angefordert, auf dem Server gerendert und vom Browser geladen werden müssen, wird die Anwendung schneller, kann flüssiger bedient werden und fühlt sich im Optimalfall wie eine lokal installierte Anwendung an. Dank geringerer Latenzen können so Anwendungen mit hoher Interaktivität umgesetzt werden – bis hin zu Games.

Gleichzeitig erhält die Anwendung mehr Unabhängigkeit vom Server, weil alles, was die Anwendung grundsätzlich für ihre Funktion benötigt, nach dem ersten Laden der Seite vorhanden ist und für die Offline-Nutzung zwischengespeichert werden kann. Die Anwendung kann also auch genutzt werden, wenn der Server nicht verfügbar ist, und sie kann andererseits ihre Daten auch von verschiedenen Servern bzw. Webservices holen. Das erhöht die Flexibilität und ermöglicht sogar verteilte Anwendungen, bei denen verschiedene Client-Apps und Services kombiniert werden.

Ein weiterer Vorteil von Single Page Applications ist eine reduzierte Serverlast, weil die Clients wesentlich mehr Arbeit übernehmen. Der Server muss nicht bei jedem Klick eine Datenbankabfrage starten, um dann eine neue Seite zusammenzubauen. Nach dem initialen Laden der SPA werden nur noch die Daten übertragen, die tatsächlich benötigt werden. Der Server braucht auch keine Cookies mehr, um über mehrere Seitenaufrufe hinweg Benutzer-Sessions zu verwalten.

Gibt es auch Nachteile?

Ja, durchaus – nicht für jedes Projekt ist eine Single-Page-Anwendung die richtige Wahl, weil sie Entwickler vor spezielle Herausforderungen stellt. Zunächst ist zu beachten, dass hier die anfänglichen Ladezeiten länger ausfallen können als bei anderen Apps, weil die komplette Anwendung zunächst in den Browser geladen werden muss. Man kann zwar ähnlich wie bei anderen Webseiten Tricks wie vorausschauendes (Prerendering) oder verzögertes Laden (Lazy Loading) anwenden, aber trotzdem müssen zahlreiche Ressourcen vorab geladen werden.

SPAs erschweren auch die Suchmaschinenoptimierung (SEO), weil nicht alle Crawler JavaScript ausführen können, um Inhalte zu indizieren (und die es können, unterstützen nicht alle APIs und Funktionen). Ähnliche Probleme haben auch Tools zur Analyse der Webseitennutzung sowie Sicherheitsanwendungen, die Webseiten auf Schwachstellen scannen sollen. Das ist schlecht, denn die massive Ausführung von clientseitigem JavaScript macht Sicherheitslücken wahrscheinlicher. Vertraute Funktionen wie Browserverlauf mit „Vorwärts“ und „Zurück“ sind nicht ohne spezielle Vorkehrungen möglich, und auch das Caching erfordert besonderes Augenmerk (sowohl im Browser als auch etwa per Content Delivery Network).

Für welche Use-Cases eignen sich Single-Page-Anwendungen besonders?

Generell lässt sich sagen, dass dynamische Anwendungen mit häufig aktualisierten Daten vom SPA-Paradigma profitieren, während es für größtenteils statische Webseiten weniger geeignet scheint. Single Page Applications sind eine gute Wahl für kleine Projekte mit wenig komplexer Anwendungslogik und für Offlineszenarien. Sie eignen sich aber auch für Webanwendungen mit hohen Zugriffszahlen und solche, die hohe Anforderungen an Interaktivität stellen, wie beispielsweise bestimmte SaaS- (Software as a Service) oder Social-Media-Anwendungen. Zudem sind SPAs bei der Entwicklung von Community-Seiten und Intranets einen Blick wert – auch weil SEO hier keine große Rolle spielt.

Und nicht zuletzt können aus Single-Page-Anwendungen auch relativ einfach mobile (native) Apps oder Progressive Web Apps gebaut werden; der vorhandene Code kann dafür zu großen Teilen wiederverwendet werden.

SPAs effizient entwickeln

Sowohl für Frontend als auch Backend von Single-Page Applications können Entwickler auf hilfreiche Web Application Frameworks und Bibliotheken zurückgreifen, die einsatzfertige Rahmenstrukturen und Funktionen mitbringen und Entwicklern beim Code-Schreiben Arbeit abnehmen. (Sie bieten zum Teil auch Lösungen für einige der oben beschriebenen Probleme, zum Beispiel fürs Caching.) Fürs Backend eignen sich beispielsweise ein Framework für Node.js (JavaScript) wie Express, ein PHP-Framework wie Laravel oder auch Ruby on Rails.

Auch für die Frontend-Entwicklung gibt es viel Auswahl. Populär und für Single Page Applications geeignet sind beispielsweise die Open-Source-Frameworks bzw. Bibliotheken Angular, Vue, React, Backbone und Ember, die wir Ihnen zum Schluss noch kurz vorstellen möchten. 

Angular

Das Frontend-Webframework Angular, eine Weiterentwicklung von AngularJS, ist für Single-Page-Anwendungen und mobile Anwendungen prädestiniert. Es wird von einer großen Community unter Führung von Google gepflegt und bietet nicht nur ein Core-Framework und viele Bibliotheken mit nützlichen Funktionen, sondern auch diverse Entwicklerwerkzeuge, allen voran das Kommandozeilen-Tool Angular CLI.

Vue.js

Auch Vue.js ist als Frontend-Webframework für SPAs sehr populär, denn sein Schwerpunkt liegt auf der Präsentation, also der „View“-Komponente in „Model-View-Controller“ (MVC)-Architekturen („Vue“ wird wie „View“ ausgesprochen). Es ist schlanker und performanter als Angular und eignet sich vor allem für kleinere Projekte. Auch Vue bringt diverse Erweiterungen für Aufgaben wie Routing, Zustandsmanagement etc. mit und hat mit Vue CLI ebenfalls ein Kommandozeilenwerkzeug an Bord. Der Vue-Schöpfer Evan You hat sich bei der Entwicklung an Angular, aber vor allem auch React orientiert, mit dem es viele Ähnlichkeiten hat. (Mehr Infos finden Sie hier und hier.)

React

React ist eine schlanke, aber leistungsfähige JS-Bibliothek, die 2013 von Facebook für die Entwicklung von dynamischen Benutzeroberflächen (UI, User Interface) entwickelt wurde. Sie ist damit älter als Angular und Vue. React verwendet (wie Vue) ein „virtuelles DOM“ (Document Object Model: strukturiertes Modell als Schnittstelle zur Manipulation von Webseiten), das die Elemente der Benutzeroberfläche einer Anwendung als vereinfachte und leichter zu verändernde Kopie des DOMs repräsentiert. Entwickler können die Elemente nahtlos kombinieren und ihr UI mit dem echten DOM synchronisieren.

Ember.js

Noch älter ist das JavaScript-Framework Ember.js, das bereits 2011 (zunächst unter dem Namen SproutCore 2.0) veröffentlicht wurde. Es ist vergleichbar leistungsfähig, aber bewusst weniger flexibel als Angular, weil es dem CoC-Prinzip („Convention over Configuration“, Konvention vor Konfiguration) folgt, strikte Architekturvorgaben macht und mehr externe Abhängigkeiten mitbringt. Dafür ermöglicht Ember.js dank zahlreicher Werkzeuge „out of the box“ (inkl. des vielseitigen Tools Ember CLI und einer in die Apps integrierten Entwicklungsumgebung) schnelle Erfolge auch bei komplexeren, skalierbaren Apps – nachdem man die Lernkurve gemeistert hat.

Backbone.js

Das älteste zum Schluss: Backbone.js, zuerst 2010 erschienen, ist ein sehr schlankes JavaScript-Framework, das ein „Rückgrat“ nach minimaler MVC-Architektur für Single-Page-Anwendungen bereitstellen will, ohne Entwicklern viel Struktur aufzuzwingen. Es hat kaum externe Abhängigkeiten und lässt Entwickler die Wahl, welche Bibliotheken und Werkzeuge sie verwenden wollen. Es ist daher vor allem für erfahrene Entwickler geeignet, die von seiner Flexibilität, leicht zu pflegendem Code und effizienter Anbindung an REST-APIs profitieren.

Titelmotiv: Photo by Christopher Gower on Unsplash