Bei einer Singlepage Applikation (SPA) handelt es sich um eine Webapplikation, die aus einer einzigen Seite besteht. Der Inhalt wird jeweils, je nachdem, was gerade angezeigt werden soll, dynamisch geladen.

Im Gegensatz dazu bestanden klassische Homepage aus mehreren Seiten (Multi Page Application – MPA), die untereinander verlinkt waren. Nun ja, in Zeiten von Cascading Style Sheets ist das Design nicht mehr so mühsam, selbst bei klassischen Homepages – früher jedoch musste man natürlich in jeder Html Seite neben dem eigentlichen Inhalt auch das Design der Seite einbauen. Hatte man dann eine Änderung, durfte man alle Seiten anpassen.

Ich erinnere mich noch an ein Projekt, welches ich vor langer Zeit in PHP gemacht hatte. Dabei hatte ich nur eine einzige Datei namens index.hmtl und habe den anzuzeigenden Inhalt jeweils über einen oder mehrere Parameter mitgegeben. Dies hatte den Vorteil, dass das Design und auch alle anderen querschnittlichen Aufgaben (Cross-Cutting Concerns) wie das Überprüfen des Benutzerlogins oder das Anzeigen des Headers und Footers in einer Datei gemacht wurde.

Ein weiterer Grund für mich war, dass man eine einzige grosse Seite hatte, die man von oben nach unten durchscrollen konnte, im Gegensatz zu einer Seite bestehend aus vielen Teilen (Frames).

Bei Multi Page Applikationen war es dann auch der Fall, dass jede Änderung zu einem Request zum Server geführt hat. Dies konnte zwar mit AJAX (Asynchronous Java And XML) ein wenig optimiert werden, so dass nur noch der Teil der Seite geladen wurde, welcher auch tatsächlich geändert hat. Beim Anzeigen einer komplett neuen Seite wird aber immer der gesamte Inhalt geladen.

Wie funktioniert denn nun eine Singlepage Applikation?

Eine Singlepage Applikation ist quasi die Fortführung der Multi Page Applikation + AJAX. Der Inhalt wird auf dem Server zusammengesucht, während die gesamte Benutzeroberfläche mit Javascript zusammengesetzt wird. Das Laden der Seiten wird so zwar schneller, allerdings bedeutet dies natürlich auch mehr Code, der auf der Clientseite ausgeführt wird.

Was ist der Vorteil einer Singlepage Applikation?

Ein grosser Vorteil ist, dass der Seitenkontext nicht immer neu geladen werden muss. Bei Applikationen mit mehreren Seiten wird jeweils die gesamte clientseitige Präsentationslogik beendet und auf der nächsten Seite neu geladen – Dies entfällt bei Singlepage.

Ein weiterer Vorteil ist es, dass das Backend einfach auf eine andere Plattform wie etwa Mobile übertragen werden kann.

Was ist der Nachteil von Singlepage Applikationen?

Ein Nachteil ist, dass jede Navigation des Benutzers in einem Request an den Server resultiert. Klickt der Benutzer zum Beispiel den „Zurück“ Knopf, erwartet er grundsätzlich ein sofortiges Ergebnis, da die Seite von vorhin ja schonmal geladen wurde und sich eigentlich nichts geändert hat. Bei einer Singlepage Applikation macht er jedoch einen neuen Request zum Server, um sich den Inhalt zu laden.

Der Grund dafür ist, wie gesagt, dass bei einer Singlepage Applikation das eigentliche Browsen mittels Javascript gemacht wird. Was ist nun, wenn der Benutzer Javascript deaktiviert hat? Dann wird er die Seite nicht verwenden können. Dieser Punkt bedeutet auch immer ein Zusammenspiel zwischen dem Backend und einer Javascript Komponente.

Wie kann eine Singlepage heutzutage gemacht werden?

Eine Singlepage Webapplikation kann heute etwa mit AngularJS und dem Spring Framework gemacht werden. Dabei übernimmt das Framework Aufgaben wie das Authentifizieren des Benutzers oder die Gewährleistung der Sicherheit.