Anzeige
Anzeige
UX & Design
Artikel merken

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

In technologischer Hinsicht haben native Apps klare Vorteile gegenüber Web-Apps. Doch die Frameworks für mobile Web-Applikationen werden immer besser und mit ihnen verschwimmen die Grenzen zwischen nativen und webbasierten Applikationen zunehmend. Im Folgenden eine Vorstellung interessanter Frameworks für mobile Web-Applikationen.

8 Min. Lesezeit
Anzeige
Anzeige

Ein Programm zu schreiben, das dann auf jeder beliebigen Plattform ohne weitere Anpassungen läuft, ist wohl der Traum eines jeden Software-Entwicklers. Denn die Vorteile plattformunabhängiger Software liegen auf der Hand: kürzere Entwicklungszeiten, weniger Aufwand, mehr potenzielle Kunden, leichtere Instandhaltung. Für Otto Normalverbraucher ist das aber völlig irrelevant. Für ihn zählt Performance, Funktionalität, Design und Usability. Ob also eine App nativ umgesetzt oder auf Web-Technologien basiert, ist dem Nutzer egal, solange sie sich in ansprechendem Design präsentiert, schnell und stabil läuft.

Anzeige
Anzeige

Zuletzt machten mobile Web-Anwendungen enorme Fortschritte und stehen heute zunehmend in direkter Konkurrenz mit in Objective-C (iOS) oder Java (Android und Blackberry) umgesetzten Applikationen. Web-Entwickler, die heute auf Basis von HTML5, CSS3 und JavaScript mobile Apps realisieren möchten, können auf reife und bewährte Frameworks zurückgreifen, die ein solides Fundament bieten und damit die Entwicklung beschleunigen können.

Dabei sind die Möglichkeiten und Lösungsansätze so unterschiedlich wie vielfältig. Von reinen Web-Apps, die klassisch über den mobilen Browser bereitgestellt werden, über hybride Lösungen, die das Beste aus zwei Welten versprechen, bis hin zu Anwendungen, die auf Basis von Web-Technologien realisiert, aber beim Deployment nativ kompiliert beziehungsweise übersetzt werden, ist so ziemlich alles möglich.

Anzeige
Anzeige

UI-Frameworks für den Einstieg

Wer einen leichten Einstieg in die Welt mobiler Web-Apps sucht und bestehende Web-Anwendungen mit möglichst wenig Aufwand fit für Smartphones und Tablets machen möchte, der findet bei einfachen UI-Frameworks wie „Jo HTML5”, „jQMobi”, „Wink Toolkit”, „Kendo UI Mobile” und „jQuery Mobile” einige interessante und leistungsstarke Alternativen. Bei diesen Bibliotheken liegt der Fokus auf der Erstellung mobiler UI-Clients, die speziell für kleine Touchscreens optimiert sind. Davon können vor allem Entwickler von Content-Apps profitieren, die hauptsächlich aus Formularen und Standard-UI-Komponenten bestehen.

Anzeige
Anzeige
Mit dem „ThemeRoller“ stellt jQuery Mobile einen grafischen Editor online bereit, mit dem Designer das komplette Look & Feel ihrer Apps leicht konfigurieren können.
Mit dem „ThemeRoller“ stellt jQuery Mobile einen grafischen Editor online bereit, mit dem Designer das komplette Look & Feel ihrer Apps leicht konfigurieren können.

Flexibles UI-Widget-System

Unter den genannten Frameworks ist jQuery Mobile [1] besonders beliebt, da es mobile Apps in einem einheitlichen, individuellen und konsistenten UI-Design auf sämtlichen mobilen Plattformen bereitstellt. Den Kern bildet dabei ein flexibles und stark modularisiertes UI-Widget-System, das aus üblichen UI-Komponenten wie Listen, Buttons, Tabellen, Toolbars und Ähnlichem besteht, die sich mittels CSS beliebig anpassen lassen. Zudem stellt jQuery Mobile eine Reihe nützlicher Funktionen und Werkzeuge für Event-Handling, die Manipulation von Daten, visuelle Effekte und diverse Animationen bereit, die die Realisierung ansprechender und reaktionsfähiger Anwendungsschnittstellen ermöglichen.

Wer eine Alternative zu jQuery Mobile sucht, wird bei jqMobi [2] vom HTML5-Spezialisten AppMobi aus den USA fündig. Dabei handelt es sich um ein weniger bekanntes JavaScript-Framework, das auf der beliebten jQuery-Bibliothek basiert und in etwa die gleichen Ziele verfolgt wie jQuery Mobile. Allerdings macht die Software einen nicht so reifen Eindruck. Damit dürfte das Tool eher etwas für Experimentierfreudige sein. In diese Kategorie fallen auch das Jo-HTML5-Framework [3] und das Wink Toolkit [4] der Dojo Foundation. Dabei handelt es sich um interessante und vielversprechende Lösungen, die aber dem Vergleich mit jQuery Mobile (noch) nicht wirklich standhalten können.

Anzeige
Anzeige

Natives Look & Feel auf jedem Gerät

Anders sieht es bei Kendo UI Mobile [5] aus. Das Tool der amerikanischen Softwareschmiede Telerik liefert professionelle Ergebnisse und bietet eine Softwarequalität, die auf dem gleichen Niveau von jQuery Mobile steht. Was die Kernfunktionalität angeht, verfolgt Kendo aber einen etwas anderen Ansatz als die jQuery-Lösung: Anstatt ein eigenes, markengerechtes App-Design zu erstellen, das auf jedem Endgerät gleich aussieht, arbeiten Web-Developer mit universellen, vorgefertigten UI-Widgets, die beim Deployment automatisch das native Look & Feel der jeweiligen Zielplattform einnehmen.

Mobile Web-Apps, die mit Kendo UI Mobile erstellt wurden, nehmen das Look & Feel der Zielplattform automatisch ein.
Mobile Web-Apps, die mit Kendo UI Mobile erstellt wurden, nehmen das Look & Feel der Zielplattform automatisch ein.

Das Konzept funktioniert bei den unterstützten Plattformen (iOS, Android und Blackberry), da alle drei ähnliche UI/UX-Paradigmen verfolgen. Außenseiter ist diesmal ausgerechnet Microsoft mit seinem neuen Metro UI. Die UI-Konzepte sind hier nämlich vollkommen anders als die, die Apple mit dem iPhone eingeführt hat. Ob Kendo UI Mobile mit Windows Phone jemals kompatibel sein wird, ist derzeit unklar, wie Todd Anglin, HTML5-Spezialist bei Telerik, kürzlich in einem Blogpost erklärte. Darüber hinaus ist Kendo – im Gegensatz zu jQuery Mobile – kostenpflichtig. Wer die Lösung bei kommerziellen Projekten einsetzen möchte, muss knapp 200 Dollar auf den Tisch legen.

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

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.

Anzeige
Anzeige

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.

Die umfangreiche Titanium-Plattform im Überblick.
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.

Anzeige
Anzeige

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 Apps 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 Frameworks.

Anzeige
Anzeige

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.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
3 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Jemand

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

Antworten
Holger Zimmermann

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
marcelbusch86

Interessante Liste! Wenn´s nativ sein darf und nicht umbeding ein Web-Baukasten sein muss, kann ich https://www.basecom.de/app-framework
empfehlen.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige