: Kevin Gerndt, Timm Bremus
: Single Page Applications Webapplikationen auf Steroiden
: entwickler.press
: 9783868026689
: 1
: CHF 18.00
:
: Informatik
: German
: 240
: Wasserzeichen/DRM
: PC/MAC/eReader/Tablet
: PDF/ePUB
Webseiten mit lästigem Reload und langen Wartezeiten gehören der Vergangenheit an. Dem Benutzer einer Webanwendung das Gefühl zu vermitteln, sich inmitten einer nativen App zu befinden, ist der Grundsatz einer Single Page Application. Die Res­sour­cen und Daten einer Anwendung werden nur bei deren Start initial geladen, was der An­wen­dung einen besonderen Performanceschub verleiht. Single Page Applications be­geis­tern durch besonders kurze Reaktionszeiten und stellen klassische Webanwendungen dadurch in den Schatten. Dass so etwas funktioniert, zeigen populäre Beispiele wie Google Mail oder Facebook. Das initiale Laden aller notwendigen Ressourcen beim Seitenaufruf verleiht der An­wen­dung einen besonderen Performanceschub und verhilft ihr somit zu Höchst­leis­tun­gen. Die Autoren vermitteln dem Leser fundiertes Wissen über die neue Technologie und zeigen anhand von praxisnahen Beispielen die Symbiose aus ASP.NET Web API und den beiden Clientframeworks Knockout und AngularJS. Die Zielgruppe des Buchs sind Webentwickler mit HTML- sowie JavaScript-Kenntnissen. Für den Backend-Teil benötigt der Leser darüber hinaus noch Erfahrung mit C# und ASP.NET.

Kevin Gerndt arbeitet als Consultant im Bereich Microsoft .NET Client und Web Technologies und hat während seiner beruflichen Laufbahn schon eine Vielzahl an Projekten begleitet. Er gilt als Experte auf dem Gebiet der modernen Webarchitektur und ist darüber hinaus als freiberuflicher Autor tätig sowie regelmäßig auf namhaften Konferenzen vertreten. Schwerpunkte seiner Tätigkeit bilden die Implementation von Geschäftsprozessen in SharePoint sowie das Konzipieren und Entwickeln moderner Webanwendungen. Timm Bremus arbeitet seit über dreizehn Jahren als IT-Consultant im Bereich Microsoft .NET Technologies und hat schon viele Projekte im Client- sowie Serverumfeld betreut und über den kompletten Lebenszyklus begleitet. Zudem ist er freiberuflicher Autor und Trainer und regelmäßig auf großen Konferenzen seines Arbeitsumfelds vertreten. Er gehört zu den bekanntesten Experten für User Experience Design und Barrierefreiheit in Deutschland und arbeitet leidenschaftlich als Berater sowie Entwickler im Auftrag seiner Kunden.

3 Knockout

3.1 Einführung

Knockout (kurz KO) ist eine JavaScript-Bibliothek, die sich hervorragend dazu eignet, Anwendungen zu kreieren, die dem Benutzer einen reibungslosen Programmfluss bieten ohne lästiges Neuladen der Seite. Die Eigenschaften von Knockout und dessen Abgrenzungen zu AngularJS wurden bereits in den vorherigen Kapiteln behandelt. Hier soll es nun ausschließlich um die Technik gehen – von der Installation bis zum praxistauglichen Anwendungseinsatz, das ist das Ziel dieses Kapitels.

3.2 Installation

Die schlanke JavaScript-Bibliothek kann direkt von der Webseiteknockoutjs.com in der aktuellsten Version heruntergeladen werden.

Knockout steht auch in den meisten Package Managern zur Installation bereit. Beispielsweise kann die Bibliothek mit Bower (http://bower.io) oder NuGet (https://www.nuget.org) direkt ins Projekt integriert werden.

Die eigentliche Installation bzw. das Einbinden der Bibliothek in eine Webseite ist einfach. Die Referenz innerhalb einer HTML-Seite wird durch das<script>-Tag erzeugt (Listing 3.1).

<script type='text/javascript'
src='knockout-3.2.0.js'></script>

Listing 3.1: Einbinden von Knockout in eine HTML-Seite

Absolute Performancefreaks nutzen zur Einbindung von Knockout ein Content Delivery Network, beispielsweise Microsoft Ajax CDN oder das CDNJS. Der Vorteil liegt darin, dass der Anwender evtl. über eine andere Webanwendung bereits die Bibliothek lokal in den Browser-Cache geladen hat und somit Knockout nicht noch einmal vom eigenen Webserver bezogen werden muss.

3.2.1 Model-View-ViewModel

Der Aufbau und die Funktion des Designpatterns „Model-View-ViewModel (MVVM)“ wurde bereits im Kapitel „Technik“ ausführlich beschrieben. MVVM bildet die Basis einer jeden Knockout-Anwendung.

Ein ViewModel wird in Knockout mit einem herkömmlichen JavaScript-Objekt abgebildet (Listing 3.2).

var personViewModel = {
forename: 'Timm',
surname: 'Bremus',
age: 31
};

Listing 3.2: Deklaration eines ViewModels

Nachdem ein ViewModel erzeugt wurde, können die einzelnen Eigenschaften an eine View gebunden werden (Listing 3.3).

<p>Der Nachname der Person ist
<span data-bind='text: surname'></span></p>

Listing 3.3: Binden von Eigenschaften in einer View

3.2.2 Knockout aktivieren

Das Attributdata-bind ist zwar ein valides HTML5-Attribut, doch ohne eine gesonderte Behandlung mittels JavaScript kann der Webbrowser nur wenig damit anfangen. Es gilt nun, diesem Attribut Leben einzuhauchen und somit Knockout zu aktivieren.