Was ist eine Single-Page-Application?
Single-Page-Application (kurz SPA) oder auch Einzelseiten-Webanwendungen sind Anwendungen, die aus einem einzigen HTML-Dokument bestehen. Diese Art von Webseite hat den Vorteil, dass Inhalte dynamisch nachgeladen werden. Gegenteilig hierzu steht das ursprüngliche Modell des Webs, dem Web 1.0. Hier war es üblich auf vielen unterschiedlichen Seiten mittels HTML-Links zu operieren, welche von einem Webserver ausgeliefert werden. Das bedeutet, dass bei jedem Klick auf einer Website eine neue Seite geladen wird. Jede Interaktion ist mit einer Anfrage an den Webserver verbunden. Beim Navigieren ersetzt die neue die alte Seite im Browser. Dieser Vorgang nennt sich page reload und ist sehr zeit- und rechenaufwendig. Bei Single-Page-Applications handelt es sich jedoch um eine webbasierte Anwendung, die rein technisch gesehen auf nur einer Seite stattfindet. Alle Inhalte werden über AJAX (Asynchronous JavaScript and XML) nachgeladen. Dies sorgt dafür, dass Benutzerinteraktionen im Hintergrund ausgeführt werden. In Single-Page-Applications sind bedingt durch Frameworks wie AngularJS sämtliche page reloads nicht mehr notwendig.
Die Schnittstelle bei Single-Page-Application wird zwischen Frontend und Backend definiert. Alle relevanten Daten einer Webanwendung werden im Backend gespeichert und verarbeitet. Hierzu werden weiterhin klassische Programmiersprachen wie PHP, Node.js oder Java verwendet. Ebenfalls kommen klassische Datenbanken wie beispielsweise MySQL oder MongoDB zum Einsatz. Das Frontend arbeitet hingegen mittels HTML und CSS. Zusätzlich wird auf JavaScript und damit gekoppelte JavaScript-Frameworks gesetzt. Nachdem das Frontend durch JavaScript eine Anfrage an das Backend sendet, werden Daten im .json-Format zurück gesendet. Diese werden mittels JavaScript an die entsprechende Stelle gesetzt. Bei der Erstellung von Single-Page-Apps kann des Weiteren auf einen Pool an verschiedenen Frameworks, wie beispielsweise Ember.js oder AngularJS zurück gegriffen werden.
Vorteile von Single-Page-Applications
Single-Page-Applications haben viele Vorteile. Ein Vorteil ist die verbesserte User Experience. SPA benötigen keine lokal installierten Plug-Ins. Somit kann von überall auf die Applikation zugegriffen werden. Das erhöht auch die Reichweite der Anwendung. Ein weiterer Vorteil ist die Geschwindigkeit. Dank der verteilten Auslastung werden die Inhalte einer Website nicht alle auf einen Schlag geladen, sondern tauchen je nach Scroll-Fortschritt nach und nach auf. Wie vorhin beschrieben, wird die Website auch durch den geringeren Kommunikationsaufwand mit dem Webserver schneller. Das reaktive Design stellt die Anwendung in allen gängigen Browsern korrekt dar und erhöht somit ebenso die User Experience durch eine höhere Reichweite. Die Anforderung ist hierbei, dass die Anwendung auf unterschiedlich großen Bildschirmen exakt gleich abgebildet wird.
Nachteile von Single-Page-Applications
Gravierende Nachteile haben Single-Page-Applications nicht. Eins, was ihnen vorauseilt, ist der Ruf von JavaScript. Ursprünglich war JavaScript dazu gedacht, einen Umweg um bestimmte Probleme von Browserinkompatibilitäten und Darstellungfehlern zu schaffen. Die Code-Qualität spielte zu der Zeit selten eine Rolle. Durch die Professionalisierung der Web-Entwicklung und einer einheitlichen Arbeitsweise unter den Entwicklern mit JavaScript wurde eine höhere Code-Qualität erreicht. Dies geschah vor allem durch Test Driven Development, Continuous Integration und Clean Code. Der Ruf, den Single-Page-Applications haben, entspricht somit schon lange nicht mehr der Realität.
Des Weiteren gelten Single-Page-Applications als ungeeignet aus Sicht der Suchmaschinenoptimierung (SEO). Da die Inhalte über JavaScript nachgeladen werden, fällt es Suchmaschinen schwerer Single-Page-Applications zu durchsuchen. Grund dafür ist, dass die Crawler eindeutige URLs benötigen, um Inhalte zu durchleuchten. Auf Client-Seite besteht eine Single-Page-Application, wie wir zuvor im Beitrag gelernt haben, aus einer einzelnen HTML-Seite, die dynamisch über AJAX Kommandos mit dem Server interagiert. Rein technisch bedeutet dies, dass dynamisch a-Tags für die Website verändert und erstellt werden. Alle a-Tags müssen fähig sein, auf eine pretty URL zuzugreifen, die einen href-Tag besitzt. Nur dann kann der Google-Bot diese crawlen.
Google brachte schließlich die Lösung für das SEO-Dilemma von Single-Page-Applications. Durch das JavaScript Framework AngularJS können SPA von Google gecrawlt werden. Somit werden Single-Page-Applications für Suchmaschinen wie Google deutlich besser durchsuchbar. Dies ist lediglich ein Anfang, aber noch keine Allzwecklösung, um die Suchmaschinenoptimierung für Single-Page-Applications zu optimieren. Aber Google ist “dran”. Worauf ihr bei der Erstellung eurer Single-Page-Application achten solltet, um dessen Inhalte über Suchmaschinen crawlen lassen zu können, erfahrt ihr im Blog-Artikel “SEO und SPA (Single-Page-Applications) – unvereinbar oder unzertrenntlich?”.
Single-Page-Applications für Unternehmen
Die Digitalwelt entwickelt sich rasant. Das Nutzerverhalten der Kunden ist unvergleichbar zu dem Verhalten von vor 10 Jahren. Durch mobile Technologien und das Surfen unterwegs ergeben sich viele neue Möglichkeiten für Unternehmen zur Außendarstellung und zum Erzielen von Abschlüssen. So lohnt sich eine Umsattelung der alten Strukturen – sofern diese in einem Unternehmen noch bestehen – hin auf neue anpassungsfähige Strategien. Single-Page-Applications, welche für mobile Endgeräte optimiert sind, können hierbei ein erster Schritt zum digitalen Erfolg sein. Ganz oben stehen hierbei Anpassungsfähigkeit, Benutzerfreundlichkeit und die flexible Verwendung auf den unterschiedlichsten Geräten. Der programmatische Entwicklungs- und Betriebsaufwand von SPAs sind gering. Das kommt natürlich auf die Anforderungen an die Anwendung und dessen Komplexität an. Eine Single-Page-Anwendung kann auf von einer Datenbank bis zur Benutzeroberfläche mithilfe einer einzigen Technologie umgesetzt werden. Sie finden Anwendung auf Desktop-PC, Tablets und Smartphones und haben somit eine sehr hohe Reichweite. Ebenso ist diese digitale Vermarktungsstrategie hochgradig skalierbar für wachsende bzw. schwankende Nutzungsintensitäten. Dies bedeutet wiederum eine breitgefächerte Möglichkeit, Kunden zu binden oder sie im ersten Schritt zu akquirieren. Somit wird die Wirtschaftlichkeit des Unternehmens verbessert.
