Mobile App – vor lauter Frameworks erschlagen

Die letzte Phonegap-App haben wir noch mit JQuery-Mobile erstellt. Die Architektur dahinter mussten wir noch selber erstellen.

Damals stellten wir uns noch die Frage, wie der Code organisiert werden soll, ohne mit Javascript in das Spaghetti-Code-Anti-Design-Pattern zu fallen und wir haben dann den Code mit Javascript Modulen mit einer MVC Architektur strukturiert.

Heute stellt sich diese Frage nicht mehr.
Es gibt tolle und sehr beeindruckende Frameworks, welche die Code-Struktur vorgeben. Im Moment scheinen die folgenden Frameworks state-of-the-art zu sein.

  • AngularJS
  • ngCordova
  • Ionic

Alles klar – oder doch nicht?
Zuerst einmal war ich erschlagen. Die Frameworks scheinen sich zwar zu ergänzen, teilweise aber auch zu überlappen.

Wie spielen die Frameworks zusammen?

AngularJS

Das zentrale Framework, welches alles steuert ist AngularJS von Google.
AngularJS ist ein Zusammenspiel von Direktiven im HTML Code und Javascript. Im HTML Code werden die Stellen gekennzeichnet, welche eine Rolle wie zum Beispiel View oder Controller übernehmen:

In diesem Code-Beispiel wird mit ng-controller der Controller für den Body bestimmt, was einer Funktion in AngularJS Modul entspricht. Man erkennt auch, dass mit ng-repeat eine  Art for-each à la AngularJS gemacht wird und dass die Variablen in den doppelten, geschweiften Klammern stehen.

AngularJS ist mächtig. So einfach die soeben beschriebenen Grundsätze sind, so abgefahren sind die manchmal die Details in der der Syntax. Zwischen Code lesen/verstehen und selber schreiben sind wieder einmal Welten.
Es gibt genügend gute Tutorials zu AngularJS. Wer sich damit befassen möchte, sollte allerdings ein gutes Grundwissen in der Programmierung mitbringen.

  • Javascript Module
  • MVC Architektur
  • Unit-Testing und Mocking
  • Dependency Injection und Inversion of Control

Wem diese Dinge nichts sagen, wird mit AngularJS grosse Mühe haben.

 

ngCordova

ngCordova verstehe ich als Angular-Cordova-Bridge , welche zahlreiche Cordova Plugins mit der AngularJS Syntax aufruft. Im Moment werden an die 50 Plugins unterstützt.
Somit können die Cordova Plugins in einem AngularJS Controller aufgerufen werden. Etwas mühsam und undurchsichtig ist die Anforderung, dass die Plugin-Calls im deviceready untergebracht werden müssen. Das soll sich aber bald ändern.

 

Ionic

Ionic ist eine UI orientierte Erweiterung zu AngularJS, welches zwingend mit Ionic installiert sein muss. Das heisst, zwischen den Ionics Direktiven (für View) kommen die AngularJS Direktiven (für Controller und Model)

 

 

 Fazit

Für meine nächste Cordova App kommen die drei vorgestellten Frameworks zum Einsatz. Diese garantieren eine saubere Architektur. Schnell erkennt man die Zusammenhänge. Die Details mit der Syntax sind eher mühsam. In den folgenden Beiträgen werden ich meine Aha-Erlebnisse dokumentieren.

 

 

Urs Verfasst von: