Frameworks im Vergleich

Single Page Applications: AngularJS oder Knockout?
Kommentare

Frameworks zur Entwicklung von Single Page Applications gibt es mittlerweile wie Sand am Meer, die richtige Technologieentscheidung zu treffen ist schwer. Der folgende Artikel vergleicht verschiedene Aspekte, wie Technologie, Validation sowie Performance, der beiden JavaScript-Frameworks AngularJS und Knockout. Darüber hinaus werden nützliche Tipps für die erfolgreiche Entwicklung von SPA-Anwendungen vorgestellt.

Architekten und Entwickler, die dem aktuellem Technologiehype im Web folgen und eine Webanwendung in Form einer Single Page Application (SPA) realisieren wollen, haben es wahrlich nicht einfach, was die Entscheidung für das richtige Framework betrifft. Das liegt vor allem daran, dass es mittlerweile massenhaft SPA-Frameworks gibt. Wer den Trend verfolgt, kann fast wöchentlich von neuen Technologiehypes lesen. Das Festlegen auf ein bestimmtes Framework stellt eine Grundentscheidung in einem Entwicklungsprojekt dar und bestimmt den Projekterfolg maßgeblich. Ist die Entscheidung erst einmal getroffen und die Entwicklung in vollem Gange, bedeutet ein Wechsel meist einen nicht unerheblichen Mehraufwand.

In diesem Artikel werden zwei der bekanntesten Frameworks zur Entwicklung von Single Page Applications miteinander verglichen. Bei den zwei Kontrahenten handelt es sich um die beiden Open-Source-JavaScript-Frameworks AngularJS und Knockout.

Die JavaScript Library AngularJS, die von Google entwickelt wird, setzt auf klassische MVC-Technologie (Model View Controller) und ist ein vollwertiges Framework zur Erstellung von SPA-Webanwendungen.

AngularJS kommt ohne unterstützende Bibliotheken aus, inkludiert aber eine abgespeckte jQuery-Version namens jQLite. Sie dient als Fallback, da AngularJS intern jQuery-Funktionen verwendet. Ist zusätzlich eine andere jQuery-Version auf der Seite eingebunden, wird diese verwendet. Der Einsatz von AngularJS ergibt immer dann Sinn, wenn zwischen verschiedenen Ansichten auf einer Webseite hin und her gesprungen werden soll, ohne dass ein Postback erfolgt. Ein klassisches Beispiel ist eine Webshopanwendung: Benutzer wollen sich auf einer Artikelübersichtsseite Details zu einem bestimmten Produkt anzeigen lassen. Diese Aktion ist bei herkömmlichen Webseiten mit einem Reload der Seite verbunden. Anders würde das Szenario mit einer auf AngularJS basierenden Webapplikation aussehen. Technologien wie Templating und Partial-Page Rendering ermöglichen es, nur bestimmte Teile einer Seite auszutauschen. Zusätzlich benötigte Daten können von Web-Services-Schnittstellen, beispielsweise mithilfe von AJAX (Asynchronous JavaScript and XML), bezogen werden. So lassen sich unter Zuhilfenahme von AngularJS schnell und effizient hochwertige Single Page Applications mit gut strukturierter Codebasis entwickeln.

Bei Knockout.js hingegen handelt es sich um eine leichtgewichtige Library, die auf Datenbindung spezialisiert ist und das MVVM-Pattern (Model View Viewmodel) implementiert. Das Framework wird von Steve Sanderson, einem Microsoft-Mitarbeiter, entwickelt und findet sich mittlerweile auch in vielen Visual-Studio-Projektvorlagen wieder. Mithilfe von Knockout lassen sich komplexe Beziehungen zwischen einzelnen UI-Komponenten einfach abbilden. Ein simpler Anwendungsfall könnte wie folgt aussehen: Benutzer tragen persönliche Daten in ein Eingabeformular ein. Während der Eingabe wird ein Vollständigkeitsindex errechnet und in Form einer Balkengrafik angezeigt. Ein solches Szenario lässt sich mithilfe von Knockout mit nur wenigen Zeilen Code einfach realisieren; ohne eine entsprechende Bibliothek wäre der Aufwand weitaus größer.

Das Ziel beider Frameworks ist es somit, die Entwicklung von Web-Frontends soweit wie möglich zu vereinfachen und eine klare Trennung zwischen der Anzeigeschicht und der Datendomain zu schaffen. Durch klare Strukturen kann die Qualität von Quellcode verbessert werden, was zu einer Verringerung der Wartungsaufwände führt. Darüber hinaus kann die User Experience durch ansprechende und interaktive UI-Komponenten verbessert werden, wie das mit Knockout aufgezeigte Beispiel veranschaulicht.

Um es einem möglichst breitem Spektrum an Benutzern zu ermöglichen, die Webanwendung problemlos benutzen zu können, spielt die Browserkompatibilität eine große Rolle. Beide Bibliotheken sind mit nahezu allen modernen Browsern wie Internet Explorer, Mozilla Firefox, Google Chrome und Opera als auch mobilen Browsern kompatibel.

Ein wichtiger Aspekt – neben technischen Details – ist die Popularität eines Frameworks und die dahinterstehende Community. Denn je größer die Community, desto schneller werden Fehler behoben und nützliche Features hinzugefügt. Anhand einer Google-Trendanalyse lässt sich erkennen, wie häufig Informationen über die Frameworks bei Google abgerufen werden und wie sich der Trend zukünftig entwickeln könnte. Abbildung 1 zeigt eine Gegenüberstellung der Suchtrends bei Google von AngularJS (blau dargestellt) und Knockout (rot dargestellt). Aber heißt das nun, dass Knockout nur eine unbedeutende Randerscheinung ist? Keineswegs! Der gravierende Unterschied lässt sich möglicherweise zum einen mit der Popularität des Herstellers und zum anderen damit erklären, dass AngularJS ein breiteres Spektrum an Features und Funktionen abdeckt als Knockout. Auch wenn Google-Trendanalysen kein eindeutiges Ergebnis liefern, können sie dennoch einen Hinweis darauf geben, wie gefragt ein Framework ist und ob sich der Einsatz wirklich lohnt. Im Folgenden werden weitere verschiedene wichtige Facetten wie Performance, Validierung sowie Entwicklungswerkzeuge der beiden Frameworks beleuchtet und miteinander verglichen. Darüber hinaus gibt der Artikel nützliche Tipps, in welchen Entwicklungsszenarien sich welche Technologie am besten einsetzen lässt.

Abb. 1: Google-Trendanalyse AngularJS vs. Knockout

Abb. 1: Google-Trendanalyse AngularJS vs. Knockout

Technologie und Data Binding

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.

Listing 1

<!doctype html>
<html ng-app>
 <head>
 <script type="text/javascript" src="angular.min.js"></script>
 <script type="text/javascript">
 function Controller($scope) {
 $scope.fullName = "Max Mustermann";
 }
 </Script>
 </head>
 <body>
 <div ng-controller="Controller">{{fullName}}</div>
 </body>
</html>

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.

Listing 2

<script type="text/javascript">
  var viewModel = {
    personForename: "Max",
    personSurname: "Mustermann"
  };
  ko.applyBindings(viewModel);
</script>

Forename: <span data-bind="text: personForename"></span>
Surname: <span data-bind="text: personSurname"></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.

Entwicklungswerkzeuge

Theoretisch kann für die Entwicklung von Webanwendungen mit AngularJS oder Knockout natürlich jeder beliebige Texteditor eingesetzt werden. Um jedoch ein Maximum an Effizienz bei der Entwicklung zu erzielen, ist es wie bei jedem Entwicklungsprojekt wichtig, dass die richtigen Werkzeuge eingesetzt werden. Ein sehr beliebter Editor, der sich sowohl für die Entwicklung mit AngularJS als auch mit Knockout eignet, ist „Sublime Text“. Dieser Editor verfügt über diverse Komfortfunktionen wie Syntax Highlighting, Autocomplete und Multiple Selections. Mit der zuletzt genannten Funktion lassen sich zum Beispiel alle in Bezug zueinander stehenden Variablennamen oder Funktionsbezeichner auf einmal ändern, was vor allem beim Refactoring viel Zeit sparen kann. Um die frameworkspezifischen Komponenten, wie beispielsweise Observables in Knockout, mit der Autovervollständigung verwenden zu können, muss lediglich das richtige Autocomplete-Plug-in geladen werden.

Stellen Sie Ihre Fragen zu diesen oder anderen Themen unseren entwickler.de-Lesern oder beantworten Sie Fragen der anderen Leser.

Ein weiteres nützliches Werkzeug zur Effizienzsteigerung bei der Entwicklung von Webanwendungen ist Yeoman. Dabei handelt es sich um eine kommandozeilenbasierte Anwendung auf Basis von Node.js, die den kompletten Entwicklungszyklus unterstützt. So können mit verschiedenen Kommandos beispielsweise Projekte basierend auf Templates generiert, Abhängigkeiten verwaltet und Tests erstellt werden. Das Ziel ist es letztendlich, einen automatisierten Erstellungsprozess abzubilden, der in der Lage ist, Deployment-fähige Anwendungspakete mit validierten und komprimierten Inhalten zu erstellen.

Eine weitere wichtige Facette der Entwicklung ist die Möglichkeit des Debuggings, um eventuelle Fehler möglichst schnell ausfindig machen zu können. Dazu lassen sich natürlich zum einen die Entwicklertools nutzen, die mittlerweile in die meisten Browser integriert sind. Zum anderen können Debugging-Plug-ins für den Webbrowser verwendet werden. Für die Entwicklung mit AngularJS empfiehlt sich die Verwendung des Google-Chrome-Plug-in „Batarang“. Es gewährt unter anderem die Möglichkeit, Werte des Controllers einzusehen oder sie zu manipulieren. Für zusätzlichen Komfort bei der Entwicklung von Webanwendungen mit Knockout sorgt die Chrome-Erweiterung „KnockoutJS Context Debugger“. Sie bietet einen ähnlichen Funktionsumfang wie Batarang und kann kostenlos aus dem Chrome App Store heruntergeladen werden. Somit bleibt zu sagen, dass sowohl AngularJS als auch Knockout wertvolle Tools zur Seite stehen, um die Produktivität im Entwicklungsprozess zu steigern und die Qualität des Produkts zu maximieren.

Performance

Ein wichtiger Aspekt, grade wenn es um das Binden von großen Datenmengen geht, ist die Performance. Eine Webanwendung, die bei einer überschaubaren Menge von anzuzeigenden Daten mit kurzen Ladezeiten trumpft, kann sich bei größeren Datenmengen als unangenehm langsam entpuppen. Wichtig für die Performance sind im Wesentlichen drei Faktoren: Das Backend, welches die Daten zur Verfügung stellt, die Data Binding Engine und die Komplexität der Darstellung.

Doch welches Framework verfügt über die effizientere und somit schnellere Data Binding Engine? Die Seite jsperf.com bietet die Möglichkeit eines direkten Performancevergleichs zwischen AngularJS und Knockout. Bei der Performanceanalyse wird das Binden und Rendern von verschieden großen Datenmengen simuliert. Abbildung 2 zeigt das Ergebnis des Benchmarks in verschiedenen Google-Chrome-Versionen. Auffallend ist hierbei, dass die Performance neben der Datenmenge auch stark von der Browserversion abhängig ist.

Abb. 2: Performancevergleich AngularJS vs. Knockout

Abb. 2: Performancevergleich AngularJS vs. Knockout

Bei kleineren Datenmengen würde der Benutzer den Unterschied mit hoher Wahrscheinlichkeit kaum bis gar nicht wahrnehmen. Steigt jedoch die Datenmenge an, führt dies unter Umständen zu unnötig langen Wartezeiten. Im schlimmsten Fall kann eine ineffiziente Implementierung sogar zum Absturz des Webbrowsers führen. In erster Linie sollten Webanwendungen natürlich so konzipiert sein, dass auch die Visualisierung größerer Mengen an Daten kein Problem darstellt. Treten jedoch trotzdem Performanceprobleme auf, so kann die Ursache mit der Hilfe eines JavaScript-Profilers eingegrenzt werden. Dieser schlüsselt sämtliche Funktionsaufrufe und deren Ausführungsdauer auf. Besonders empfehlenswert für die Profilerstellung ist Googles Browser Chrome. Der Profiler befindet sich in den Developer-Tools, die sich mit der Taste F12 aufrufen lassen. Mit diesem können neben der Ausführungszeit einzelner Funktionen („Collect JavaScript CPU Profile“) auch die Speicherauslastung analysiert („Take Heap Snapshot“) und eventuelle Memory Leaks ausfindig gemacht werden („Record Heap Allocations“).

Doch welches Framework kann nun bei dem Thema Performance punkten? Die Ergebnisse des Benchmarks zeigen, dass sich sowohl AngularJS als auch Knockout auf einem ähnlichen Niveau bewegen. Jedoch hängt die letztendlich erzielte Performance stark von der Implementierung der jeweiligen Anwendung ab. Besondere Vorsicht ist bei der Verwendung von Templates geboten, welche oft für komplexere Darstellungsszenarien benötigt werden.

Eine Falle, in die Knockout-Neulinge oftmals treten, ist der lockere Umgang mit Comment Bindings. Listing 3 zeigt ein potenzielles Problem, bei dem die Sektion unterhalb des Comment Bindings <!– ko if: items().length –> nur dann dargestellt werden soll, wenn Elemente in der items Collection vorhanden sind. Ändert sich das Array, so wird für jedes Element der Sammlung ein Rendering-Vorgang durchgeführt, was zu großen Performanceeinbußen führen kann. Wie dennoch bei der Verwendung von Templates eine maximale Anwendungsperformance mittels Technologien wie Caching und Precompiling erreicht werden kann, wird im folgenden Abschnitt erläutert.

Listing 3

<!-- ko if: items().length -->
  <ul data-bind="foreach: items">
    <li data-bind="text: title"></li>
  </ul>
<!-- /ko -->

Templating

In manchen Fällen ist die Darstellung von UI-Strukturen so komplex, dass sie sich nicht oder nur unschön mit einer Liste oder einer Tabelle realisieren lässt. Für solche Einsatzszenarien stehen sowohl in AngularJS als auch in Knockout Templates bereit. AngularJS sieht vor, dass sich diese sowohl in eine eigene Datei auslagern, als auch inline mit einem Skriptblock deklarieren lassen, wie Listing 4 zeigt. Innerhalb des Templates wird die AngularJS-Standardsyntax zum Zugriff auf Eigenschaften verwendet. Zur wiederholten Darstellung des Templates wird ein DIV-Container innerhalb des Controller-Scopes benötigt, der die darzustellenden Daten bereithält. Die Controller-Property, die als Datenquelle für die wiederholte Anzeige fungiert, wird mit dem Attribut ng-repeat=“contact in contacts“ festgelegt. Durch die Angabe ng-include=“‚contact.html'“ lässt sich die Referenz auf das zu verwendende Template definieren. Um auch bei großen Datenmengen eine effiziente Darstellung zu gewährleisten, werden alle Templates, die durch das Attribut type=“text/ng-template“ gekennzeichnet sind, in den AngularJS-Template-Cache geladen. So wird die Anzahl der Zugriffe auf das DOM reduziert. Um Daten aus dem Template-Cache abzurufen, steht die Methode $templateCache.get(‚contact.html‘) bereit. Mit dem Funktionsaufruf $templateCache.put(‚contact.html‘, ‚{{contact.forename}} {{contact.surname}} ‚) können dem Cache neue Inhalte hinzugefügt oder bestehende geändert werden.

Listing 4

<script type="text/ng-template" id="contact.html">
  {{contact.forename}} {{contact.surname}}
</script>
<div ng-controller="ContactController">
  <div ng-repeat="contact in contacts" ng-include="'contact.html'"></div>
</div>

In Knockout stehen gleich zwei Templating-Varianten zur Auswahl: Natives und String-basiertes Templating. Natives Templating ist in Knockout integriert und benötigt keine zusätzlichen Bibliotheken. Diese Technik nutzt HTML-Markup und verwendet die in Knockout gängigen Kontrollflusssteuerelemente wie if und foreach. Listing 5 zeigt, wie Anzeigevorlagen in Verbindung mit dem foreach-Binding eingesetzt werden können. Damit das Template nicht als JavaScript interpretiert wird und Knockout kein Data Binding vornimmt, muss dieses in einen Skriptblock mit dem Attribut type=“text/html“ geschachtelt werden.

Listing 5

<div data-bind="template: { name: 'tile-template', foreach: tiles }"></div>
<script type="text/html" id="tile-template">
  <div data-bind="style: { backgroundColor: color }" >
    <span>Farbcode: </span><span data-bind="text: color"></span>
  </div>
</script>

Um vor oder nach dem Rendering, beziehungsweise nach dem Entfernen von Elementen, Manipulationen vornehmen zu können, stehen die Methoden afterRender, afterAdd und beforeRemove zur Verfügung. Des Weiteren wird String-basiertes Templating unterstützt. Diese Vorgehensweise bedingt das Verwenden von externen Bibliotheken wie jQuery.tmpl oder Underscore.js. Der Vorteil beider Engines liegt darin, dass Templates asynchron mittels Technologien wie AJAX bei Bedarf nachgeladen werden können und nicht Teil des initial geladenen Markups sind. Bei jQuery.tmpl handelt es sich, wie der Name schon vermuten lässt, um eine jQuery-Erweiterung. Entwickler, die bereits Erfahrung mit dieser Template-Engine haben, können ihr vorhandenes Know-how somit in Knockout verwenden. Underscore.js ist eine JavaScript-Bibliothek, die viele nützliche Funktionserweiterungen, wie etwa die Methode _.template(templateString, [data], [settings]), bereitstellt. Sie kompiliert Templates in JavaScript-Funktionen, um ein optimales Rendering zu garantieren. Mit dieser Technologie lässt sich auch bei der Darstellung von großen Datenmengen eine hohe Performance erzielen.

Validierung

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.

Listing 6

<script type="text/javascript">
  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; }});}};
  });
</script>

<form name="form" novalidate>
  <input type="text" ng-model="length" name="length" custom-float />
  <span ng-show="form.length.$error.float">Not valid!</span>
</form>

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.

Listing 7

<script type="text/javascript">
  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});
</script>

<label>Pin: <input data-bind="value: pinVal" /></label>

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.

Mobile Technology

Mobile TechnologyDieser Artikel ist im Mobile Technology erschienen. Mobile Technology ist der Wegbegleiter für alle, die sich professionell mit der Entwicklung für mobile Devices und den Möglichkeiten, die der Markt des Mobile Business und Marketing bereithält, beschäftigen.

Natürlich können Sie das Mobile Technology über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist das Mobile Technology ferner im Abonnement oder als Einzelheft erhältlich.

Aufmacherbild: compare apple to orange white background von Shutterstock / Urheberrecht: Kim Reinick

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -