AngularJS und Knockout im Vergleich

AngularJS vs. Knockout: Validierung und mehr
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. Im abschließenden Teil der Serie „AngularJS vs. Knockout“ geht es um die Validierung von Benutzerdaten – und ein zusammenfassendes Fazit zum Vergleich zwischen AngularJS und Knockout für die Entwicklung von SAP-Anwendungen gibt es obendrein. 

Häufig ist es nicht gewollt oder nicht möglich, Benutzereingaben ohne eine Validierung der Daten zu verarbeiten. Dies kann unterschiedliche Gründe haben: Zum einen kann durch eine Überprüfung der Daten direkt bei der Eingabe eine gewisse Datenqualität sichergestellt werden. Zum anderen müssen die Eingaben möglicherweise ein spezielles Format aufweisen, um die problemlose Weiterverarbeitung der Daten sicherzustellen. Des Weiteren steigert die clientseitige Validierung die Benutzerfreundlichkeit sowie das Anwendungserlebnis, da der Benutzer unmittelbar über fehlerhafte Eingaben informiert wird.

Auch hierfür bieten beide Frameworks Lösungsansätze. AngularJS bietet Validationsfunktionen wie zum Beispiel die required– oder pattern-Direktive für einen Großteil der HTML5-Eingabesteuerelemente. In besonderen Anwendungsfällen sind die Standardvalidatoren aber nicht ausreichend. Beispielhalft dann, wenn die Werte „1,5“ oder „1.5“ als gültige Eingabe zugelassen werden sollen.

Für solche Szenerien bietet AngularJS die Möglichkeit, eigene Validatoren zu entwickeln. Hierzu wird der Controller um eine beliebige Direktive mit einer Gültigkeitsprüfung erweitertet, wie in Listing 6 dargestellt ist. Im HTML-Markup muss lediglich die registrierte Direktive angegeben werden. Das Ergebnis der Prüfung lässt sich beispielsweise in einem span-Element unter oder neben dem Eingabefeld ausgeben. Der Wahrheitswert, der durch den Funktionsaufruf ctrl.$setValidity(‚float‘, true); festgelegt wird, kann folgendermaßen im Markup abgerufen werden: ng-show=“form.length.$error.float“. Auf diese Weise lässt sich die Sichtbarkeit der Fehlermeldung steuern.

  var FLOAT_REGEXP = /^-?d+((.|,)d+)?$/;
  app.directive('customFloat', function() { return {
    require: 'ngModel', link: function(scope, elm, attrs, ctrl) {
      ctrl.$parsers.unshift(function(viewValue) {
        (FLOAT_REGEXP.test(viewValue)) if {
          ctrl.$setValidity('float', true); 
          return parseFloat(viewValue.replace(',', '.')); } else {
          ctrl.$setValidity('float', false); return undefined; }});}};
  });


Not valid!

Auch Knockout stellt die gebräuchlichsten Validationsfunktionen wie etwa „Required“, „Date“ oder „Pattern“ zur Prüfung von regulären Ausdrücken zur Verfügung. Diese können mithilfe der Funktion extend auf Observables angewendet werden. Darüber hinaus bietet Knockout, genau wie AngularJS, für spezielle Anwendungsfälle die Option, eigene Validatoren zu entwickeln. Listing 7 zeigt einen Custom-Validator zum Validieren einer Pin, bestehend aus vier Ziffern. In diesem ist die Bedingung für die Gültigkeitsprüfung sowie eine Fehlernachricht festgelegt. Damit der Validator verwendet werden kann, muss er mit dem Funktionsaufruf ko.validation.registerExtenders(); registriert werden. Clientseitige Validation ist somit mit beiden Frameworks einfach und problemlos möglich.

  ko.validation.rules["pin"] = { validator: function(val) { return
      /(^d{4}$)/.test(val); }, message: "Not Valid!" };
  ko.validation.registerExtenders();
  var pinVal = ko.observable().extend({pin : true});



Zusammenfassung

Mit AngularJS und Knockout stehen Entwicklern von Single Page Applications zwei mächtige Frameworks zur Seite. Der Vergleich von verschiedenen Aspekten wie Performance, Templating oder Validierung hat gezeigt, dass sich beide Kontrahenten auf einem ähnlichen Level bewegen und es vielmehr auf die richtige Verwendung der Technologien als auf die Wahl des Frameworks ankommt.

Dennoch haben beide Bibliotheken ihre Kernanwendungsgebiete. Handelt es sich bei der geplanten Webanwendung zum Beispiel um einen Webshop mit einer Vielzahl von verschiedenen Ansichten, ist wohl AngularJS aufgrund seiner Mächtigkeit und des zugrunde liegenden MVC-Anwendungsentwurfsmuster die bessere Wahl.

Soll die Benutzeroberfläche und Anwendungsstruktur einer Webseite nur punktuell durch Data Binding aufgewertet werden, sind Entwickler gut beraten, sich für den Einsatz von Knockout zu entscheiden. Das kann auch auf bestehende Webapplikationen zutreffen, in denen lediglich bestimmte Formulare im Single-Page-Application-Style modernisiert werden sollen.

Aufmacherbild: View of a fingerprint revealed by printing. von Shutterstock / Urheberrecht: arfo

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -