JavaScript MVC Frameworks - Teil 2

Ich muss zugeben, dass ich AngularJS im Vorfeld meiner Recherchen schon privat und beruflich eingesetzt habe, von daher ist ein Vergleich nicht ganz fair und ich bin vielleicht etwas voreingenommen ? Die mit AngularJS umgesetzte Konzertanwendung (siehe Teil 1) soll demnach als eine Art “Golden Master” fungieren, um die grundsätzliche Machbarkeit zu zeigen. Um es vorwegzunehmen, ich mag AngularJS recht gerne, habe auch in meinem Blog ein wenig über die guten und schlechten Seiten geschrieben.

Die Konzepte

Die Kernidee von AngularJS ist es, das Vokabular von HTML so zu erweitern, dass dynamische Webanwendungen damit elegant umsetzbar sind. Soweit der Claim auf angularjs.org. Angular ermöglicht es auch dieses Vokabular eigenhändig zu erweitern, so dass beispielsweise ein <guitar />-Tag denkbar wäre, was der Lesbarkeit der Anwendung zu Gute kommt. Richtig trivial ist dies allerdings nicht.
Vorweg gesagt: Wenn man die Arbeit mit JQuery kennt, muss man sich ein wenig umgewöhnen, man kommt selten bis nie mit dem DOM in Berührung und AngularJS bringt viele eigene Ideen mit und arbeitet generell auf einem höheren Abstraktionsniveau.

AngularJS ist ein clientseitiges MVC Framework, wobei die Entwickler sich bewusst aus dem Begriffswirrwarr rund um MVC vs. MVP vs. MVVM etc. rausgehalten haben und ihren Ansatz als Model View Whatever (MVW) bezeichnen.
Nehmen wir doch einmal die Bestandteile von Angular anhand dieses Patterns auseinander:
Als View-Technik setzt Angular auf einen an JSP erinnernden Templatemechanismus, der clientseitig interpretiert wird. In diesen Templates werden Daten (also eigentlich das ViewModel) nach dem Muster referenziert. Angular verwendet hierfür einen 2-Wege-Databinding-Mechanismus, wobei auf (View-)Mode Seite ein einfaches Plain-Old-JavaScript-Object verwendet wird.

Siehe hierzu auch: https://github.com/holgergp/concertAngular/blob/master/app/views/main.html.

Zu einer View gehören immer ein oder mehrere Controller (ja, eigentlich das ViewModel). Dieser enthält die View-spezifische Logik und die zu bindenden Daten. Diese werden deklarativ (u.a.) im Template referenziert. (https://github.com/holgergp/concertAngular/blob/master/app/index.html#L36)

<div ng-include="'views/main.html'" ng-controller="MainCtrl"></div>
Beachtenswert ist, dass MainCtrl eine einfache JavaScript Funktion ist.
Die zu bindenden Daten und Funktionen sind nach einem bestimmten Schema zu notieren, damit die View auf diese zugreifen kann: Sie werden dem sogenannten Scope zugeordnet, der einem Controller zugeordnet ist und das logische Bindeglied zwischen View und Controller darstellt. Siehe hierzu auch https://github.com/holgergp/concertAngular/blob/master/app/views/main.html#L9
Hier referenzieren wir die loveConcerts, die unter dem Scope hinzugefügt wurden.
Controller und die zugehörigen Scopes können auch geschachtelt werden:

Hierbei erbt der Scope des inneren Controllers Ctrl2 prototypisch  die Eigenschaften des Scopes des äußeren Controllers. Dies ist zunächst ungewöhnlich, stellt aber ein äußerst mächtiges Konzept dar. Siehe hierzu auch folgenden Artikel https://github.com/angular/angular.js/wiki/Understanding-Scopes
Neben den Controllern kennt Angular noch das Konzept der Services. Diese sind dafür gedacht, viewlose Logik oder auch Remoting abzubilden. Diese sind dann sehr leicht testbar. Auch Services sind einfache Funktionen.
Angular verwendet das Prinzip der Dependency Injection, um beispielsweise Zugriff auf einen Service aus einem Controller zu erlangen, die Syntax hierfür ist gewöhnungsbedürftig, das Prinzip klappt aber wunderbar.
Testen wird bei der Entwicklung von AngularJS sehr groß geschrieben. Es ist sehr einfach und schnell möglich, für Controller und Services Tests zu schreiben. Auch ist die Dokumentation voller guter Beispiele.
Wie man schon erahnen kann, gibt Angular mit den besagten Konzepten einiges an Struktur vor, das kann gut oder schlecht sein. Man hat schon Einiges zu lernen, allerdings habe ich die Lernkurve als recht angenehm empfunden, man muss nicht alle Konzepte von Anfang an verstanden haben, um erste Erfolge zu erzielen.

Ich habe hier die Konzepte von AngularJS nur grob skizziert, falls Sie Interesse an einem tiefergehenden Tutorial haben, kann ich AngularJS.de sehr empfehlen.

Das Ergebnis

Aber kommen wir zur Konzertanwendung. Die Sourcen sind hier zu finden: https://github.com/holgergp/concertAngular

Ich verwende einen Controller MainCtrl

In dieser Zeile kann man auch die etwas unglückliche Syntax für die Dependency Injection sehen. Um einer möglichen Minifizierung entgegenzuwirken, muss ich die Referenz auf den 'concertDueDateService' zweifach angeben.

Der Controller enthält die drei Listen für die Konzertarten (allConcerts, loveConcerts, maybeConcerts), in einer echten Anwendung käme dies wahrscheinlich von einem Server. Auch die Logik für das Hinzufügen und Löschen von Konzerten ist hier definiert.

Um ein Konzert entsprechend seiner Fälligkeit einzufärben und das Datum zu formatieren, benötigen wir die Referenz auf den besagten Service. Dieser ist zu finden unter: https://github.com/holgergp/concertAngular/blob/master/app/scripts/services/concertDueDateService.js

Die Drag and Drop Funktionalität wird über die Third Party Bibliothek ngDragDrop umgesetzt.

Das Template ist dann recht einfach: Drei Bereiche für die Listen und ein Eingabebereich. Einzig die etwas wortreiche Syntax für das Drag und Drop verstellt den Blick etwas.

Die Anwendung war für mich recht schnell umsetzbar, da ich schon ein wenig Vorkenntnis hatte. Yeoman funktioniert hier meine Ansicht wunderbar als Bootstrap Tool (verglichen mit https://github.com/angular/angular-seed).

Bower ist hier eine schöne Sache für die Verwaltung der clientseitigen Abhängigkeiten. Es ist aber nicht zwingend notwendig. Schön ist allerdings das Zusammenspiel mit grunt, um Abhängikeiten in der index.html nicht händisch verwalten zu müssen.

Fazit

Mein Fazit für Angular und die Konzertanwendung. Ich verwende hier die Skala + (gut), 0 (ok), – (nicht so gut)

• Einarbeitung 0
  • Wie bereits erwähnt, ist etwas Zeit dafür nötig. Ist aber sehr gut machbar.
• Wartbarkeit +
  • Durch die vielen Strukturelemente sollte jeder Entwickler mit Angular Background diese Applikation warten können.
• Lassen sich auch anspruchsvolle Anforderungen umsetzen? +
  • Es gibt sehr viele Third Party Erweiterungen, die z.B. Drag and Drop oder auch Endless Scrolling einfach einbinden lassen ohne dies selber entwickeln zu müssen.
• Wie gut lässt sich die Anwendung testen? +
  • Controller und Services lassen sich super testen. Für UI Tests kann man Angular eigene Mittel wie Protractor verwenden oder aber auch Selenium.
• Wie groß ist die Community? +
  • Mittlerweile eine sehr große Community.
  • Ein wenig Unruhe ist in der Community, da mit Angular 2.0 ein womöglich eine Angular 1.x inkompatible Version in der Entwicklung ist.
• Wie gut ist die Dokumentation? 0
  • Gut und umfangreich, man wird als Anfänger allerdings oft vom Angular Jargon ein wenig abgeschreckt.

JavaScript MVC Frameworks - Ein Vergleich (JavaScript MVC Frameworks, Teil 1)
AngularJS (JavaScript MVC Frameworks, Teil 2)
EmberJS (JavaScript MVC Frameworks, Teil 3)
KnockoutJS (JavaScript MVC Frameworks, Teil 4)