© prettyboy80/Shutterstock.com
Single Page Applications mit ASP.NET Web API und Knockout

Single Page Applications mit ASP.NET Web API und Knockout


Als Single Page Applications (SPA) werden Webseiten bezeichnet, die ohne den klassischen Seitenwechsel auskommen und dem Benutzer so das Gefühl einer nativen Anwendung vermitteln. Was sich tatsächlich hinter diesem Hype verbirgt und welche Werkzeuge und Hilfsmittel für die Entwicklung von SPAs zur Verfügung stehen, erläutert der folgende Artikel.

Es ist noch gar nicht so lange her, da waren Webseiten alles andere als dynamisch und der Seitenwechsel stets mit einem Reload verbunden. Die einzelnen HTML-­Inhaltsseiten wurden durch eine oftmals statische Navigation verlinkt und JavaScript nur sparsam eingesetzt, da es als Sicherheitsrisiko galt. Bis dato hat sich einiges verändert. Technologien wie ASP.NET Web Forms haben das Web agiler gemacht, doch auch diese haben ihre Schattenseiten. Der wohl größte Nachteil sind die Postbacks, mit denen Daten zurück zum Server gesendet werden. Der Prozessfluss einer traditionellen Webanwendung wird durch die zustandslose Natur einer HTTP-Anfrage bestimmt. Dieses der Technologie geschuldete Verhalten heißt für den Benutzer, dass er bei jedem Seitenwechsel auf den Aufbau der gesamten Seite warten muss. Verzögert sich die Response des Servers oder bleibt diese gar aus, so entstehen unweigerlich längere Wartezeiten oder im schlechtesten Fall Verbindungsabbrüche im Ablauf der Anwendung. Das kann für den Anwender beispielsweise bedeuten, dass das bereits ausgefüllte Formular erneut ausgefüllt und zurück an den Server gesendet werden muss. Ein Ärgernis, das sicher jedem schon einmal widerfahren ist. Wäre es nicht schön, sich innerhalb einer Webseite wie in einer nativen Anwendung bewegen zu können, ohne nervige Wartezeiten und Postbacks? Dass so etwas funktioniert, zeigen populäre Beispiele wie Google Mail oder Facebook. Diese Webseiten sind nach dem SPA-Prinzip entwickelt. Als solche werden Webseiten bezeichnet, die aus einem einzigen HTML-Dokument bestehen und alle benötigten Ressourcen wie JavaScript und Style-Sheet-Dateien sowie das komplette Markup beim ersten Aufruf laden. Das Ein- und Ausblenden von Seiteninhalten sowie das Laden und Speichern von Daten wird anschließend von JavaScript übernommen, sodass ein Postback und somit das Neuladen der Seite nicht mehr notwendig ist. Bei diesem Vorgehen spielt AJAX (Asynchronous JavaScript and XML) die Hauptrolle und sorgt für das asynchrone Anfordern und Absenden der Daten, wodurch ein großer Overhead entfällt. Aber was ist der tatsächliche Mehrwert von Single Page Applications?

Der Hauptgrund neben technischen Aspekten, wie die Reduktion von Traffic, ist, dass dem Benutzer, obwohl er sich in einer Webanwendung befindet, eine Rich Client Experience vermittelt werden kann – ein Trend, der sich im Web immer weiter fortsetzt. Mancher Visionär spricht gar von einer Appification des Webs. Es gibt sicher viele Anwendungsfälle, in denen die Realisierung einer Webseite als Single Page Application Sinn macht, aber mindestens genauso viele Szenarien, in denen besser auf die klassische Darstellung zurückgegriffen werden sollte. Jenes ist vor allem dann der Fall, wenn sehr viele oder nicht zusammenhängende Inhalte darzustellen sind. Welche Werkzeuge und Technologien für die Entwicklung von Single Page Applications eingesetzt werden können, wird im Folgenden aufgezeigt.

Knockout

Welcher Webentwickler hat nicht schon einmal im JavaScript-Code auf HTML-Elemente zurückgegriffen, um Werte anzuzeigen oder die Darstellung zu manipulieren? In einer simplen Anwendung ist gegen diese Vorgehensweise sicher nichts einzuwenden, und es fällt leicht, den Überblick zu bewahren. Aber wie sieht es in komplexeren Entwicklungsszenarien mit hunderten oder gar tausenden Zeilen Skript aus? Hier wäre eine saubere Trennung zwischen Markup und JavaScript-Code wünschenswert. Einen Lösungsansatz für das Problem der „Codevermischung“ bietet Knockout. Hierbei handelt es sich um ein schlankes JavaScript-Framework, das das MVVM (Model View ViewModel) Pattern implementiert. MVVM ist eine Variante des MVC (Model View Controller) Pattern und dient zur Trennung von Markup und Logik des UI. Dieses Pattern ist dem Einen oder Anderen vielleicht aus den beiden Microsoft-Technologien Windows Presentation Foundation (WPF) und Silverlight bekannt. Durch die Entkopplung von Logik und Darstellung können beispielsweise Designer eine Oberfläche mit HTML entwickeln, ohne sich darum kümmern zu müssen, wie die Daten eigentlich in die Anwendung kommen. Um eine saubere Trennung von UI und Logik nach dem MVVM Pattern durchzuführen, werden drei Komponenten benötigt. Das Model, das als Datencontainer fungiert, die View zur Visualisierung von Daten und das ViewModel, das Model und View miteinander verknüpft. Bei dem Model kann es sich entweder um ein primitives JSON-(JavaScript-Object-Notation-)Objekt oder aber um eine Konstruktorfunktion handeln. Letztere wird benötigt, um eine bidirektionale Datenbindung zu gewährleisten. Um die vom Benutzer eingegebenen Daten zurück in das Model zu schreiben, stellt Knockout Observables bereit. Sie sorgen dafür, dass jede Änderung am ViewModel oder am UI ohne einen zusätzlichen Methodenaufruf synchronisiert wird. Um Veränderungen an Observables zu verfolgen, kann die Methode subscribe verwendet werden. Die View besteht aus klassischem HTML, beinhaltet aber zusätzlich noch Data-Bind-Attribute, die die Properties des Models mit den UI-Elementen in der Benutzeroberfläche verknüpfen. Zuletzt fehlt noch das eigentliche Bindeglied zwischen ...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang