Native mobile Applikationen zu erstellen, ist aufgrund der verschiedenen Plattformen wie iOS oder Android nicht unkompliziert. Die Notwendigkeit von unterschiedlichen Versionen für jede Plattform macht die Entwicklung zeitaufwendig. Wäre es nicht ein enormer Vorteil, wenn man relativ einfach auf Grundlage einer einzigen Codebasis jede mobile Plattform bedienen könnte? Genau dies ermöglicht das Zusammenspiel von Ionic, AngularJS und ngCordova.

Was ist Ionic?

Ionic ist ein Frontend-Framework, das mit einem eigenen Kommandozeilentool ausgestattet ist. Der Frontend-Stack besteht aus einem modularen CSS-(SASS)-Framework, das im Stil von Bootstrap eine Palette an vorgefertigten Komponenten und eine Menge an Basisfunktionen für Apps liefert, zum Beispiel Off­Canvas-Menüs. Syntactically Awesome Style Sheets wird mit einem Compiler in übliches CSS übersetzt. Es ermöglicht dem Entwickler, ein modulares CSS zu schreiben, in dem Variablen, Methoden und Rechnungen innerhalb von SASS zur Verfügung stehen.

Ionic führt seine Animationen mit minimalen DOM-Zugriffen aus. Dabei verwendet es CSS3-Transitions, die von der Hardware beschleunigt werden. Diese Vorgehensweise verbessert die Performance drastisch. Gleichzeitig werden alle Browser inkompatibel, die CSS-Transitions nicht unterstützen. Geeignet sind UIWebView für iOS 6+ und Android 4+. Windows Phone und FirefoxOS sind zurzeit noch nicht kompatibel.

Das Kommandozeilentool von Ionic verpackt den Code als App, startet gegebenenfalls virtuelle Geräte für Simulationen und vereinfacht so die Verwaltung der verschiedenen Plattformen wie etwa iOS, Android und Windows. Dabei greift es auf Cordova und die Entwicklerkits der Hersteller zu.

ngCordova

Das Apache-Projekt Cordova alias Phonegap hat sich als beliebtestes Deployment-­ und Plattform-Tool positioniert. Es bietet eine Bibliothek an, um via JavaScript auf die Hardware des Smartphones zuzugreifen. Mit Cordova können Entwickler auf Basis von JavaScript­, CSS­ und HTML­-Code mobile Apps erzeugen.

Um die Funktionen von Cordovas JavaScript-Bibliothek zu nutzen, könnte man diese einfach global in die mit AngualrJS erstellten Anwendungen – an das window-Objekt – einhängen und verwenden. Doch widerspricht dieses Prinzip der globalen Variablen der Architektur von AngularJS. ngCordova nimmt sich dem an, platziert sich „auf“ der Bibliothek von Cordova und macht so alle Funktionen per Dependency Injection (DI) von AngularJS verfügbar. Durch die DI können dann einzelne Funktionen in ihre Komponenten injiziert und verwendet werden. Das erleichtert unter anderem das Unit-Testing, in dem beispielsweise die Services vorgetäuscht (mock) werden, um Hardware-Zugriffen auch ohne Smartphone-Umgebung zu ermöglichen.

Wie arbeiten AngularJS, Ionic und ngCordova nun zusammen? Jedes Framework hat eine bestimmte Zuständigkeit. Ionic arbeitet ausschließlich für die Benutzeroberfläche. Dabei stellt es vorgefertigte CSS-Komponenten und User-Interface-Funktionen über Direktiven oder Services zur Verfügung, die dann im HTML als eigene Elemente und Attribute aktiviert oder per Dependency Injection in AngularJS-Komponenten injiziert und verwendet werden können. AngularJS bietet die Infrastruktur beziehungsweise Architektur, um skalierbare Webanwendungen zu entwickeln. Und ngCordova schließlich sorgt für den Zugriff auf die Smartphone­-Hardware.

Tutorial für eine klassische To-do-Applikation

Im folgenden Abschnitt wird eine typische To-do-App implementiert, in der sich Aufgaben erstellen lassen. To-dos bestehen aus einem Titel und können als „erledigt“ markiert werden, mit einer Vibration als Feedback. Im Beispiel kommen nur vorgefertigte Styles zum Einsatz, ohne Anpassungen via SASS.

Die App steht in meinem GIT­Repository zum Download bereit. Bevor es mit der Entwicklung losgehen kann, müssen alle benötigten Abhängigkeiten vorhanden sein. Um Ionic und Cordova automatisch zu installieren, greift man auf NodeJS und das Dependency-Management npm zurück. Nach der Installation geben wir Folgendes in die Kommandozeile ein:

$ npm install - g cordova ionic

Damit sind Ionic und Cordova fertig eingerichtet und es kann losgehen. Mit Hilfe von Ionic wird nun ein Projekt eröffnet. Es gibt die Möglichkeit, sich anhand eines vorgefertigten Templates ein lauffähiges Projekt anlegen zu lassen, das zum Experimentieren genutzt werden kann. Das folgende Kommando erstellt ein leeres (blank) Projekt:

$ ionic start toDoApp blank