Alles Wissenswerte über Single Page Applications

by Jan Schulte, Head of Group Consulting & Senior Solution Architect at Magnolia International
Jul 5, 2019 | 4 MIN

Klickte ein User bisher auf einen Website-Link, wurde normalerweise eine Anfrage vom Browser für eine neue Seite an den Server gesendet. Nach Erhalt der Anfrage sendete der Server dann die neue Seite an den Browser des Users. Dieser Prozess ist langsam und umständlich und bedeutet für die Server beliebter Websites eine starke Auslastung, da die Daten für eine ganze Website bei jedem Mausklick gesendet werden.

Mit Single Page Applications (SPAs) verändert sich jedoch alles. Viele der aktuellen hochfrequentierten Websites und Social-Media-Plattformen nutzen zunehmend SPAs, wodurch alle Informationen auf einer einzigen Seite geladen werden können anstatt als separate Seiten.

Was sind Single Page Applications?

Eine Single Page Application (SPA) ist eine webbasierte App, die vorab im Browser geladen wird. Dank der SPA muss die vollständige Website nicht mehr ständig neu geladen werden. Stattdessen wird nur der für die entsprechende Interaktion des Users relevante Content neu geladen. Daraus ergibt sich ein dynamischere User Experience beim Wechsel zwischen unterschiedlichen Navigationsbereichen.

Viele der meistbesuchten Websites werden als SPAs ausgeführt, darunter einige der Google-Tools wie Gmail, Google Maps und Google Drive. Auch beliebte Social-Media-Plattformen, wie Facebook und Twitter, sind als SPAs aufgebaut. Da die Funktionen von SPAs innerhalb des Browsers verarbeitet werden, wird diese Art von Anwendung immer mit Frontend Frameworks wie React, Angular, Vue, Ember.js, Meteor.js oder Knockout.js erstellt.

Vorteile von Single Page Applications

Viele Ersteller beliebter Websites werden bestätigen, dass SPAs sowohl Usern als auch Developern zahlreiche Vorteile bieten. Dazu gehören u. a.:

Schnellere User Experience: Da User beim Klicken auf einen Navigationslink nicht mehr auf die Antwort des Servers warten müssen, erhalten sie die gewünschten Informationen wesentlich schneller. Die gesamte für die Website notwendige clientseitige Struktur ist bereits vorhanden. Wenn die SPA geladen ist, muss der Server nur noch die erforderlichen Daten senden, um die Lücken zu füllen.

Weniger Serverressourcen: Die SPA wird im Browser einmalig geladen. Wenn ein User eine Anfrage sendet, gibt der Server die angeforderten Daten in einem Format wie JSON zurück. Somit muss nicht jedes Mal die gesamte HTML-Struktur der Seite neu geladen werden. Dadurch schonen SPAs die Bandbreite und Serverressourcen. Dies ist einer der Gründe dafür, warum Websites, die täglich millionenfach aufgerufen werden, SPAs verwenden, um die Effizienz und Zuverlässigkeit sicherzustellen.

Einfachere Fehlerbehebung: Anstatt Unmengen von serverseitigem Code zu durchsuchen, müssen Developer lediglich den im Browser gerenderten JavaScript-Code prüfen. Viele der JavaScript-Frameworks, mit denen SPAs ausgeführt werden, verfügen über eigene Tools zur Fehlerbehebung, die für den Chrome-Browser verfügbar sind. Diese Tools geben Dvelopern Aufschluss darüber, wie die Seitenelemente angezeigt werden, wie die Seite Daten vom Server abfragt und wie die Seite Daten zwischenspeichert.

Einfachere Umstellung auf andere Apps: Bei der Umstellung von einer SPA auf eine mobile App können Dveloper einfach einen Großteil des vorhandenen Codes verwenden. Da der gesamte Content auf einmal bereitgestellt wird, erleichtern SPAs insbesondere das Scrollen, wodurch sie sich besonders für mobile Apps eignen. SPAs werden zudem auch häufig zur Erstellung fortschrittlicher Web-Apps verwendet, die Anwendern bestimmte Funktionen bieten, wie Push-Benachrichtigungen, Offline-Zugriff und lokales Caching.

Grenzen von Single Page Applications

Wenngleich sowohl Dveloper als auch User von den zahlreichen Vorteilen von SPAs gegenüber herkömmlichen mehrseitigen Anwendungen profitieren, haben SPAs auch Nachteile. Zu diesen Nachteilen gehören u. a.:

Langsamere anfängliche Ladezeiten: Da bei SPAs die gesamte Anwendung auf einmal geladen wird, kann das Laden anfangs wesentlich länger dauern als bei einer vergleichbaren Website, bei der jeweils nur eine Seite geladen wird. Die Ladezeit hängt davon ab, wie komplex der JavaScript-Code ist, der zum Ausführen der SPA verwendet wird. Da dieser anfängliche Download länger dauern kann, werden sowohl Serverressourcen als auch die Geduld der User unter Umständen auf eine harte Probe gestellt.

Probleme mit SEO: Aufgrund der Struktur von SPAs stammt jede "Seite" der Website von einer einzigen URL. Aufgrund dieser Struktur können SPAs die Vorteile der Methoden zur Suchmaschinenoptimierung (SEO), wie Landingpages, Inbound-Links und Website-Autorität, nur eingeschränkt nutzen. Obwohl Google und andere Suchmaschinen ihre Indexierungsroutinen an SPAs angepasst haben, kann es für Entwickler von SPAs dennoch schwierig sein, auf der Suchmaschinen-Ergebnisseite (SERP) ein höheres Ranking zu erzielen.

Sicherheitsprobleme: Da die Ausführung von SPAs auf clientseitigem JavaScript beruht, sind diese Anwendungen anfällig für Angriffe, einschließlich Cross-Site Scripting (XSS). Bei diesen Angriffen können Hacker schädliche Skripts in webbasierte Anwendungen einschleusen. Ohne entsprechende Vorkehrungen kann es auch vorkommen, dass die sensiblen Daten eines Websitebetreibers für User zugänglich sind.

Wann sind Single Page Applications sinnvoll (und wann nicht)?

SPAs eignen sich hervorragend für Websites, auf denen eine schnelle und nahtlose User Experience bereitgestellt werden sollen. Soziale Netzwerke, die auf Websites wie Facebook und Twitter betrieben werden, sind gute Beispiele dafür, wie SPAs User anziehen können. Developer können SPAs auch als Backbone für mobile Apps nutzen, um Usern eine einheitliche Experience auf unterschiedlichen Devices bieten zu können. Dank plattformübergreifender Frameworks, wie React Native, können SPAs schnell und einfach auf mobile Apps übertragen werden.

Wenn in Ihrer App hauptsächlich statischer Content angezeigt werden soll, wie ein Blog oder Standard-Websites, ist eine Single Page Application möglicherweise nicht die kosteneffizienteste Lösung. Möchten Sie aber dynamische Experiences bereitstellen, so können Sie mit SPAs Ihre Server entlasten, weil ein Großteil des Workloads auf den Client-Browser verschoben wird.

Auswahl des richtigen CMS für Single Page Applications

Wenn Sie davon überzeugt sind, dass eine SPA für Ihr Unternehmen die richtige Wahl ist, müssen Sie auch ein geeignetes CMS wählen, damit die SPA funktionieren kann. Idealerweise sollte das CMS nach dem API-first-Prinzip entwickelt sein und sich ohne komplexe Backend-Entwicklung nahtlos in Frontend Frameworks integrieren lassen. Zudem sollte das CMS über Hybrid Features verfügen, damit Marketer weiterhin Tools zur Content-Erstellung verwenden können.

Magnolia ist ein CMS, das sich nahtlos in AngularJS integrieren lässt, einem führenden Frontend Framework, das zur Entwicklung von SPAs verwendet wird und Developern wie auch Content-Autoren bei der Erstellung inhaltsreicher Websites unterstützt. Es bietet API-first sowie eine Vielzahl an Features zur Personalisierung, die ideal für eine Single Page App und die Bereitstellung dynamischer digitaler Experiences geeignet sind.

Und wir setzen sogar noch einen drauf: Wir arbeiten derzeit daran, vollständige Funktionen für die visuelle Bearbeitung und die Vorschau für Single Page Apps anzubieten. Gleichzeitig sollen Entwickler in der Lage sein, ihre SPAs direkt zu integrieren, ohne Magnolia-spezifische Templates schreiben zu müssen. Stay tuned!

Portrait von einem Mann der lacht

About the Author

Durch seine Arbeit an dem Schnittpunkt zwischen Betrieb und Technologie hilft Jan den Kunden von Magnolia, ihre Initiativen zu Content Management und Digital Experience zu meistern, indem er Lösungen entwirft, die ihren individuellen Herausforderungen und Möglichkeiten entsprechen.

See all posts by Jan Schulte