Was sind Single-Page Applications (SPA)?
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.
Single-Page Applications 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.
Single-Page Applications - 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 Single-Page Applications handelt es sich hingegen um webbasierte Anwendungen, die grundlegend anders aufgebaut sind. Sie bestehen im Kern 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.
Einfache Berechnungen können direkt auf dem Client ausgeführt werden. 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.
Durch die neue Architektur der Anwendung 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, React oder Vue.js) wiederholte page loads nicht mehr nötig.
SPAs können somit 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.
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)
Sind Single-Page Applications für Ihre Systeme 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.
Sie möchten mehr über unserer Tätigkeiten im Bereich Webapplikation (SPA) und App-Entwicklung erfahren? Dann besuchen Sie unseren Projektbereich.
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 mit uns Kontakt auf!
Lernen Sie uns in einem ersten Gespräch persönlich kennen.
Wir besprechen mit Ihnen ganz unverbindlich Ihre konkrete Ausgangssituation und Ihre offenen Fragen.
Wir freuen uns auf ein angenehmes und interessantes Gespräch mit Ihnen.
Fordern Sie weitere Informationen an oder vereinbaren Sie einen Rückruf.