AngularJS und Knockout im Vergleich

SPA im Doppelpack
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. 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

<!–

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -