Wer beim Entwickeln seiner nächsten App auf Web Technologien setzt, um diese dann mittels Cordova oder Intel SDK in hybrid Apps für verschiedene Plattformen zu verwandeln, sollte sich das Front-End SDK Ionic ansehen.

Das open source Projekt ist eine Kombination aus CSS Framework und JavaScript UI Library. Es  beinhaltet mobile UI Komponenten, um ein natives Look-and-Feel mit HTML5 und CSS zu erreichen. Für die JavaScript Funktionalitäten verwendet Ionic Angular.js als MVC Framework.

CSS Komponenten

Alle Stylesheets die Ionic mitliefert sind in Sass geschrieben und übersichtlich strukturiert. Durch die Verwendung von Variablen ist es einfach das default Styling an das eigene Design anzupassen. Standardmäßig sind alle Komponenten im iOS Style gehalten. Die Verwendung der fertigen Ionic CSS Klassen hat den Vorteil schnell und einfach ein natives Aussehen der App zu erreichen. Alle üblichen Höhen, Breiten, Schatten, Abrundungen etc. sind bereits definiert, wodurch sich der Entwickler viel Arbeit spart die Komponenten selbst nachzubasteln.

Die fertig gestylten HTML5 Komponenten umfassen:

• Buttons
• Listen
• Formulare
• Checkboxen
• Checkboxen im iOS Switch Style
• Slider
• Selektboxen

Zusätzlich liefert das Framework Icons und ein fertiges Grid System.

JS Komponenten

Doch nicht nur statische Komponenten stellt Ionic zur Verfügung. Bei den JS Steuerelementen wird dem Entwickler vor allem die Schwierigkeit abgenommen, ein natives Look-and-Feel zu kreieren. Denn nicht nur das typische Aussehen, auch das Verhalten der Komponenten und deren Effekte ist wichtig, um die vom Benutzer durch andere Apps gewohnte Usability zu erreichen.

Werden die mitgelieferten Elemente richtig verwendet, ergibt sich dieses Verhalten automatisch. Ein gutes Beispiel dafür ist die Navigationsbar. Das Routing wird in Ionic über so genannte States realisiert. Diese verweisen auf verschiedene Views und stellen das Pendant zu verschiedenen View Controllern im nativen Development dar. Die Definition der States geschieht im Angular Routing Stil:

.state 'mainView',
  url: "/"
  templateUrl: "js/states/mainView.html"

Das Template mainView.html wird also beim Aufruf der root Url so wie beim JS Aufruf des mainView States gerendert.
Wer bereits mit Angular.js vertraut ist kennt das Konzept zu einer View gehörige Controller einfach im Template im Attribut ng-controller anzugeben. Alternativ könnte dieser auch bereits bei der Statedefinition angegeben werden.

Während diese Templates in Angular üblicherweise in ein <ng-view> Element gerendert werden, liefert Ionic ein custom Element namens <ion-nav-view>. Darin wird dann das entsprechende <ion-view> Element je nach State dargestellt (jedes Template das eine View repräsentiert sollte in ein <ion-view> Element gewrapped sein). Hält man sich an diese Ver­schach­te­lung wird automatisch eine Navigationbar erstellt welche Zurück-Button und Titel automatisch richtig setzt.  Das Verhalten eines nativen Navigation Controllers wird genau nachgestellt, inklusive üblichen Slide-Effekt zur nächsten View, wenn sich der State ändert.

Weitere praktische JavaScript Komponenten werden in der Doku genau beschrieben.

Durch die Verwendung von Angular.js können auch alle praktischen Möglichkeiten die das Framework bietet verwendet werden. Two-way data binding, Filter, eigene Factories und viele zeitsparende Direktiven wie ng-repeat sind für die Entwicklung der Webapplikation vorhanden.

Probleme in der Praxis

Abgesehen von den Problemen die bei der Verwandlung von Webapps in hybrid Apps generell bestehen (vor allem Unterschiede in den verschiedenen Plattformen), gibt es ein paar Schwierigkeiten die beim Entwickeln des Webteils mit Ionic auftreten können:

• Datenaustausch zwischen States
  Es gibt mehrere Möglichkeiten Daten zwischen verschiedenen States auszutauschen. Über die URL können Parameter übergeben werden oder die Daten können in eine Variable in einem übergeordneten Scope gespeichert werden. Handelt es sich bei den Controllern die Daten austauschen möchten um Parent- und Childcontroller, kann über Funktionen wie emit() und broadcast() eine Nachricht geschickt werden auf die der jeweils andere Controller hören kann. Eine weitere Möglichkeit wäre die Daten in den Local Storage abzulegen, wodurch beliebig viele Komponenten darauf Zugriff hätten. Für das einfache Weitergeben von temporären Daten erscheinen alle diese Möglichkeiten unzufriedenstellend.
• History
  Nicht immer ist der Aufbau einer App so standardmäßig, dass die Navigationsbar den Zurück-Button immer zur richtigen Zeit anzeigt bzw nicht anzeigt. Das Vorhandensein des Buttons kann manuell eingestellt werden. Gibt es nun mehrere Möglichkeiten um auf den gleichen State zu gelangen und möchte man in einem Fall keinen Zurück-Button (da man beispielsweise vom Flyoutmenü kommt) und in einem anderen Fall doch (da man von einem anderen State zur View gelangt an den ein Zurückgelangen durchaus Sinn macht), muss diese View den Button manuell ein- und ausblenden abhängig vom vorhergehenden State. Sollche Sonderfälle können zwar umgesetzt werden, indem die vorhergegangenen State aus der $ionicHistory herausgelesen werden können und der Controller dann über if Anweisungen unterscheidet. Eine bequeme Möglichkeit für dieses Verhalten wird allerdings nicht angeboten.
• Performance
  Gerade, wenn die Applikation umfangreicher  wird leidet die Performance. Auch wenn die Entwicklung der Smartphones schnell voranschreitet, sind die Prozessoren und Arbeitsspeicher gerade in günstigen Geräten nicht so stark wie in Desktop Computern. Durch die vielen Scopes und Listener die durch Angular.js entstehen, werden komplexere Apps schnell zu anspruchsvoll für diese Smartphones. Spezielle Angular Plug-Ins die das ständige horchen auf Updates der Values wieder unterbinden verbessern die Performance. Das ist aber nicht gerade Sinn und Zweck, die Features eines Frameworks auszuschalten, um es verwenden zu können.

Auch, wenn es in der Praxis in sehr umfangreichen und individuellen Applikationen Schwierigkeiten gibt, die manuell und manchmal umständlicher als gewohnt gelöst werden müssen, kann ich das Framework durchaus empfehlen. Die Kombination von fertigen UI Elementen und Funktionen die speziell für mobile Apps kreiert wurden und die komfortable Programmierweise von Angular.js, ermöglichen zeitsparend Webapps zu entwickeln, die für den Benutzer nativen Applikationen sehr ähnlich sind. Wer nun neugierig geworden ist kann sich auf der Ionic Website das Projekt runterladen und in der Doku alle Komponenten und Funktionen finden die das Framework bietet.