© saicle/Shutterstock.com
Zur nativen App mit Webtechnologien

App-Entwicklung mit JavaScript


In diesem Jahr feierte das iPhone seinen 7. Geburtstag. Apples Flaggschiff hat einen Stein ins Rollen gebracht, der noch lange nicht an Geschwindigkeit verloren hat. Jeder braucht Apps – und das ist auch für uns Webentwickler gut. Also greifen wir auf Phone­Gap, Sencha Touch oder jQuery Mobile zurück. Dass es mithilfe von Titanium Mobile auch anders geht, möchte Ihnen dieser Artikel näher bringen.

Keeping the Web native

Wenn man als Webentwickler vor die Aufgabe gestellt wird, eine Handy- oder Tablet-App zu programmieren, möchte man am liebsten seine vorhandenen Kenntnisse nutzen. Als Erstes wird man bei der Recherche auf Phone­Gap und Apache Cordova stoßen. Diese Werkzeuge ermöglichen es, native Apps mithilfe von HTML, CSS und JavaScript zu programmieren. Hiermit ist die erste App schnell gebaut und auf dem eigenen Gerät installiert. Doch macht sich in vielen Fällen die erste Enttäuschung breit. „Native App“ bedeutet nun einmal leider nicht automatisch auch „native Performance“. Doch wie erreicht man mit Webtechnologien eine native Performance? Hier kommt Titanium Mobile ins Spiel.

Es geht auch ohne WebViews

Wie unterscheidet sich also Titanium Mobile von anderen Mobile-App-Frameworks? Grundsätzlich schreibt man Apps mit Titanium Mobile in JavaScript. Sowohl die Applikationslogik als auch das User Interface werden programmatisch in JavaScript erzeugt. Wird die App auf dem Gerät ausgeführt, wird der JavaScript-Code vom Titanium SDK zur Laufzeit interpretiert und durch native Proxy-Objekte ausgeführt. Das bedeutet zum Beispiel, dass ein Button unter Android und iOS jeweils seine native Java- bzw. Objective-C-Komponente nutzt und nicht nur durch eine WebView mithilfe von HTML und CSS dargestellt wird. So kann trotz einer nativen Ausführung des Codes der Großteil an Quellcode für Android als auch iOS gleichermaßen genutzt werden. Zur Interpretation des JavaScript-Codes wird für iOS JavaScriptCore genutzt, Android greift auf Google’s V8 JavaScript Engine zurück.

Das SDK bietet neben den gängigen UI-Komponenten Zugriff auf so gut wie alle nativen iOS- und Android-Schnittstellen. Hierzu zählen unter anderem:

  • Native MapViews

  • Kamera-API

  • Sound-API

  • Kalender-API

  • Beschleunigungssensor

  • SQLite-Datenbanken

  • NFC-API

Das Titanium Mobile SDK steht aktuell in der Version 3.3.0 zum kostenlosen Download [1] bereit und ist zudem als Open-Source-Projekt unter der Apache-2-Lizenz bei GitHub [2] zu finden.

Zusätzlich zum eigentlichen SDK kommt Titanium mit einer auf Eclipse basierenden IDE namens „Titanium Studio“ inklusive Debugger daher. Da Appcelerator, die Firma hinter Titanium, im Jahr 2011 Aptana aufgekauft hat, basiert Titanium Studio auf der Webent­wicklungs-IDE Aptana. Die Nutzung von Titanium Mobile ist vollkommen kostenlos. Appcelerator rundet die Titanium-Plattform mit einer eigenen Cloud-Lösung namens „Appcelerator Cloud Services“ ab, welche entsprechend gut in das SDK integriert ist.

Meine erste eigene App

Dreh- und Angelpunkt von Titanium Mobile ist das JavaScript-API, mit dem die Brücke zwischen Java­Script- und nativem Code geschlagen wird. Diese gilt es also zunächst einmal zu beherrschen und zu verstehen. Glücklicherweise gibt Appcelerator den Entwicklern eine gute Dokumentation, ein hilfreiches Wiki und ein Q&A-System an die Hand. Doch auch ohne sich nun stundenlang mit dem API vertraut zu machen, ist es schnell und einfach möglich, eine erste eigene App zu schreiben.

Alle verfügbaren API-Methoden werden in einem globalen Objekt zur Verfügung gestellt. Dieses Objekt ist sowohl unter dem Namen „Titanium“ als auch in der Kurzform „Ti“ verfügbar (Listing 1).

Listing 1: Hallo Welt in Titanium Mobile

// Erzeugt ein "Window"-Objekt, welches als Grundlage nahezu aller Applikationen// benötigt wird var win = Titanium.UI.createWindow({ backgroundColor: 'white' }); // Auch über die Kurzform "Ti" ist das API aufrufbar var label = Ti.UI.createLabel({ text: "Hallo Welt" }); // Setter, der nach der eigentlichen Initialisierung genutzt werden kann label.color = "red"; // Bindet ein Click-Event auf das Label label.addEventListener("click",function(e) { alert("Hallo! "); }); // Fügt das Label als Kindelement in die View-Hierarchie win.add( label ); // Öffnet die Applikation win.open();

Ziemlich cool, oder? So kann man bereits nach wenig Einarbeitungszeit die ersten Ergebnisse hervorbringen und seine App-Ideen als Protot...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang