Single Page Applications – Definition, Funktionsweise und Nutzen

Interaktive Websites sind heute keine Seltenheit mehr, sondern gehören zum täglichen Umgang mit dem Internet einfach dazu. Während in der Vergangenheit häufig sogenannte Multi Page Applications genutzt wurden, die aus vielen verschiedenen einzelnen Webseiten bzw. HTML-Dokumenten bestehen, setzen sich Single Page Applications aus nur einer einzigen Webseite zusammen.

Eine Single-Page-Webanwendung ist eine sehr moderne Möglichkeit, dynamische Websites zu erzeugen. Das Erstellen von statischen Websites ist heutzutage mithilfe von Static-Side-Generatoren kein Problem mehr. Doch nach wie vor sind für eine solche Website mehrere HTML-Dokumente nötig.

Dynamische Webanwendungen bieten eine Reihe von Interaktionsmöglichkeiten. Bei Single Page Appliations wird der Content der Webapplikation aber lediglich ein einziges Mal geladen, denn eine Single-Page-Webanwendung besteht (wie der Name schon sagt) nur aus einer einzigen Webseite. Das bedeutet, dass es nur ein einziges HTML-Dokument gibt, welches bei Interaktionen des Nutzers durch integrierten JavaScript-Code ständig manipuliert wird, um beispielsweise das Design der Website zu verändern. Auf diese Weise muss die Website nicht ständig neu geladen werden, da sie direkt im Browser arbeitet.

Bei Single Page Applications stellt der Server nur noch die initiale Webseite, bestehend aus einem HTML-Dokument, zur Verfügung. In diesem Dokument befindet sich neben dem grundlegenden Aufbau der Website und dem Design, das mit CSS festgelegt wird, auch ein sogenanntes DOM-Element. Dieses ist besonders wichtig für die Funktionsweise von Single Page Applications: Es handelt sich um das Document Object Model, in dem der gesamte Code steht, der die Funktionalität der Website sicherstellt. Dieser ist in der Programmiersprache JavaScript verfasst.

Bei einer Nutzerinteraktion werden im Hintergrund und für den Nutzer unsichtbar Daten im JSON- oder XML-Format geladen. Diese werden dann automatisch in das DOM der geladenen Webseite eingefügt. Auf diese Weise wird die gesamte Präsentationslogik der Webanwendung direkt auf Seiten des Clients, nämlich im Browser, ausgeführt. Der Server liefert lediglich Daten, nicht aber ganze Webseiten.

Ein Beispiel für eine populäre Single Page Application ist das soziale Netzwerk Twitter. Wenn der Nutzer die Seite im Browser über die URL aufruft, schickt der Browser als Client eine Request an den Server. Die Website wird geladen und für den Nutzer bereitgestellt. Interagiert dieser nun mit Twitter – beispielsweise, um ein Profil aufzurufen –, wird lediglich der entsprechende JavaScript-Code ausgeführt und der Umweg über den Server entfällt. So wird der Content der Website nur schrittweise nachgeladen. Daher ist die Serverlast bei Single-Page-Webanwendungen eher gering.

Eine Single-Page-Webanwendung eignet sich vor allem dann, wenn die Serverlast reduziert werden soll. Dies kann nicht nur bei großen Websites wie Facebook oder Twitter, sondern bereits bei kleineren Onlineshops sinnvoll sein. Immer, wenn Nutzer häufig mit der Website interagieren sollen, sind kurze Laufzeiten besonders wichtig. Daher bietet es sich an, beispielsweise Computerspiele, die im Webbrowser ausgeführt werden, als Single Page Application zu programmieren. Webanwendungen, die auf mobilen Endgeräten als App verfügbar sein sollen, sollten im besten Fall als Single Page Application gestaltet werden. So ist es möglich, dasselbe Backend für Mobile App und Website zu nutzen, was den Programmieraufwand senkt.

Der wohl offensichtlichste Vorteil von Single Page Applications ist die geringe Reaktionszeit. Da nur noch Daten und nicht mehr gesamte Webseiten vom Server angefordert müssen, laden dynamische Single Page Applications wesentlich schneller. Eng damit verbunden ist die Tatsache, dass Single-Page-Webanwendungen im Vergleich zu Multi Page Applications weniger Ressourcen benötigen. Auch die Fehlerbehebung ist bei Single Page Applications ein Pluspunkt: Entwickler können sich beim Debugging auf den JavaScript-Code fokussieren und müssen sich nicht mit serverseitigem Code auseinandersetzen. Zusätzlich verfügen die meisten JavaScript-Frameworks über Tools zur Fehlerbehebung. Auch der Umstieg auf Mobile Apps ist wie bereits erwähnt angenehm einfach.

Doch auch Single Page Applications können an ihre Grenzen stoßen. Insbesondere im Bereich der Suchmaschinenoptimierung erzielen Webanwendungen, die lediglich auf einer einzelnen Webseite beruhen, schlechtere Ergebnisse. Dies liegt daran, dass es für die Suchmaschinen erheblich schwieriger ist, JavaScript-Code zu durchsuchen. Die Erstellung von Single Page Applications lohnt darüber hinaus nur dann, wenn auch wirklich dynamischer Content dargestellt werden soll. Single-Page-Webanwendungen sind im Vergleich zu statischen Websites in ihrer Erstellung nämlich wesentlich kostspieliger.

Es gibt verschiedene Frameworks, die verwendet werden können, um eine Single-Page-Webanwendung zu implementieren. Sie sind sozusagen das Pendant zu verschiedenen Static-Side-Generatoren in der Entwicklung statischer Websites. JavaScript-Frameworks erleichtern den Entwicklern die Programmierung dynamischer Single Page Applications, indem vorprogrammierte Inhalte bereitgestellt werden. Auch das Debugging wird durch Nutzung von Frameworks erleichtert. Die populärsten Frameworks, die für die Webentwicklung mit JavaScript eingesetzt werden, sind React, Angular und Vue.

React

React ist ein JavaScript-Webframework, das ursprünglich von Facebook ins Leben gerufen wurde. Seit 2013 ist das Framework als Open Source verfügbar. React bietet eine JavaScript-Bibliothek, mit der es möglich ist, sowohl interaktive Benutzeroberflächen als auch wiederverwendbare Software-Komponenten zu erstellen. Da es sich bei React nicht um ein komplettes Frontend-Framework handelt, ist es allerdings nicht möglich, allein mit diesem Tool vollwertige und funktionsfähige Single Page Applications zu erstellen.

Angular

Angular ist ein JavaScript-Framework von Google. Das 2016 erschienene Open-Source-Framework setzt nicht nur auf die Entwicklung von Single Page Applications, sondern auch auf Cross-Plattform-Entwicklung. Nicht zuletzt deshalb ist das Framework plattformunabhängig gestaltet. Angular unterstützt neben JavaScript auch die von Microsoft entwickelte Programmiersprache TypeScript, sodass auch fortgeschrittene Programmierkonzepte verwirklicht werden können. Aufgrund seines Umfangs und seiner Komplexität eignet sich das Framework vor allem für Großunternehmen.

Vue

Vue hat es sich zum Ziel gesetzt, die Vorteile der beiden Frameworks Angular und React zu vereinen. Das 2016 in der zweiten Version herausgebrachte clientseitige Open-Source-Framework gilt nicht zuletzt aufgrund seiner Kompatibilität mit anderen Frameworks für Single Page Applications als sehr einstiegsfreundlich. Vorausgesetzt werden lediglich Kenntnisse von HTML und JavaScript. Außerdem weist das Framework mit weniger als 100 KB benötigtem Speicherplatz eine sehr geringe Größe auf. Vue kann zudem mit verschiedenen Bibliotheken kombiniert werden, wodurch Entwicklern viel Flexibilität geboten wird.

Die Nutzung von Versionenkontrollsystemen wie GitHub bietet eine Reihe von Vorteilen. Insbesondere die Arbeit im Entwicklerteam sowie das Managen verschiedener Codeversionen werden enorm erleichtert. Der Code einer Single-Page-Webanwendung lässt sich leicht in einem GitHub-Repository bereitstellen. Nachdem Sie Ihren Code in GitHub eingepflegt haben, ist es ein Leichtes, mit einem Server realitätsgetreue Livetests bereits während des Entwicklungsprozesses auszuführen.

In nur wenigen Schritten können Sie Ihr Webprojekt bei Deploy Now von IONOS bereitstellen.

1. Stellen Sie zunächst eine Verbindung Ihres GitHub-Accounts mit IONOS Deploy Now her.
2. Beginnen Sie im Anschluss ein neues Projekt.
3. Importieren Sie das GitHub-Repository, in dem sich Ihre Single Page Application befindet.
4. Jetzt können Sie Veränderungen an Ihrer Website live unter der Vorschau-URL von IONOS Deploy Now im Blick behalten.