Frontend-Developer, JavaScript, AngularJS


Veröffentlicht:
Über JavaScript | AngularJS | Mobile | Ionic

Hybride Mobile Apps mit Ionic bauen - Talk auf der IPC/WTC

Da auch mein zweiter Session-Vorschlag für die WebTech Conference 2014 angenommen wurde hatte ich nun "den Salat" und musste zwei Vorträge vorbereiten und halten - was natürlich eine gute Sache war.

So sprach ich dann am Mittwoch, 29.10.2014, auf der Konferenz zusätzlich über das Ionic Framework. Der Titel meiner Session lautet "Almost native" - Mit dem Ionic Framework hybride Apps für Mobile bauen und war inhaltlich ein Überblick über die Features dieses UI-Framework.

Nach dem ich die wichtigsten allgemeinen Infos zu Ionic geliefert hatte - unter anderem, dass Ionic mit Libraries und Frameworks wie jQuery Mobile, Sencha Touch oder Kendo UI verglichen werden kann - ging ich der Reihe nach auf die Features und Besonderheiten von Ionic ein. Folgende Themenkomplexe habe ich dabei behandelt:

1. Ionic als Kommandozeilen-Tool

Hier habe ich vor allem die Verbindung zu Apache Cordova hergestellt, der Plattform die von Ionic favorisiert wird um am Ende des Tages aus HTML5-Anwendungen native Mobile-Apps zu bauen.

2. Ionic als CSS-Framework

Mit dem Ionic-CSS kann man typische Mobile-Views stylen. Anhand eines kleinen Beispiels habe ich das deutlich gemacht. Außerdem gab ich Hinweise darauf, dass man mit Sass-Variablen und -Mixins - der Core des Ionic-CSS ist in Sass geschrieben - das Standard-Theme anpassen kann.

3. Ionic als Bibliothek für Mobile-UI-Komponenten

Dieses Thema war inhaltlich gesehen der Hauptteil meines Vortrages. Zunächst habe ich herausgestellt, dass die UI-Komponenten von Ionic Angular-JS-Direktiven sind, denn unter der Haube von Ionic läuft AngularJS. Darauf aufbauend zeigte ich einige der wichtigsten UI-Komponenten für Mobile-Views (Header, Tab Navigationen, Listen und Formulare) anhand von kleinen Sample-Apps die ich auch auf meinem Phone laufen ließ.

4. Ionic als JS-Application-Framework für Mobile

Da Ionic auf AngularJS als Application-Framework aufsetzt habe ich deutlich gemacht, dass man sich auch grundsätzlich mit Angular beschäftigen muss um mit Ionic tatsächlich gut entwickeln zu können. Außerdem habe ich Werbung dafür gemacht auch beim Development von hybriden Mobile Apps auf eine skalierbare App-Struktur (Module/Sektionen) zu achten und bestimmte Workflows wie das Testen, Builden und Releasen zu Automatisieren - zum Beispiel mit Grunt. Ich beließ es aber nicht bei Appellen, sondern zeigte konkret vor dem Hintergrund einer Sample-App was ich genau darunter verstehe.

Ausblick und Schluss

In der Form eines Ausblicks erklärte ich zum Schluss des Talks noch die Verwendung von bekannten Cordova-Plugins. Mit diesen Plugins wird eine JavaScript-API zur Verfügung gestellt, mit der man aus der hybriden App heraus Zugriff auf die Eigenschaften und Hardware eines Mobile Device bekommt, wie z.B. auf Netzwerk-Informationen oder auf die Kamera. Und damit man im Fall von Ionic diese Zugriffe gemäß des Angular-Ways programmiert, zeigte ich ngCordova, eine Sammlung von Angular-Extensions speziell für Cordava. Hierzu führte ich kleine Beispiel-Apps auf meinem Smartphone vor.

Die Slides und den Sample-Code zu meinem Ionic-Talk findet Ihr auf GitHub unter https://github.com/nosch/web-tech-conference-2014/tree/master/Ionic.