Mobilecamp im Mai 2014 in Dresden – Vortrag Webapp mit Phonegap und Angular

on under personal
4 minute read

Vor gut einem Monat, am 10.05. und 11.05. fand das Mobilecamp in Dresden statt. Dieses Jahr nahm ich das erste mal teil, auch weil ich im letzten Jahr erst im Nachgang vom Mobilecamp erfuhr. Obwohl es meine erste Teilnahme war, beschloss ich, zusammen mit Peter, eine Session vorzubereiten, da es zeitlich recht gut mit einem Projekt passte. Wie für ein Barcamp üblich, gab es keinen festen Zeitplan was die Planung der Vorträge, sondern am Beginn jedes Tages stellten potenziell Vortragende ihre Session der versammelten Öffentlichkeit vor. Erfolgreich gepitchte Vorträge wurden dann an eine Wand gepinnt. Wenig später starteten dann auch schon die ersten Sessions.

Die 2 Tage zum Mobilecamp waren äußerst interessant und gut organisiert. Bemerkenswert fand ich insbesondere, dass der Einritt nicht nur komplett gratis war, sondern es obendrauf auch noch ein T-Shirt gab und kostenfreie Getränke und Mahlzeiten bereitgestellt wurden. Hier gilt der Dank wohl auch den Sponsoren. Gut fand ich auch die Durchmischung an Teilnehmern und Vorträgen. So gab es nicht nur Entwickler-Vorträge sondern auch Sessions zum Thema Marketing oder Recht. Mit ingesamt 275 Anwesenden auch noch überschaubar. Ich bin gespannt, ob die Zahl dann im nächsten Jahr getoppt werden kann. Ich empfehle auf jeden Fall allen Lesern die schon mal bis hier durchgehalten haben dort hinzugehen :).

Am 2. Tag gab es außerdem eine kleinere Überraschung: Sascha Pallenberg von Mobilegeeks hielt eine spannende Keynote zum Thema China in Bezug auf Innovation und Herstellung von Smartphones. Insbesondere die Hypothese, dass Google mit Android in China ein Problem bekommt, da kaum eines der ausgelieferten Smartphones in China mit den Google Play Services und dem Store ausgeliefert werden, griff. Danaben hatte eine Google Glass zum Ausprobieren im Gepäck und auch ich konnte kurz bevor der Akku den Geist aufgab mal ein paar Minuten durchschauen. Fazit: Nettes Spielzeug, aber noch erkennbar Prototyp (Wird zu heiß, zeitweise sehr träges Menü, Akku!!, Preis).


Vortrag zum Thema Phonegap

Zusammen mit Peter hatten wir uns das Ziel gesetzt, bis zum Mobilecamp die Android Empfehlungsbund-App zu relaunchen. Als Webentwickler hatten wir uns dabei für Phonegap(1) als Grundlage entschieden. Für das Barcamp wollten wir dann unsere Erfahrungen teilen und hielten eine Session zum Thema "App-Entwicklung für Webdevs mit Cordova/Phonegap/Angular". Nach einem – offen gesagt recht unvorbereiteten – Pitch während der Session-Planung haben wir aber dann den Raum doch voll bekommen.

Warum eine WebApp?

Als Webentwickler hatten wir bereits viel Erfahrung mit JavaScript und dem Tooling sowie Debugging von Web-Anwendungen. Die Möglichkeit, später auch eine iPhone oder Windows-Phone App quasi per Knopfdruck rausrendern zu können, erschien äußerst vielversprechend. Für die Funktion der App – eine Job-App – schienen die Möglichkeiten zum Zugriff auf native Funktionalitäten hinreichend und den erwarteten Geschwindigkeitsnachteil gegenüber einer nativen App als hinnehmbar.

Angular.js + Ratchet

Neben Phonegap, was ja eigentlich nur native Funktionen im JavaScript und einen Buildprozess bereitstellt, wählte ich Angular.js als JavaScript-Framework zur eigentlichen Entwicklung der App-Logiken. Das Angular-Ökosystem bietet bereits einige Plugins an, die für die Entwicklung unserer App von Vorteil sind (2). Für die mobile Darstellung nutzen wir bis dato Ratchet, ein Framework von Twitter was die Oberfläche von Android und iPhone in HTML und CSS nachbildet.

Fazit zur Entwicklung

Die Entwicklung mit Angular und Cordova hat viel Spaß gemacht. Durch ein reichhaltiges und vertrautes Ökosystem(3) gelang uns eine zeitlich sehr effektive Entwicklung. Angular erwies sich als angenehme Wahl und äußerst mächtiges Framework (Wo ich auch bis heute nur gefühlt ca. 50% verwende). So konnten wir den gesamte App Source-Code in nur 600 Zeilen CoffeeScript quetschen. Die Limitierungen von Cordova waren uns bekannt und sind uns bisher nicht auf die Füße gefallen :). Das UI-Toolkit Ratchet ist insgesamt aber noch ausbaufähig, insbesondere gab es einige Quirks zwischen verschiedenen Android-Versionen.

Die Slides als auch der Source-Code der App sind auf Github zu finden.


(1) PhoneGap oder Cordova erlaubt es, eine mobile Anwendung prinzipiell für iPhone, Android und vielen weiteren Plattform zu entwickeln. Man verwendet dafür HTML, CSS und JavaScript, a.k.a. WebApp. PhoneGap erlaubt die Nutzung nativer Funktionen, wie Ortung, Kontakte zugriff und Sharing

(2) Automatische Speicherung von Variablen in den LocalStorage, Geolocation, Google-Analytics

(3) Tools wie Weinre, Bower, Phantomjs und die bekannten Browser Inspektoren (Chrome, Firebug) stehen zur Verfügung.