Single Page Applications: die Lösung für alle Probleme?

Single Page Applications (SPA) oder Single Page Interfaces (SPI) sind seit einiger Zeit der neue Hit im Internet Buzzword Bingo. Aber was ist eine Single Page Application? Genau genommen handelt es sich um eine webbasierte Anwendung, die technisch gesehen auf einer einzigen Seite stattfindet. Statt wie klassisch bei jedem Klick auf einer Webseite (WEB1.0) eine neue Seite zu laden, begnügt sich die Single Page Application mit einer einzigen Webseite und lädt alle Inhalte die der Nutzer anfordert über Ajax nach. Man müsste heute natürlich von Ajaj reden, denn Ajax steht für asynchronus Java Script and XML und die nachgeladenen Elemente sind heutzutage meistens im json- Format (Java Script Object Notation). Aber das hört sich natürlich nicht so cool an, außerdem ist es kleinkrämerisch und diese Debatte überlassen wir lieber den NERDs da draußen.

Wie funktionieren Single Page Apps?

Bei Single Page Apps definieren wir also eine klare Schnittstelle zwischen Frontend und Backend. Im Backend werden die Daten gespeichert und verarbeitet. Dies geschieht weiterhin mit klassischen Programmiersprachen wie PHP, node.js oder JAVA und klassischen Datenbanken wie MySQL oder MongoDB. Das Frontend beruht neben HTML und CSS natürlich sehr stark auf Java Script und entsprechenden Java Script Frameworks. Mittels Java Script stellt das Frontend Anfragen an das Backend und erhält Daten im json Format zurück. Diese setzt Java Script an der entsprechenden Stelle ein. Da es keinen weiteren Seitenaufruf gibt, heißt das ganze trefflich Single Page Application.

Um Single Page Apps zu realisieren, gibt es verschiedene Frameworks wie Ember.js oder Angular.js, die schon viele nützliche Strukturen und Funktionen mitbringen. Da es aber immer sehr sinnvoll ist, das Konzept hinter einem Framework zu verstehen, möchte ich gerne auf den Vortrag von Ronald Marske verweisen, in dem anhand einer TODO Anwendung (dem Hello World der modernen Web-Entwicklung) eine Single Page Application von Grund auf entwickelt wird.

Wofür sind Single Page Applications überhaupt gut?

Sie eignen sich hervorragend für Applikationen, da sie sehr schnell sind. Es werden nur minimale Datenmengen über das Web transferiert. Die HTML Struktur, css, JavaScript und Bilder werden ja nur einmal ausgeliefert. Das heißt, das bei Aufrufen auf den Aufbau einer neuen Seite verzichtet wird und nur die Daten, die sich wirklich ändern übertragen und mittels Java Script in die Seite eingesetzt werden. D.h. gerade mobile Anwendungen profitieren überdurchschnittlich stark vom Konzept der Single Page Applications.

Die Kehrseite dieses Vorteiles soll jedoch nicht unerwähnt bleiben. Da die Inhalte über JavaScript nachgeladen werden, ist es schwierig für Suchmaschinen Single Page Applications zu durchsuchen. Sie eignen sich also aus Sicht der Suchmaschinenoptimierung (SEO) (noch) nicht zur Darstellung von klassischen informationsbasierten Webseiten, bei denen der Betreiber sich Besucherströme von google, bing und co erhofft. Bei der Realisierung von Web-Projekten ist es daher immer wichtig sich im Klaren darüber zu sein, welche Ziele man erreichen möchte, bevor man sich für eine Technologie entscheidet.

About Olaf Stichtenoth

Olaf Stichtenoth ist Gründer und CEO der secu-ring GmbH. Er ist Experte für die erfolgreiche Realisierung digitaler Lösungen. Sein Hauptinteresse liegt in der Verbindung von Digitalisierung und Optimierung von Geschäftsprozessen. Dabei verfolgt er grundlegend den Gedanken der Reduktion und der Schnelligkeit. Dazu sagt er selbst: "Beschränkung und Erprobung wird auf Grund der besseren Kostenbilanz der Planung, Erstellung und dem Ausrollen auf lange Sicht den Rang ablaufen."

4 responses on “Single Page Applications: die Lösung für alle Probleme?

  1. Johanna Gaßmann

    Lieber Olaf,

    vielen Dank für deinen Beitrag. Auch wir beschäftigen uns seit geraumer Zeit mit dem Phänomen der Singlepage. Wir haben vor kurzer Zeit unsere erste Single Page Application mit dem Framework AngularJS rausgebracht. Für eine Modelagentur aus Düsseldorf. Der Clou hierbei war es aus verschiedenen Prozessen auf insgesamt drei Systemen ein einzelnes, funktionierendes System zu erstellen, dass die Prozesse übersichtlich und sicher verwaltet. Dabei waren vor allem die unterschiedlichen Administrationsreche und Zugänge zu beachten. Dank AngularJS und der schlanken Entwicklung konnte trotz großer Datenmengen und Funktionen die Performance gut erhalten bleiben. Wir haben vor allem AngularJS und Bootstrap sowie eine Magento REST-Api dafür genutzt und sind sehr zufrieden mit dem Ergebnis.
    Hier gibt es noch ein paar weitere Informationen: http://www.flyacts.com/business-webanwendung-multifunktionsplattform-model-agentur

    Die Seite ist unter: http://www.bruederchenundschwesterchen.com/ zu erreichen.

    AngularJS hat mal wieder bewiesen, dass es richtig ist darauf zu setzen.

    Liebe Grüße,
    Johanna

  2. Johanna Gaßmann

    Lieber Olaf,

    vielen Dank für deinen Beitrag. Auch wir beschäftigen uns seit geraumer Zeit mit dem Phänomen der Singlepage. Wir haben vor kurzer Zeit unsere erste Single Page Application mit dem Framework AngularJS rausgebracht. Für eine Modelagentur aus Düsseldorf. Der Clou hierbei war es aus verschiedenen Prozessen auf insgesamt drei Systemen ein einzelnes, funktionierendes System zu erstellen, dass die Prozesse übersichtlich und sicher verwaltet. Dabei waren vor allem die unterschiedlichen Administrationsreche und Zugänge zu beachten. Dank AngularJS und der schlanken Entwicklung konnte trotz großer Datenmengen und Funktionen die Performance gut erhalten bleiben. Wir haben vor allem AngularJS und Bootstrap sowie eine Magento REST-Api dafür genutzt und sind sehr zufrieden mit dem Ergebnis.
    Hier gibt es noch ein paar weitere Informationen:

    Die Seite ist unter: zu erreichen.

    AngularJS hat mal wieder bewiesen, dass es richtig ist darauf zu setzen.

    Liebe Grüße,
    Johanna

  3. Olaf Stichtenoth Post author

    Der Ansatz ist auf jeden Fall interessant. Wenn man ihn dahingehend ausbauen könnte, dass man entweder die single page app mit entsprechendem look and feel, oder eine barrierefreie nur Text Version für Suchmaschinen und Personen, für welche die Single Page App sonst nicht nutzen können, ausliefert, würde man gleich eine weitere Schwachstelle der Single Page Apps beseitigen.

  4. Ronald Marske

    Ich habe mich nach dem Vortrag noch mit Hans-Christian Wilhelm unterhalten. Er hatte die Idee eingebracht, dass man für Suchmaschinen und/oder für Nutzer ohne JavaScript, eine normale Webseite ausliefern könnte. Für Suchmaschinen ist das recht einfach, da sie über HTTP-Request-Header identifizierbar sind. Mann kann dann auch auf die gesamte Logik verzichten, denn für Suchmaschinen ist lediglich der Inhalt interessant. JavaScript wird von den Bots nicht ausgeführt.

    Der Nachteil daran ist jedoch, dass man zumindest die Anzeige Logik sowie das Routen zusätzlich in der Sprache des Backendes nach programmieren muss. Der Aufwand sollte sich jedoch in Grenzen halten, denn die Api (Daten) sowie die View Templates sind schon vorhanden und können genauso genutzt werden. Hier zahlt sich der Einsatz von mustache (http://mustache.github.io/) wieder aus. Mustache ist für sehr viele Sprachen verfügbar.

    Bei Nutzern ohne JavaScript ist das etwas schwieriger. Ich kenne bisher keinen Weg, auf der Ebene von PHP, zu ermitteln ob der Client JavaScript unterstützt bzw. aktiviert hat oder nicht. Aber sind wir doch ehrlich, wer hat JavaScript heutzutage schon noch deaktiviert. Das halbe Web würde dann nicht mehr funktionieren.

    Mit dieser Methode kann man auch eine Single-Page-App für Suchmaschinen Aufbereiten und den Anwender das Look and Feel einer Applikation bieten.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.