Das populäre Framework AngularJS macht die Komplexität von JavaScript und Single Page Anwendungen beherrschbar. Es unterstützt Entwickler bei häufig wiederkehrenden Aufgaben wie Datenbindung, Datenvalidierung und Vorlagenerstellung. Dazu bietet es Konzepte zum Strukturieren von Quellcode sowie zur Schaffung wartbarer, wiederverwendbarer und gut testbarer Programmteile.

Dies ist ein Auszug aus dem Buch AngularJS: Moderne Webanwendungen und Single Page Applications mit JavaScript.

Einführung in AngularJS

Das Erstellen moderner JavaScript-getriebener Anwendungen gestaltet sich anspruchsvoll: Der Entwickler muss sich um das Binden von Daten, um das Aufrufen von Services sowie um das Validieren von Eingaben kümmern. Der Quellcode, der dabei entsteht, soll darüber hinaus auch überschaubar, wartbar und testbar sein. All dies ist zwar mit JavaScript möglich, allerdings erfordert diesviel Disziplin seitens der Entwickler und geht mit der Erstellung großer Mengen ähnlicher Codestrecken einher. JavaScript-Frameworks versprechen hier Abhilfe. Eines dieser Frameworks ist AngularJS, welches aus der Feder von Google stammt. Es zeichnet sich dadurch aus, dass es sehr viele Aspekte moderner JavaScript-basierter Single Page Applications unterstützt und dabei auch die Kriterien Wartbarkeit und Testbarkeit in den Vordergrund stellt.

Dieses Kapitel diskutiert die Ideen hinter Single Page Applications und veranschaulicht die Grundlagen von AngularJS anhand eines Beispiels. Im Anschluss daran diskutiert es einige Merkmale von AngularJS etwas detaillierter.

Überblick zu Single Page Applications und AngularJS

Obwohl Single Page Applications auf clientseitigen Web-Technologien basieren, weisen sie dennoch gravierende Unterschiede zu klassischen Web-Anwendungen auf. Welche Vor- und Nachteile damit einhergehen und wie AngularJS bei der Entwicklung solcher modernen Applikationen unterstützt, zeigt dieser Abschnitt.

Vom Hypertext zur Single Page Application

Als das Web Ende der 1980er konzipiert wurde, wollte man damit lediglich Hypertextbasierte Dokumente – sprich,  miteinander verknüpfte Dokumente – austauschen und in Clients, die heute jeder als Browser kennt, anzeigen. Diese grundlegende Idee beeinflusst heute noch die Architektur vieler Web-Anwendungen, welche häufig nur aus auf dem Server generierten Seiten, die sich gegenseitig aufrufen, bestehen. Für den Benutzer ist das wenig komfortabel, da die meisten Interaktionen mit der Anwendung zu einem Nachladen einer weiteren dynamisch erzeugten Seite vom Server führen. Im Zuge der Anforderung der nächsten Seite können Web-Anwendungen auch Informationen über die aktuelle Anwendungsnutzung, darunter Statusinformationen, aber auch vom Benutzer erfasste Daten, an den Server zurücksenden. Aus diesem Grund ist hierbei auch von Post-Back die Rede.

Obwohl JavaScript bereits seit Mitte der 1990er zur Verfügung stand, wurde der Einsatz dieser Skriptsprache zu einer Reduktion von Post-Backs erst Mitte der 2000er im Rahmen der Web-2.0-Bewegung auf breiter Basis akzeptiert und eingesetzt. Die Idee dahinter ist es, bei Bedarf aus der aktuellen Seite heraus über JavaScript benötigte Daten vom Server nachzuladen und anzuzeigen, ohne eine komplett neue Seite vom Server anzufordern.

Hierbei war und ist auch von AJAX die Rede. Dieses Akronym steht für Asynchronous JavaScript and XML und spiegelt die Tatsache wider, dass in den ersten Tagen via JavaScript XML-basierte Daten vom Server nachgeladen wurden – und das auf asynchrone Weise. Also im Hintergrund, sodass die Web-Anwendung hierdurch nicht belastet wird. Auch wenn heute noch von AJAX die Rede ist, weicht XML in der Regel anderen, leichtgewichtigeren Darstellungsformen, allen voran der JavaScript-Object-Notation (JSON), welche der Art und Weise entspricht, wie JavaScript Objekte mit sogenannten Objekt-Literalen darstellt. Neben der Leichtgewichtigkeit bringt JSON auch den Vorteil der Nähe zu JavaScript mit sich. Dieser besteht darin, dass JavaScript-Clients JSON-Dokumente einfach verarbeiten können.

Während in der ersten Zeit die Ideen hinter AJAX lediglich zum Verbessern der Benutzerfreundlichkeit klassischer  Web-Anwendungengenutzt wurden und vor dem Hintergrund des sogenannten Ajaxifyings die Notwendigkeit von Post-Backs reduziert wurde, gehen in den letzten Jahren immer mehr Entwickler dazu über, die Möglichkeiten von JavaScript und somit auch jene von AJAX zu intensivieren. Auf die Spitze getrieben ergibt das eine Anwendung, die lediglich aus einer einzigen Seite besteht und sich sämtliche Informationen, darunter weitere Masken, aber auch Daten, von verschiedenen Services lädt. Diesen modernen Ansatz, der zu sogenannten Single Page Applications (SPA) führt, betrachtet der nächste Abschnitt näher.

Vor- und Nachteile von Single Page Applications

Der Einsatz von Single Page Applications bringt zahlreiche Vorteile mit sich. Die nachfolgende Auflistung gibt darüber Auskunft:

• Plattformunabhängigkeit: Die wohl wichtigste Eigenschaft von Single Page Applications ist die damit einhergehende Plattformunabhängigkeit. Dieser Aspekt ist heutzutage, wo es immer mehr zu unterstützende mobile und klassische Plattformen gibt, wichtiger denn je. Da Single Page Applications auf Web-Technologien basieren, entkoppelt man sich damit auch von der Entwicklung des Marktes: Unabhängig davon, welche Neuerungen, wie neue Anbieter oder Gerätearten, am Markt auftauchen, kann man getrost davon ausgehen, dass Web-Technologien in absehbarer Zukunft überall Unterstützung finden.
• Benutzerfreundlichkeit: Da bei Single Page Applications Post-Backs komplett entfallen und der Anwender somit nicht nach einzelnen Interaktionen auf das Laden einer neuen Seite warten muss, erhöht sich die Benutzerfreundlichkeit. Die konsequente Nutzung von JavaScript erlaubt darüber hinaus die Darstellung reichhaltiger Inhalte und Steuerelemente.
• Offlinefähigkeit: Eine Single Page Application ist nichts anderes als ein Client, dervollständig aus clientseitigen Web-Technologien besteht, allen voran JavaScript, HTML und CSS. Die Verknüpfung zum Server findet lediglich über Serviceaufrufe statt. Diesen Client kann man, wie klassische Web-Anwendungen, via HTTP ausliefern. Alternativ dazu können die Dateien auch auf den Client kopiert werden,sodass der Anwender diese auch ohne Internetverbindung nutzen kann. Die benötigten Dienste könnte hierbei ein lokaler Web-Server oder ein spezieller Browser über zusätzliche JavaScript-Objekte bereitstellen. Den letzteren Ansatz greifen Hybrid-Frameworks, wie Apache Cordova, auf. Die Idee dahinter ist es, eine Single PageApplication gemeinsam mit einem solchen Browser für verschiedene Plattformen wie iOS, Android oder Windows Phone zu verpacken. Aus Sicht dieser Plattformen und auch aus Sicht des Anwenders handelt es sich dabei um native, installierbare und offlinefähige Anwendungen.
• Architektur: Die Architektur einer Single Page Application passt wunderbar zum aktuellen Trend hin zu Service-basierten Systemen. Dabei kann die SPA lediglich ein Client von vielen sein, der die bereitgestellten Services nutzt, um zum Beispiel betriebliche Abläufe zu unterstützen. Da das ständige Aufrufen weiterer Seiten entfällt, entspricht der Aufbau einer solchen Anwendung dem einer klassischen nativen Anwendung. Dies reduziert auch die Komplexität für die Entwickler.

Neben den genannten Vorteilen gehen Single Page Applications natürlich auch mit Nachteilen einher. Beispielsweise funktionieren sie nur, wenn der Anwender die Ausführung von JavaScript zulässt. Darüber hinaus haben Entwickler mit unterschiedlichen Browsern zu kämpfen. Dies erhöht die Komplexität, aber auch den Testaufwand. Ein weiterer Nachteil von Single Page Applications liegt in der Tatsache, dass Suchmaschinen, wie Google, Single Page Applications weniger gut als klassische Web-Sites indizieren können.

Um die Komplexität bei der Erstellung von Single Page Applications in den Griff zu bekommen, stützen sich Entwickler auf etablierte Frameworks, welche fehleranfällige und wiederkehrende Aufgaben automatisieren und daneben durch das Erzwingen einer bestimmten Projektorganisation die Wartbarkeit erhöhen. Eines von diesen Frameworks, das derzeit äußerst populär ist, ist AngularJS.

Weiterlesen könnt Ihr in dem Buch AngularJS: Moderne Webanwendungen und Single Page Applications mit JavaScript

Und wer erst einmal einen tieferen Einblick haben möchte, dem sei das Probekapitel ans Herz gelegt:
Kapitel 4: Formulare und Validierung