Als erstes vorab, du befindest dich gerade auf einer Single Page Application. Das sollte dich nicht verwundern, heutzutage sind viele Seiten sogenannte SPAs.

Was ist eine Single Page Application

Eine Single Page Application (SPA) ist aktuell hoch im Trend in dem Web- und Mobil App Entwicklung und steht für eine Art und Weise wie eine Internetapplikation aufgebaut ist und wie sie funktioniert.

Eine entscheidende Eigenschaft einer SPA liegt bei dem Lademechanismus der Seite.

Während «normale» Webseiten bei jedem Klick die komplette Seite neu laden muss, lädt eine SPA die komplette Seite nur einmalig beim initialen Aufruf. Ist die Seite erstmal geladen hat sie alle relevanten Daten um von einer Unterseite zur nächsten zu gelangen. Das hat wiederum den Vorteil das keine Daten vom Server nachgeladen werden müssen (Genauer gesagt kein HTML, CSS oder JS) und das wiederum hat zur Folge das die Seite nie neugeladen werden muss. Für den Besucher der Seite ermöglicht das ein smootheren Übergang zwischen den Einzelseiten. Auch die Ladegeschwindigkeit ist ein beträchtlicher Mehrwert.

Long story short, Single Page Applications verbessern das Kundenerlebnis durch sofortiges bereitstellen der seitenrelevanten Daten. Applikationen wie Gmail, Google Drive, Facebook oder auch GitHub verwenden diesen Tech-Stack um den Benutzer eine bestmögliche Erfahrung zu ermöglichen.

Der Entwickler schreibt die Anwendung in der Programmiersprache TypeScript bzw. JavaScript und nutzt in der Regel ein Framework wie Angular, React oder Vue.js. Angular ist und wird von Google entwickelt und ist eines der grössten und stabilsten Open-Source Web Application Frameworks. React wiederum wird von Facebook, neu Meta, bereitgestellt und wird Stand Januar 2022 am populärsten.

Im Gegenzug zu den Multiple Page Applications (MPAs) wird die Seite erst auf dem Client dem Endgerät, also in deinem Browser, vollständig gerendert. Das braucht zwar etwas mehr Rechenleistung auf deinem Gerät, ist aber bei den heutigen Geräten überhaupt kein Problem mehr. Also keine Angst das dein Gerät langsamer läuft oder das es mehr Akku verbraucht. Die Browser sind nämlich für SPAs zugeschnitten und optimiert.

Einsatzszenarien

Dank der Dezentralisierung auf die Geräte der Besucher eignet sich eine SPA für unendlich viele Besucher, schauen wir uns nur das Beispiel von Facebook an, so haben wir gleich ein solides Szenario in der realen Welt.

Dank kurzer Latenzzeit eignet sich sie sich auch für kleinere Spiele und Animationen. Auch mit dem Einzug von HTML5, Canvas und WebGL lassen sich komplexe Animationen ganz leicht integrieren, was wiederum die Benutzerexperience erheblich steigern kann.

Dank Cache und Storage des Browsers kann die SPA auch für eine Offline Anwendung gebraucht werden. Es kommt noch auf den Anwendungsfall an, aber prinzipiell lässt sich eine SPA komplett offline benutzen.

Vorteile von SPAs

Einige Vorteile haben wir bereits zu Beginn angesprochen, hier nun noch einige mehr im Detail.

1. Einmaliges Laden von Dateien

Beim ersten Aufruf der Webseite lädt dein Browser alle relevanten Daten vom Server. Sind diese vollständig geladen kann der Browser anfangen diese zu rendern und diese dir auf dem Monitor anzuzeigen. Sind die Daten erstmals geladen, kannst du beliebig auf der Seite navigieren ohne zusätzliche Daten (HTML, CSS, JS) vom Server nachzuladen. Die Interaktionen der Seite können geschmeidig Ablaufen und visuell Dargestellt werden, was wiederum eine bessere Kundenexperience ermöglicht.

2. Keine zusätzlichen Serveraufrufe

Wie wir nun wissen benötigt es keine zusätzliche Serverabfragen zwischen den Navigatoren der Seite. Das spart nicht nur Traffic, sondern kann auch genau bei schlechtem Internet sehr hilfreiche sein. Desto weniger Daten geladen werden müssen desto schneller funktioniert die Seite.

3. Schnelles Front-End

Da die SPAs bei richtiger Anwendung fast etwas zu schnell sind wir häufig noch eine kurze Animation zwischen den Seiten (Transition) eingebaut. Diese macht das hin und her wechseln angenehmer für das Auge.

4. Verbesserte Benutzererfahrungen

Bei einer klassischen Multiple Page Application wird bei jedem Klick die komplette Seite vom Server heruntergeladen und wird von oben nach unten geladen. Eventuell kennst du das noch vom Anfang des Internets. Die besucht eine Internetseite und es wird in Streifen von oben nach unten geladen. Ist zwar dank schnellerem Internet nicht mehr so schlimm aber das Prinzip ist noch immer dasselbe.

Bei der SPA wiederum dauert der initiale Aufruf der Seite einen kurzen Augenblick länger, wir sprechen von maximal 1-2 Sekunden, dafür ist danach jede Navigation der Seite Blitz schnell. Neuer Content der Seite kann punktuell ersetzt bzw. nachgeladen werden ohne die komplette Seite zu laden.

Nachteile von SPAs

Natürlich gibt es auch hier einen Hacken, wo nicht? Aber keine Angst die Vorteile überwiegen den Nachteilen.

1. JavaScript muss aktiviert sein

Dieser Punkt hatte früher sicher mehr Relevanz, hat aber noch immer seine Berechtigung. In deinem Browser muss zwingend JavaScript eingeschaltet sein, sonnst funktioniert gar nichts, die SPA eine reine JavaScript Applikation. Mit JavaScript kann im Browser Code ausgeführt werden, was potenziell eine Gefahrenquelle darstellt. Einigen Schätzungen nach haben noch ungefähr 1-3 % des gesamten Internetverkehrs kein JavaScript aktiviert, vernachlässigbar wenig. 

2. Für ein sauberes SEO benötigt es etwas mehr Logik

SEO und SPA sind nicht gerade enge Freunde. Die Suchmaschinen indexieren jede Seite und lesen unteranderem sogenannte «meta» Felder aus. Dort stehen Informationen wie Titel und Beschreibung der aktuellen Seite.

Jetzt wird aber die Seite bei einer SPA nur einmal beim initialen Aufruf gerendert, das heisst die «meta» Felder bleiben bei Navigation auf der Seite immer gleich. Somit kann die Suchmaschine die Seite nicht vollständig Indexieren. Zum Glück gibt es hier bereits etablierte Lösungen. Mit etwas zusätzlicher Logik können die «meta» Felder dynamisch angepasst werden, sodass Suchmaschinen wie gewohnt ihre Arbeit aufnehmen könne und die Seite indexieren können. Übrigens das gleiche Problem besteht beim Teilen einer URL in einem Social-Media-Kanal wie z.B. Facebook oder Whatsapp.

3. Anfälliger für Memory-Leaks

Fast ausschliesslich alle SPA Frameworks setzen auf eine Reaktive Erweiterungsbibliothek für JavaScript (RxJS), welche gewisse Problemstellungen der Implementierung abnimmt und vereinfacht. Die Gefahr besteht nun bei dieser Library, dass sie falsch angewendet wird und sogenannte Memory-Leaks verursacht werden. Da die SPA im Browser deines Gerätes läuft und während der Dauer deines Besuches nicht neugeladen wird, kann es sein, dass immer mehr Memory benötigt wird, da gewisse Programmteile nicht sauber deaktiviert bzw. «unsubscribed» wurden und im Hintergrund als toter Code im Memory nur herumliegt. Auch für das gibt es Tricks und Tools um mögliche Memory-Leaks zu vermeiden oder zu ermitteln.

4. Cross-Site Scripting XXS

Das betrifft zwar nicht nur SPAs, kommt aber hier besonders zu tragen da JavaScript sicherlich aktiviert ist. Es gibt verschiedene Arten von Angriffsmöglichkeiten wie z.B. Reflected XSS, Stored XSS, DOM-based XSS, Dangling markup injection oder Self-XSS. Stellen wir uns vor die Seite hat ein Blog mit einer Kommentarspalte. Ein potenzieller Angreifer könnte nun ein Kommentar auf die Seite schreiben welcher bösartiges HTML enthält. Der nächste welcher die Seite aufruft wird ganz automatisch den Kommentar laden und zusätzlich den bösartigen Code, welcher für den Besucher auf den ersten Blick nicht ersichtlich ist. Um solche Fälle zu verhindern ist es zwingend den Kommentar auf bösartigen Inhalt zu durchsuchen. Oder einfacher, nur das reine HTM darzustellen und jegliches JavaScript im Kommentar zu deaktivieren. Alle grossen SPA Frameworks wie Angular oder React haben das bereits von Haus aus erkannt und Mechanismen integriert um per Default solche Angriffe zu verhindern. Von dem her ist Cross-Site Scripting nicht das oberste Problem, es ist aber sicher gut stets ein Auge darauf zu halten.

Da war doch noch was

SPAs haben noch viel mehr Eigenschaften, alle aufzuzählen wäre hier gar nicht möglich. Aber trotzdem hier noch vier interessant und relevant Punkte.  

1. Offline gehört der Vergangenheit an

Noch eine weitere gewonnene Eigenschaft. Da keine Daten nachladen werden müssen funktioniert die Applikation auch wenn der Server nicht erreichbar ist. Kürzere Internet Unterbrüche können überbrückt werden und je nachdem wie die SPA aufgebaut ist kann sie auch komplett Offline funktionieren. In der Voraussetzung sie wurde initial mit Internet heruntergeladen. 

2. PWA

Progressiv Web Application oder umgangssprachlich PWA ist eine SPA welche on Top noch weitere Funktionalitäten aufweist. Sie installieren sich buchstäblich in dein Browser Cache und bleiben dort solange du deinen Cache wieder löscht. Das heisst wenn du einmal eine PWA Seite besucht hast und dein Internet ausschaltest, kannst du den Browser schliessen, ja sogar dein Laptop oder Smartphone Neustart und die Seite noch aufrufen. Die eigentliche Seite wird direkt angezeigt, du kannst auch durch sie hindurch navigieren und zwischengespeichert Daten anschauen. Es gibt noch viele weiter Funktionalitäten und es kommen stets mehr dazu, ein Beispiel, es ist möglich vom Server aus Notifikationen auf die Geräte zu versenden, dafür braucht du die PWA nicht mal offen haben, du brauchst sie nur dafür zu Berechtigen.

3. Installation auf Mobilgerät

Eine PWA lässt sich auf dem Smartphone auch auf den Homescreen installieren, sodass du ein Icon der Seite siehst. Das gibt dir ein Gefühl von einer nativen Applikation auf deinem Gerät.

4. Playstore Integration

Es gibt sogar die Möglichkeit eine PWA in den App- bzw. Play-Store mit aufzunehmen, sodass Leute deine Seite via Store finden und installieren können.

Fazit

Es gibt noch so viel mehr über SPAs zu erzählen, aber das würde jetzt hier den Rahmen sprengen. Es gibt unzählige gute ausführliche Artikel und Videos im Internet, schau dir doch bei Interesse diese an.

Single Page Applications haben seine Daseinsberechtigung im Internet bewiesen. Wie mit jeder Technologie gibt es einige entscheidende Vorteile und einige Nachteile die gelöst werden müssen. Je nach Anwendungsfall ist zu entscheiden ob eine SPA die richtige Wahl ist.

Wir sind entschlossen und glauben, dass wir ein modernes Setup anbieten können um alle Vorteile ohne Nachteile anbieten zu können. Lass dich von uns beraten und erstelle mit uns deine persönliche Web Applikation welche dein Business auf das nächste Level katapultiert. 

Solltest du spezifische Fragen haben, zögere nicht uns zu kontaktieren, wir können mit dir zusammen deine Fragen klären und dir weiterhelfen.