Vorheriger Artikel Nächster Artikel

Frameworks für mobile Web-Apps: So gelingt die Plattform-Unabhängigkeit

2

Aus dem
t3n Magazin Nr. 29

09/2012 - 11/2012

Frameworks für mobile Web-Apps: So gelingt die Plattform-Unabhängigkeit

DHTMLX Touch mit „Visual Designer“ und „Touch UI Inspector“

Neben diesen vergleichsweise einfachen UI-Frameworks bietet der Markt auch umfangreichere Lösungen, die mehr Möglichkeiten bieten und sich als ganzheitlicher Entwicklungs-Stack betrachten lassen. Dazu zählt etwa die freie und quelloffene Lösung „DHTMLX Touch” [6], die mit iOS, Android und Blackberry kompatibel ist.

Neben vorgefertigten UI-Widgets, Steuerelementen, Ajax-Funktionen, Animationen und Effekten, die auch bei jQuery Mobile, Kendo und Konsorten enthalten sind, bietet das Produkt eine Reihe nützlicher Komponenten, die die Implementierung maßgeschneiderter Business-Apps beschleunigen können. Dazu zählen zum Beispiel eine objektorientierte Syntax, die die Erstellung größerer Systeme erleichtern soll, Data-Storage und serverseitige Funktionen sowie weitere Werkzeuge wie der „Visual Designer” und das Debugging-Programm „Touch UI Inspector”.

The M-Project: Ganzheitliches App-Framework aus Deutschland

Ein weiteres ganzheitliches App-Framework ist „The M-Project” [7]. Das Projekt wurde ursprünglich von der deutschen Softwareschmiede M-Way Solutions aus Stuttgart ins Leben gerufen und wird jetzt von Panacoda als kostenlose Open-Source-Lösung angeboten. Die Plattform baut auf bewährte Tools aus der Community, darunter Node.js, Modernizr und das bereits angesprochene UI-Framework jQuery Mobile.

Dank professioneller Eigenschaften wie einer MVC-Architektur („Model-View-Controller”) und Internationalisierung unterstützt es die Entwicklung anspruchsvoller Projekte für iOS, Android, BlackBerry und Windows Phone. Mit „Espresso” steht sogar ein vielseitiger Helfer bereit, der als Test-Server und Build- beziehungsweise Deployment-Tool im Projektalltag wertvolle Dienste leisten kann.

Sencha Touch 2: HTML5-Framework als Alternative

Auch „Sencha Touch” [8] fällt in die Kategorie ganzheitlicher Plattformen. Aktuell in der Version 2.1 verfügbar, gilt es als eines der populärsten und beliebtesten HTML5-Frameworks für mobile Web-Apps überhaupt. Unterstützt werden allerdings nur die üblichen Verdächtigen: iOS, Android und Blackberry.

dms 035e6cc69a4e1626f5088d6ef31b71b8
Die populäre Social-News-App „Paper.li“ zeigt eindrucksvoll, dass Sencha Touch professionelle Ergebnisse liefern kann.

Die aus Kalifornien stammende Plattform verfügt über native APIs für die Interaktion mit dem Betriebssystem, modulare UI-Widgets und Media-Komponenten. Eine Reihe leistungsfähiger Entwickler-Tools, die sich in verschiedene Entwicklungsumgebungen integrieren lassen, sowie Cloud-Services, die bei der Implementierung, Bereitstellung und Distribution mobiler Web-Apps helfen, runden das Angebotsspektrum der Plattform ab.

Damit versucht sich Sencha als umfangreiche HTML5-Alternative zu den ganzheitlichen Entwicklungsumgebungen von Apple, Google und RIM zu positionieren. Allerdings sind die weiterführenden Sencha-Produkte im Gegensatz zu jenen Werkzeugen, die von den Herstellern der Betriebssysteme angeboten werden, kostenpflichtig. Das Framework an sich ist aber quelloffen und kostenfrei.

Nativ und webbasiert: Titanium Mobile

Eine leistungsstarke Sencha-Touch-Alternative bietet die Firma Appcelerator aus Atlanta mit ihrem Framework „Titanium Mobile” [9]. Dabei wird wie üblich mit HTML5, JavaScript und CSS3 entwickelt. Der entscheidende Unterschied zur Sencha-Plattform besteht darin, dass Titanium-Anwendungen auf dem Endgerät nativ übersetzt werden.

Der Clou: Die nativen APIs der unterstützten Betriebssysteme – über 5000 sollen es sein – werden in eine einheitlichen, auf JavaScript basierenden Abstraktionsschicht abgekapselt. Damit können Entwickler auf native Geräte-Eigenschaften wie eingebaute Kameras, Systembenachrichtigungen oder Beschleunigungssensoren zugreifen. Zur Laufzeit wird der JavaScript-Code auf der jeweiligen Plattform interpretiert und Funktionsaufrufe werden an passende Module delegiert, die sie dann nativ umsetzen. Das Framework stellt die Benutzerschnittstellen anhand echter nativer Komponenten zusammen. Selbst native 2D- und 3D-Animationen seien mithilfe von JavaScript realisierbar, so der Anbieter.

dms e221c8e771ee3fcb26921e906a6364a5
Die umfangreiche Titanium-Plattform im Überblick.

Der Haken liegt in der Kompatibilität. Diese komplexe Cross-Compiling-Technik schafft Titanium nur mit iOS und Android. Auch der Einarbeitungsaufwand ist nicht zu unterschätzen.

PhoneGap

Das beste aus zwei Welten verspricht auch „PhoneGap” [10], inzwischen von Adobe übernommen. Das unter dem Namen „Cordova” als Apache-Projekt fortgeführte Projekt ermöglicht es, mobile Web-Apps als native Anwendungen zu deployen. Anders als bei Titanium Mobile findet hier allerdings keine Code-Übersetzung statt. Die HTML-Seiten, aus denen die App besteht, werden lediglich in native Web-Ansichten verpackt. Die Performance-Probleme, mit denen Web-Apps zu kämpfen haben, bleiben also bestehen.

Mit PhoneGap lassen sich so beliebige Web-Apps – auch solche, die mithilfe von jQuery Mobile, Kendo oder selbst mit Sencha erstellt wurden – unkompliziert in native verpacken. Das Deployment von PhoneGap-Apps war bis vor kurzem ziemlich aufwändig, da man für jede zu unterstützende Plattform spezielle Tools benötigte. Mittlerweile ist das dank des PhoneGap-Build-Services einfacher: Anstatt sich durch verschiedene Compiler, SDKs und Entwicklungsumgebungen zu kämpfen, wird die Web-App einfach hochgeladen und in der Cloud kompiliert. Als Ergebnis erhalten Entwickler eine fertige native App zurück.

Gemeinsam haben Titanium, Sencha und PhoneGap eine einheitliche JavaScript-API für den Zugriff auf Hardware und Funktionen des Betriebssystems. Gegenüber der Konkurrenz kann PhoneGap aber vor allem durch seine große Plattformunabhängigkeit punkten. Mit iOS, Android, Blackberry, WebOS, Windows Phone 7, Symbian und Bada unterstützt die Software mehr Plattformen als Titanium – und als die meisten anderen .

Fazit

Aufgrund der unterschiedlichen Konzepte und Lösungsansätze, die jedes Framework mit sich bringt, ist die Frage nach der passenden Lösung alles andere als trivial. Erschwerend kommt hinzu, dass die Entscheidung vom jeweiligen Einsatzszenario und von diversen projektspezifischen Faktoren abhängt:

  • Welche Plattformen sollen unterstützt werden?
  • Soll die App in den App-Stores angeboten werden?
  • Sind Hardwarezugriffe ein Muss?
  • Wie soll die Oberfläche aussehen?

Fragen wie diese helfen dabei, die Ziele, die die App erfüllen soll, und die Anforderungen, die an sie gestellt werden, möglichst eindeutig zu definieren. Das macht es einfacher, unpassende Lösungen auszufiltern und zur richtigen Antwort zu gelangen. Wer etwa unbedingt eine native Oberfläche implementieren möchte, wird sich Kendo UI Mobile oder Titanium näher anschauen. Ist ein Zugriff auf die eingebaute Kamera ein Muss, so fallen einfache UI-Frameworks wie jQuery Mobile raus.

In jedem Fall ist der Einarbeitungsaufwand nicht zu unterschätzen. Ein neues Framework zu erlernen, erfordert Zeit. Vor allem bei ganzheitlichen Plattformen wie Sencha Touch, Titanium oder The M-Project müssen Web-Entwickler viel Neues lernen. Wenn man also nur eine kleine App realisieren möchte, wird man eher auf die leichtgewichtigen UI-Frameworks zurückgreifen.

Denn trotz aller Unterschiede zwischen den verschiedenen Frameworks: Sie alle haben das Ziel gemein, Web-Entwickler dem großen Traum von Plattformunabhängigkeit einen Schritt näher zu bringen. Auch in der mobilen Welt.

Links und Literatur

Softlink 3163
  1. 1 http://jquerymobile.com/
    jQuery Mobile
  2. 2 http://jqmobi.com/
    jqMobi
  3. 3 http://joapp.com/
    Jo-HTML5-Framework
  4. 4 http://www.winktoolkit.org/
    Wink Toolkit
  5. 5 http://www.kendoui.com/
    Kendo UI Mobile
  6. 6 http://dhtmlx.com/touch/
    DHTMLX Touch
  7. 7 http://the-m-project.org/
    The M-Project
  8. 8 http://www.sencha.com/products/touch/
    Sencha Touch
  9. 9 http://www.appcelerator.com/platform
    Titanium Mobile
  10. 10 http://phonegap.com/
    PhoneGap
2
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
2 Antworten
  1. von Jemand am 10.01.2013 (07:26Uhr)

    Habe die meisten der hier besprochenen Frameworks getestet und mich für Appcelerator Titanium entschieden. Nach mehreren erfolgreicher Apps auch nicht bereut.

    Antworten Teilen
  2. von HZprojektmensch am 11.03.2014 (10:00Uhr)

    Neben den ScrumButs wird der Einsatz von Scrum immer wieder spannend, wenn mit "klassischem Projektmanagement" gesteuerte Vorhaben auf Scrum-Teile treffen. Wir erleben das immer häufiger, da sich Scrum etwa im Softwarebereich super schlägt, im Hausbau oder in einer zeitpunktgesteuerten Kampagne schwer tut. Dann gilt es die beiden Ansätze zu integrieren, was etwa über Meilensteine als Übergabe an einen Scrum-Projektteil und zur Abnahme des Produkts gelingt.

    In "Hausbau mit Software: Scrum und-oder klassisch?" (http://blog.projektmensch.com/2014/02/06/hausbau-mit-software-scrum-und-oder-klassisch/) haben wir dazu eine Aufgabenstellung beschrieben. Feedback erwünscht!

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Aktuelles aus dem Bereich Apps
OpenStreetMap-Material für deine iOS-App: Mit Mapbox GL zur individuellen Karte
OpenStreetMap-Material für deine iOS-App: Mit Mapbox GL zur individuellen Karte

Mapbox bietet mit dem Framework Mapbox GL eine neue Lösung für iOS-Entwickler, Karten in ihre Apps zu integrieren. Wir stellen euch den Ansatz vor. » weiterlesen

Google: So könnt ihr Chrome-Apps in native iOS- und Android-Apps umwandeln
Google: So könnt ihr Chrome-Apps in native iOS- und Android-Apps umwandeln

Google zeigt euch, wie ihr eure Chrome-Web-Apps mit Hilfe von Apache Cordova in native Android- oder iOS-Apps umwandelt. Die fertigen Apps können anschließend in Apples App Store beziehungsweise … » weiterlesen

AngularJS 2.0: So sieht die Zukunft des beliebten Javascript-Frameworks aus
AngularJS 2.0: So sieht die Zukunft des beliebten Javascript-Frameworks aus

Google arbeitet fleißig an Version 2.0 von AngularJS. Wir zeigen euch, wie die Zukunft des Open-Source-Frameworks aussehen wird. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 36 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen