Single-Page Applications

Single-Page Applications – plattformunabhängig, leistungsstark, mobil

Der Begriff Single-Page Application (kurz SPA) beschreibt eine Technologie, die es ermöglicht, komplexe Bedienoberflächen mit hoher Interaktivität plattformübergreifend im Browser auszuführen. Dadurch wird dem Nutzer eine bessere User Experience gegenüber herkömmlichen Webapplikationen geboten.

SPAs werden plattformübergreifend entwickelt und können sowohl auf Desktop-PCs wie auf mobilen Endgeräten eingesetzt werden. Zudem sind sie skalierbar für wachsende bzw. schwankende Nutzungsintensitäten.

Der kleine aber feine Unterschied

Auf klassischen Webanwendungen operiert man auf vielen unterschiedlichen Seiten mittels HTML-Links, welche von einem Webserver ausgeliefert werden. Das bedeutet, dass bei jedem Klick auf einer Website eine neue Seite geladen wird. Jede Aktion ist mit einer Anfrage an den Webserver verbunden. Der Client liefert dabei ggf. Benutzereingaben an den Server. Dieser wiederum führt die erforderlichen Berechnungen oder Funktionen aus, bereitet die Darstellung innerhalb der GUI auf und liefert diese in Form einer neuen HTML-Seite an den Client. Beim Navigieren wird die alte Seite im Browser dann durch die neue ersetzt. Dieser Vorgang verursacht Wartezeiten für den Anwender und Last für den Server.

Bei SPAs handelt es sich hingegen um webbasierte Anwendungen, die grundlegend anders aufgebaut sind und im Kern aus nur einer HTML-Seite bestehen. Einfache Berechnungen können direkt auf dem Client ausgeführt werden, zudem wird die Darstellungslogik in der Oberfläche vom Client selbst gesteuert. Alle erforderlichen Informationen werden über http-basierte Schnittstellen vom Server nachgeladen. Durch dieses Vorgehen können Benutzereingaben zum Beispiel direkt nach der Eingabe clientseitig überprüft und ggf. verarbeitet werden. Hierfür ist keine Interaktion mit dem Server erforderlich. So lassen sich Oberflächen entwickeln, die deutlich reaktiver sind und ein modernes Bedienkonzept aufweisen. Die Tatsache, dass im Wesentlichen Daten, aber nicht komplette HTML-Dokumente mit dem Server ausgetauscht werden, senkt die erforderliche Bandbreite, was mobilen Anwendungsszenarien entsprechend entgegenkommt. In SPAs sind (bedingt durch Frameworks wie Angular) wiederholte page loads nicht mehr nötig.

So funktioniert es

Grundsätzlich besteht eine SPA aus einem einzigen HTML-Dokument und mehreren JavaScripts. Beim Besuch einer Website sendet das Frontend durch JavaScript eine Anfrage an das Backend. Daten werden im .json-Format daraufhin zurückgesendet und mittels JavaScript an entsprechender Stelle visualisiert. So werden beispielsweise Einstiegsseiten und Navigationselemente dargestellt. Die Ablaufsteuerung der Applikation wird im Browser ausgeführt.

Um eine höhere Performance zu erreichen, werden beim Aufrufen der Seite nur die jeweils notwendigen Daten von Webservices abgerufen und dynamisch in die dargestellte Website eingefügt. Wird auf eine Unterseite navigiert, so kann vom Server zusätzlich ein Template zur Darstellung der neuen Seite nachgeladen werden.

SPAs können existierende Rich-Client-Anwendungen (z. B. auf Basis von Windows oder Java) ablösen und die Funktionalität im Browser auf allen Plattformen (z. B. Windows, Mac, iOS, Android) verfügbar machen. Dies erlaubt eine Vergrößerung des Marktes und sorgt dafür, dass mobile Nutzungsszenarien umgesetzt werden können.

Die Vorteile einer Single-Page Application

  •   einfaches Deployment auf Endgeräte, da keine Installation erforderlich ist
  •   weniger netzwerkintensiv, da weder HTML-Fragmente noch ganze HTML-Seiten wiederholt übertragen werden
  •   hohe Performance durch Wegfall langer Ladezyklen
  •   dynamische und schnelle Inhaltsanpassungen
  •   responsives Design der Bedienoberfläche wird unterstützt
  •   Zugriff von überall und damit höhere Reichweite der Anwendung
  •   einfache Administration und einfacher Support
  •   Geeignet als Basis für  neue Geschäftsmodelle wie Software as a Service (Saas)

Ist das Prinzip der SPA für Ihr System geeignet?

SEKAS nutzt die drei großen Frameworks Angular, React und Vue.js, um leistungsfähige und benutzerfreundliche  Applikationen zu erstellen. Diese sind browserunabhängig, mobil und können bei Bedarf offlinefähig genutzt werden. Der Fokus liegt bei SEKAS vor allem auf umfangreichen und komplexen Systemen, für die Angular oftmals das tragfähigste Framework darstellt.

Wir entwickeln aber auch Applikationen und verteilte Systeme, die nicht als Web-Applikationen aufgebaut sind. Nicht für alle Anwendungsfälle stellt der SPA Ansatz die geeignete Wahl dar. Jede Ausgangslage erfordert eine individuelle Prüfung der möglichen Lösungsansätze. Die SPA ist nicht in jedem Fall die beste Wahl.

Handelt es sich z.B. um eine reine formularbasierte Anwendung, die auch nicht unmittelbar auf Benutzereingaben reagieren muss, sondern diese abwarten und gesammelt an den Server übertragen kann, so kommen einige der Vorteile einer SPA nicht zum Tragen. Andererseits können Anforderungen z.B. hinsichtlich der Skalierbarkeit  dennoch für eine SPA sprechen.

SEKAS hat bereits verschiedene Kunden  als technologie- und herstellerneutraler Partner bei dieser Entscheidungsfindung unterstützt. Wir verfügen über langjährige Erfahrung im Aufbau individueller Softwaresysteme, unter anderem auch im Bereich der SPA.

So haben wir beispielsweise

  • Monitoringapplikationen für Geräte in der Luftverkehrsüberwachung,
  • Managementapplikationen im Bereich des öffentlichen Personennahverkehrs und
  • Applikationen zur Visualisierung und Analyse von Messdaten

als SPA-Lösung realisiert.

Teilweise wurden hierbei auch Migrationspfade für bestehende Kundenlösungen erarbeitet und eine stufenweise Migration ermöglicht.

Offene Fragen? Unsicher, wie es weitergeht?

Haben Sie Fragen zu SPA, zu deren Einsetzbarkeit in Ihrem Umfeld oder zu möglichen Strategien, um bestehende Softwaresysteme Zug um Zug auf die neuen Technologien umzustellen?

Nehmen Sie jetzt Kontakt mit uns auf - wir setzen uns gerne zeitnah mit Ihnen in Verbindung, um völlig unverbindlich Ihre persönlichen Fragen und Ihre individuelle Situation zu besprechen.

Kontakt

SEKAS GmbH
Baierbrunner Straße 23
D-81379 München

Telefon: +49 (89) 74 81 34 - 0
Telefax: +49 (89) 74 81 34 - 99
E-Mail: infosekas.de

Die Informationen zum Umgang mit personenbezogenen Daten in der Datenschutzerklärung habe ich gelesen.