JavaScript-Fundamente für Single Page Apps, Teil 1 Durchblick im JavaScript-Ökosystem

Single Page Apps oder kurz SPAs werden im Wesentlichen in JavaScript unter Zuhilfenahme von Frameworks entwickelt. Die derzeit populärsten unter den Client-zentrierten JS-Frameworks sind React, Angular und Vue.JS; auf Serverseite dominiert Node.JS. Wir sehen uns die verschiedenen Lösungen in dieser Serie an.

Anbieter zum Thema

PresseBox - unn | UNITED NEWS NETWORK GmbH

Eine Einzelseiten-Webanwendungen (Single Page Application, SPA) ist eine Webanwendung, die aus einem einzigen HTML-Dokument besteht. Ihre Inhalte werden zur Laufzeit dynamisch nachgeladen – ein Prozess, den man auch Rendern nennt. Dieser Prozess lässt sich nur schwierig mit Hilfe modularer und wiederverwendbarer Komponenten gestalten.

Eine solche Architektur unterscheidet sich deutlich von klassischen Webanwendungen, die meist aus mehreren, verlinkten HTML-Dokumenten bestehen. Eine SPA legt damit aber die Basis, auch Webanwendungen in Form eines Rich-Client- bzw. Fat-Clients zu schreiben.

Ferner strebt man bei SPAs nach einer überwiegend Client-seitigen Ausführung der Webanwendung, um die Serverlast zu reduzieren und weitgehend selbstständigen Webclients mit Offline-Support zu ermöglichen. Trotzdem spricht aber technisch nicht dagegen, die Dynamik z. B. mittels Node.JS auf dem Server zu verlagern und selbst View-Komponenten auf dem Server zu rendern. Dies widerspricht aber häufig dem Architekturstil von SPA.

Vorteile von SPAs

Die Konzentration auf eine einzige Webseite als Basis kompletter Webanwendung reduziert aber – egal „wo“ im Einzelfall die View gerendert wird – die Client-Server-Kommunikation, denn die Webanwendung wird nur zur Laufzeit der Applikation dynamisch erweitert. Da man auf eine Navigation zwischen verschiedenen Webseiten verzichtet, wird der Präsentationsfluss im Client nicht angehalten.

Wäre das Gegenteil der Fall, müsste die Client-seitige Präsentationslogik beim Wechsel auf eine andere Webseite jedes Mal beendet und neu gestartet werden. Dies würde auch die Nutzung einer durchgängigen WebSocket-Verbindung verhindern. Zudem ist es mit Hilfe einer vollständigen Verlagerung der Präsentationsschicht auf dem Client auch möglich, z. B. mithilfe der Web-Storage-Funktion persistente Zwischenspeicher zu verwenden.

Daher werden SPAs gelegentlich als „offline-friendly“ bezeichnet. Ist nämlich der Nutzdatenserver nicht erreichbar, können solche Apps gegebenenfalls Daten aus dem Zwischenspeicher verwenden und die Anwendung liefe auch ohne eine Verbindung zum Server auf dem Client weiter. Zusammenfassend zeichnet sich eine SPA durch folgende Eigenschaften aus:

• Der Sitzungszustand wird nicht auf dem Server, sondern in der Client-App gespeichert.

• Der Webclient ist eine unabhängige Einheit und kann selbstständig ohne häufige Client-Server-Roundtrips auf Benutzeraktionen reagieren.

• Die von der Webanwendung verwendeten Services treffen keine Annahmen darüber, wie der Webclient die angebotenen Dienste einsetzt, sodass der Serverseite Teil unabhängig vom Client implementiert und getestet werden kann.

Model View Controller

Da sich gerade bei SPA-Architekturen immer mehr Logik auf den Client verlagert, nimmt auch die anteilige Menge an JavaScript-Code in modernen Web-Anwendungen zu. Möchte der Entwickler seine Applikation aber trotzdem einigermaßen wartbar halten, muss er sich über die Strukturierung seiner Anwendungslogik Gedanken, wobei es einige erprobte Modelle/Konzepte gibt, die sich im SPA-Kontext etabliert haben.

Das klassische Architektur-Pattern bei SPA nennt sich MVC (Model View Controller). Es besteht aus den Komponenten Datenrepräsentation (Model), Darstellung (View) sowie Steuerung und Applikationslogik (Controller). Allerdings werden die Begrifflichkeiten des ursprünglichen MVC-Musters auch heute noch verwendet, um Architekturen zu beschreiben, die weitaus komplexer sind, als Web-Anwendungen zur Entstehungszeit des MVC-Begriffs waren.

Im Detail hängt es von der Perspektive des betrachteten Teilsystems ab, welche Komponenten mit MVC bezeichnet werden. Man könnte beispielsweise einen Webbrowser immer als View eines größeren Gesamtsystems betrachten, auch wenn bereits ein einzelnes Formularelement im Browser selbst aus einem kleinen Datenmodell mit Model-View-Komponenten besteht.

Trotzdem wurde die Grundidee der Trennung von Model, View und Controller beibehalten, wird heute allerdings feiner granuliert und verschachtelt. In der Praxis bedeutet das, dass MVC nicht immer in Reinform zum Einsatz kommt. So nutzt etwa AngularJS (Angular 1.x) sämtliche MVC-Komponenten, darüber hinaus aber auch Konzepte des von Microsoft entwickelten Model View ViewModel (MVVM).

Model View ViewModel

Das MVVM-Modell wurde entworfen, um die View-Komponente vollständig losgelöst vom Rest der Applikation entwickeln und testen zu können, wobei das Kapseln der View (reines HTML) durch Verbindung mit dem ViewModel als Funktion abstrahiert und via Data Binding realisiert ist.

Data-Binding ist eine der prägenden Eigenschaften von MVVM und ist in zwei „Stil-Richtungen“ möglich: One-Way Data Binding stellt eine unidirektionale Verbindung vom ViewModel zur View her, während das Two-Way Data Binding eine Synchronisation in beide Richtungen erlaubt. Darüber hinaus gibt es auch noch andere Strukturierungsmodelle der Anwendungslogik wie z. B. das Model-View-Presenter-Pattern (MVP).

The State of JavaScript

Die Bedeutung von JavaScript im SPA-Architekturstil, egal ob im MVC- oder MVVM-Modell der Strukturierung der Anwendungslogik, ist unbestreitbar. Während das Programmiersprachen- und Framework-Ökosystem mit Java, Node.JS, PHP, Python und Co auf Server-Seite recht heterogen ist, kommt bei SPA-Anwendungen sowie allgemein bei der Client-seitigen UI-Entwicklung heute so gut wie ausschließlich JavaScript zum Einsatz.

Ohne Bibliotheken und Frameworks kommt JavaScript heutzutage allerdings auch nicht mehr aus. Populäre JavaScript-Umfragen wie die State of JavaScript Survey dokumentieren eindrucksvoll, wie vielschichtig auch die Welt der Client-seitigen Frameworks heute ist.

Hätte man noch vor ein paar Jahren in einer JavaScript-Umfrage nach der Verwendung von Bibliotheken gefragt, hätte es nur eine Antwort gegeben: JQuery. Nutzte z. B. noch 2014 laut Wikipedia jede Zweite der 10000 populärsten Websites JQuery, dominieren Stand 2017 zahlreiche Bibliotheken die Szenerie unter denen sich laut State of JavaScript 2017 Angular, React und Vue.JS als populärste JavaScript-UI-Frameworks etabliert haben.

Selbst bei der Frontend-Entwicklung ist JavaScript – ob man die Sprache mag oder nicht – zur mit Abstand wichtigsten Sprache avanciert. Dies bestätigen neben State of JavaScript 2017 zahlreiche weitere Umfragen und Rankings etwa bei Stackoverflow. Schaut man hingegen nicht auf die Programmiersprachen, sondern nur auf die UI-Frameworks, darf selbstverständlich auch HTML5 nicht außer Acht gelassen werden.

Angesichts der Verfügbarkeit frischer Versionen von Angular und React werden wir uns in diesem den folgenden Teilen unserer JavaScript-Framework-Reihe mit den beiden Platzhirschen unter den Client-Frameworks befassen und schließlich einen Blick auf den StatusQuo bei Node.JS werden.

(ID:45177272)