AngularJS und Knockout im Vergleich

Technologie und Data Binding
Kommentare

Frameworks zur Entwicklung von Single Page Applications gibt es mittlerweile wie Sand am Meer. Umso schwerer haben es Architekten und Entwickler, die richtige Technologieentscheidung zu treffen. In diesem Teil der Serie „AngularJS vs. Knockout – SPA im Doppelpack“ geht es um das Thema Technologie und Data Binding, in dem erklärt wird, wo ein großer Unterschied zwischen AngularJS und Knockout liegt – nämlich im Anwendungsentwurfmuster.

Ein großer Unterschied zwischen AngularJS und Knockout stellt das zugrunde liegende Anwendungsentwurfsmuster dar. MVC, wie es von AngularJS verwendet wird, besteht im Wesentlichen aus drei Komponenten. Das Modell enthält alle darzustellenden Daten und im Idealfall auch die Geschäftslogik. Die View, welche häufig auch als Präsentationsschicht bezeichnet wird, ist für die Darstellung der benötigten Daten aus dem Modell und die Entgegennahme von Benutzerinteraktionen zuständig. Der Controller verwaltet eine oder mehrere Views, nimmt Benutzerinteraktionen entgegen, wertet sie aus und reagiert entsprechend.

In AngularJS entspricht ein Controller einer gewöhnlichen Konstruktorfunktion, die den Parameter $scope entgegennimmt. In Listing 1 ist der Code für eine einfache Anwendung mit AngularJS abgebildet, die einen Eigenschaftswert aus dem assoziierten Controller ausgibt. Die Direktive ng-app gibt an, dass es sich um eine AngularJS-Anwendung handelt und legt gleichzeitig den Applikationsbereich fest. In der Konstruktorfunktion Controller wird dem Controller-Scope die Eigenschaft fullName hinzugefügt. Damit der Eigenschaftswert angezeigt wird, muss dem Zielcontroller das Attribut ng-controller zugewiesen werden. Anschließend lässt sich im HTML-Gültigkeitsbereich des Controllers mittels der Doppelt-Geschweiften-Klammer-Syntax auf Eigenschaften zugreifen.

  
    
    
      function Controller($scope) {
        $scope.fullName = "Max Mustermann";
      }

<div>{{fullName}}</div>
Knockout setzt im Gegensatz zu AngularJS auf das MVVM-Entwurfsmuster. Um eine saubere Trennung von UI und Logik nach dem MVVM-Pattern durchzuführen, werden – ähnlich wie bei MVC – drei Komponenten benötigt. Das Model, das als Datencontainer fungiert, die View zur Visualisierung von Daten und das ViewModel, welches Model und View miteinander verknüpft. Bei dem Model kann es sich entweder um ein primitives JSON-Objekt (JavaScript Object Notation)  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 ins Model zu schreiben, stellt Knockout Observables bereit. Diese sorgen dafür, dass jede Änderung am ViewModel oder am UI ohne einen zusätzlichen Methodenaufruf synchronisiert wird.

Der Vorteil von Observables ist, dass ein großes Maß an Kontrolle ausgeübt werden kann. So lassen sich Änderungen an Observables beispielsweise mit der Methode subscribe abonnieren, um das Verhalten durch eigene Funktionsaufrufe zu ergänzen. Die View besteht aus klassischem HTML, beinhaltet aber zusätzlich noch Data-Bind-Attribute, welche die Properties des Models mit den UI-Elementen in der Benutzeroberfläche verknüpfen. Zuletzt fehlt noch das eigentliche Bindeglied zwischen Model und View – das ViewModel. Es tauscht Informationen mit dem Model aus, ruft also Methoden oder Dienste auf. Des Weiteren beinhaltet das ViewModel Funktionen, die an Steuerelemente der View gebunden werden, um UI-Ereignisse weiterzuleiten und Aktionen auszulösen. Listing 2 stellt beispielhaft den Code dar, der benötigt wird, um mit Knockout ein JSON-Objekt an eine Ansicht zu binden.

  var viewModel = {
    personForename: "Max",
    personSurname: "Mustermann"
  };
  ko.applyBindings(viewModel);


Forename: <span> </span>
Surname: <span> </span>

Standardmäßig werden die Eingabedaten aus Steuerelementen erst dann zurück ins Model aktualisiert, wenn die Eingabe erfolgt ist. In AngularJS hingegen wird nach jedem Tastendruck ein Abgleich vorgenommen. Dieses Verhalten ist in beiden Frameworks anpassbar. In Knockout steht hierzu das Binding valueUpdate zur Verfügung. Das Standardverhalten lässt sich so mit den Optionen „keyup“, „keypress“ und „afterkeydown“ beeinflussen.

AngularJS bietet keine native Möglichkeit der Verhaltenssteuerung und bedingt das Entwickeln einer eigenen Direktive für die gewünschte Aktion. Neben MVC, zur Strukturierung der Anwendung, implementiert AngularJS – genau wie Knockout – zusätzlich noch das MVVM-Pattern, um eine bidirektionale Datenbindung zwischen der View und dem Controller zu gewährleisten. AngularJS kommt aber im Gegensatz zu Knockout ohne Observables und somit auch ohne Technologien wie Dependency Tracking aus. Beide Frameworks verfügen dadurch über eine mächtige Data Binding Engine.

Ein Wermutstropfen bei AngularJS sind die so genannten „Silent Failures“. Wird beispielsweise ein falscher Eigenschaftsname für die Datenbindung im HTML-Code verwendet, erfolgt keine Fehlerausgabe. Knockout hingegen macht den Entwickler auf falsche Bezeichner im Markup durch eine Konsolenausgabe aufmerksam. So können Fehlerquellen leicht identifiziert und beseitigt werden.

Aufmacherbild: Green printed circuit board von Shutterstock / Urheberrecht: KPrzemyslaw Ceynowa

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -