Erstellt: 5. Januar 2016

Single-page-Webanwendung einfach erklärt

Begriffe

Marco Kuoni

Programmierung, Beratung

Ein Begriff den man in letzter Zeit vermehrt hört und der aktuell sehr „gehypt“ wird, doch was versteht man eigentlich unter Single-page-Webanwendung?

«Als Single-page-Webapplikation (SPA) oder Einzelseiten-Webanwendung wird eine Webanwendung bezeichnet, die aus einem einzigen HTML-Dokument besteht und deren Inhalte dynamisch nachgeladen werden.» – Wikipedia


Wie unterscheidet sich die Single-page von der klassischen Webanwendung?

Der Informationsgehalt einer Website wird zentral auf einem Computer gespeichert, dem sogenannten Server. Damit wir diese Informationen auf unseren Endgeräten sehen können, müssen diese zuerst über das Internet übertragen werden, zu den sogenannten Clients (Computer, Mobiltelefone oder Tablets).


«Klassische Website»


Klassische Website

Bis vor kurzer Zeit war man sich auf den Websites gewohnt, dass beim Klick auf eine Schaltfläche die gesamte Website kurz verschwindet. Bei diesem Impuls überträgt die Seite die Information an den Server, dass eine neue Seite aufgerufen werden soll, dabei wird der gesamte Websiteinhalt neu geladen, folglich ist diese für einen kurzen Moment unsichtbar.

Somit wird der gesamte Inhalt bei jedem Klick ausgewechselt, auch wenn gewisse Informationen eigentlich schon vorhanden gewesen wären. Die Website verschwindet somit laufend und baut sich wieder erneut auf.

Beispiel:  www.apple.com
(Stand Januar 2015)


Single-page-Webanwendung


Single-page-Webanwendung

Bei einer Single-page-Webanwendung funktioniert dies grundsätzlich nach einem anderen Prinzip, besucht man diese, wird nur der aktuell benötigte Inhalt beim Öffnen der Website einmalig geladen. Klickt man nun auf eine Schaltfläche, werden nur diese Informationen übertragen und angepasst, welche ändern. Die Website verhält sich ähnlich wie ein lokales Programm oder App auf dem Computer oder Smartphone (z. B.: Word, Excel, Foto-App) und ändert nur einzelne Bereiche der gesamten Informationsdarstellung.

Beispiel: Google Maps
(Stand Januar 2015)


Einsatzgebiete

  • Bei grossen Besucherzahlen
    Weil durch eine bessere Ressourcenverteilung eine Ladeoptimierung erzielt werden kann und sich damit z. B. auch Hardware wie Server einsparen lassen.
    Beispiele: Facebook, Google Maps
  • Offlineszenarien
    Weil Single-page-Anwendungen nur die notwendigsten Informationen übertragen, lässt es sich mit den bereits geladenen Daten auch ohne Internetverbindung arbeiten.
  • Kleine Projekte
     Wenn sich ein Projekt mehrheitlich auf die einfache Darstellung von Informationen beschränkt, kann eine Single-page-Webanwendung mit geringem Aufwand schnell umgesetzt werden.
  • Hohe Interaktivität
    Durch das häppchenweise Laden können Verzögerungen mit Single-page-Anwendungen reduziert werden, deshalb eignen sie sich gut für Websites oder Applikationen, welche eine hohe Interaktivität des Benutzers fordern.
  • Web-Applikationen
    Single-page-Webanwendungen ermöglichen Applikationen, die ähnlich wie klassische Desktop oder Smartphone Anwendungen daherkommen, jedoch vom Endgerät unabhängig genutzt werden können.


Nachteile

Bei komplexen und umfangreichen Websiten ist die klassische Struktur aufgrund der Flexibilität Single-page-Anwendungen vorzuziehen.

Ebenfalls gilt es zu erwähnen, dass Single-pages, aufgrund ihrer dynamisch geladenen Informationen, schwierig zu durchsuchen sind und deshalb im Bezug auf die Suchmaschinenoptimierung (noch) deutlich im Nachteil gegenüber klassischen Websites sind.

Bei Fragen zu Single-page Webanwendung oder allfälligen Umsetzungswünschen können Sie sich ungeniert mit uns in Verbindung setzen (marco@lemonbrain.ch).