Was ist eine Single Page Application?

Veröffentlicht am
891 Wörter - Lesezeit: ca. 5 Minuten

Eine Single Page Applikation ist eine Website, die den Inhalt einer traditionellen Website mit einer reibungslosen Benutzererfahrung einer nativen mobilen Anwendung verknüpft.

Was ist eine Single Page Application? | Titelbild

Durch die Maßnahme des SPA-Ansatzes soll das Benutzererlebnis deutlich verbessert werden. Dieser Vorteil bringt aber auch einige Nachteile mit die man abwägen sollte.

Multi Page Applications bzw. mehrseitige Websites

Um zu verstehen, was eine Single Page Application ist, muss man erstmal verstehen, was eine Multi Page Applikation ist. Eine Multi-Page Applikation teilt die Unterseiten der Website in einzelne Dateien auf, die beim Abruf an den Server gesendet werden. Das führt dann zu folgendem Verhalten:

  1. Beim Abrufen der Website wird die abgerufene Website vom Server angefordert und ein kompletter Satz von Dateien wird an den Browser gesendet. Dieser rendert dann das entsprechende Ergebnis.
  2. Klickt man nun auf einen Link der Website, wird die aktuelle Seite verworfen und eine neue Anfrage an den Server wird gestellt. Ein neuer kompletter Satz von Dateien wird gesendet, um im Browser gerendert zu werden.

Singple Page Application - Wie die traditionelle Website funktioniert

Es sind quasi die traditionellen Websites, die Du da draußen überall findest. Du kannst Dir bestimmt jetzt genau vorstellen, wie das aussehen mag, weil Du dieses Verhalten oft im Web beobachten konntest: Beim Navigieren auf der Website wird jedes Mal beim Öffnen eines Links die komplette Seite neu eingeblendet. Teilweise wirst Du sogar von einem kompletten weißen Bildschirm begrüßt, bevor die Seite überhaupt geladen wird.

Die Nutzererfahrung kann in Bezug auf die Interaktivität leiden.

Single Page Application (SPA)

Das Gegenteil zu den Multi Page Applications sind Single Page Applications so aufgestellt, dass nur Teilbereiche einer Website reingeladen werden und nicht die gesamte Seite neu geladen werden muss.

Wikipedia definiert eine Single-Page-Applikation wie folgt:

"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."

Um eine SPA im Web zu realisieren, nehmen wir ein einfaches HTML-Dokument, welches per Javascript umstrukturiert wird. So können wir Teilbereiche herausnehmen und neue Teilbereiche reinnehmen. Die Datei bleibt konstant, während die Logik des clientseitigen JavaScripts nur das ändert, was zum Aktualisieren der Ansicht erforderlich ist. Kombiniert man dies mit flüssigen Animationen, so steigern wir das Nutzererlebnis, weil sich die Webseite mehr wie eine native Applikation anfühlt, statt wie ein einfaches HTML-Dokument.

Singple Page Application - Veranschaulichung des Nachladens von Teilbereichen

Anfragen an den Server sind schneller, da nicht die ganze Seite neu angefragt wird. So kann zum Beispiel die Navigation immer stehen bleiben und muss nicht ständig neu geladen werden. Durch diesen Ansatz möchten SPAs die Geschwindigkeit, Benutzerinteraktion, sowie die Browser-Rendering-Zeiten reduzieren.

SPA-Frameworks

Das asynchrone raus und reinladen von Inhalten kann in normalen JavaScript realisiert werden. Man merkt allerdings schnell, dass man viel Zusatzcode schreiben muss, um die einfachsten Dinge in einer SPA zu realisieren. Zusätzlich leidet auch schnell die Performance, Kompatibilität und die Code-Verständlichkeit.

Zum Glück gibt es SPA-Frameworks. Hinter diesen Frameworks sitzen intelligente Programmierer, die die Thematik einer SPA in einfachen Bibliotheken und Frameworks abstrahieren und sich um die Performance, Kompatibilität, nützliche Funktionen und vielem mehr kümmern. So können sich Webdesigner auf das eigentliche Endprodukt konzentrieren und müssen nicht mit der unterliegenden Technologie befassen.

Einer dieser Bibliotheken ist React. React ist (stand heute) einer der beliebtesten JavaScript-Bibliotheken zum Erstellen von SPAs. React ist eine Open-Source-Software und wurde von Jordan Walke, einem Facebook Entwickler, erfunden. Sie konzentriert sich auf die Erstellung von Komponenten, die sich basierend auf dem aktuellen Zustand einer Anwendung und den Benutzerdaten unterschiedlich rendern können.

Ein weiteres Framework ist Vue.js. Vue.js ist ein Framework, das Vorlagen in einer einzigen HTML-Datei verwendet, während die Anwendungslogik steuert, was gerendert wird. Dieser Ansatz wird manchmal als traditioneller angesehen und ist daher leichter zu erlernen.

Andere Bibliotheken und Frameworks lauten AngularJS, Ember.js, ExtJS, Knockout.js, Svelte und Meteor.js. Es gibt eine Vielzahl an Frameworks, da viele einen etwas anderen Ansatz fahren. Du erkennst hier wie unterschiedlich man das Thema SPAs angehen kann.

SPA Vor- und Nachteile

Wie am Anfang angedeutet bringen die Vorteile der verbesserten Nutzererfahrung auch einige Nachteile mit. Folgend findest Du eine Gegenüberstellung von den Vor- und Nachteilen die eine SPAs mit sich bringt.

Vorteile

  • SPAs sind schnell
  • Fühlen sich an wie Desktop- oder Mobilanwendungen
  • Schnelle Reaktionen auf Benutzerinteraktionen
  • Der Weg von einer SPAs zu einer nativen App ist deutlich kürzer

Nachteile

  • SPAs erfordern beim Start mehr Dateien und die Ladezeit der Anwendung kann länger sein
  • Suchmaschinen wie Google haben Probleme beim Erfassen der Inhalte, da er Content nachgeladen wird und nicht beim Aufruf der Seite im HTML zur Verfügung steht. (Für dieses Problem gibt es zum Glück aber auch Hybrid-Systeme wie Gatsby.js und Next.js die auf React basieren und die Inhalte als HTML zur Verfügung stellen, aber dennoch Funktionen einer SPA mitbringen.)
  • SPAs funktionieren im Browser möglicherweise nicht wie erwartet. Beispielsweise können sich die Zurück-Schaltfläche oder der Browserverlauf bei der Verwendung einer einseitigen Anwendung anders verhalten.

Wo sind SPAs sinnvoll?

Eine einfache Unternehmenswebsite, die statische Inhalte abbildet und kaum Veränderung und Benutzerinteraktion mitbringt, ist nicht für eine SPA geeignet. Die Mehrkosten der JavaScript-Funktionen sind höher, als der Nutzen.

Webseiten, die hochkomplex sind und extrem viel Benutzerinteraktion mitbringen, also Seiten wie Facebook, Instagram, GMail, Google Maps oder auch YouTube, profitieren sehr wohl von dem SPA-Ansatz. Die Mehrkosten der Java-Script-Funktionen nimmt man gerne in Kauf, da die Anwendung darauf basiert, dass der Besucher stark mit der Website interagieren soll.

Zusätzlich profitieren die großen Plattformen von einem SPA-Ansatz, da die Serverkosten letzten Endes doch reduziert werden können. Der Besucher hält sich im Regelfall sehr lange auf diesen Seiten auf und das neu Laden jeder einzelnen Seite würde deutlich mehr Anfragen an den Server senden.

Möchtest Du noch mehr erfahren?

Lautenschlager Marketing & Entwicklung ist eine Werbeagentur mit Spezialisierung auf Web-Technologie und online Marketing. Lies gerne in unseren anderen Artikeln weiter.

Zu weiteren Artikeln