jQuery Mobile — Webanwendungen für Touchscreen-Handys

Das mobile Web ist nicht mehr die Zukunft — es ist die Gegenwart. Laut unseren Statistiken greift bereits ein Drittel unserer Kunden über mobile Geräte auf Webanwendungen zu. jQuery Mobile verspricht eine einfache Möglichkeit, touchfreundliche Webanwendungen zu erstellen, die wie native Anwendungen aussehen und sich auch so verhalten. Nach einem Monat des Experimentierens teilen wir unsere Erkenntnisse.

Was ist jQuery Mobile¶

jQuery Mobile ist ein Framework, das auf jQuery und jQuery UI aufbaut und für die Erstellung mobiler Webanwendungen konzipiert ist. Im Gegensatz zu Media Queries, die ein bestehendes Desktop-Web an mobile Geräte anpassen, ist jQuery Mobile mobile-first entworfen — man beginnt mit der mobilen Version und der Inhalt ist von Anfang an für Touch-Bedienung optimiert.

Das Framework arbeitet nach dem Prinzip des Progressive Enhancement. Die Basis ist semantisches HTML mit Data-Attributen (data-role, data-theme, data-transition). jQuery Mobile erkennt die Fähigkeiten des Browsers und verbessert das HTML automatisch zu einer reichhaltigeren Benutzeroberfläche — Buttons erhalten Touch-Styles, Listen erhalten Interaktion, Seiten erhalten Übergänge. Auf älteren Handys mit eingeschränkten Browsern sieht man immer noch funktionalen (wenn auch weniger attraktiven) Inhalt.

Paginierung und Navigation¶

jQuery Mobile verwendet einen einzigartigen Ansatz zur Paginierung. Alle Seiten sind div-Elemente in einer einzelnen HTML-Datei (oder per AJAX geladen) mit data-role=”page”. Die Navigation zwischen Seiten ist ein animierter Übergang — slide, fade, pop — ohne vollständiges Neuladen der Seite. Die URL wird über Hash-Fragmente aktualisiert, sodass Verlauf und Zurück-Button funktionieren.

AJAX-Navigation hat ihre Vorteile — schnelle Übergänge, ein flüssiges Benutzererlebnis, die Möglichkeit, Seiten vorzuladen. Aber auch Nachteile — SEO ist problematisch (Suchmaschinen sehen AJAX-Inhalte nicht), Deep Linking erfordert zusätzliche Arbeit und das Debugging von AJAX-Navigation ist komplexer als bei traditionellen Links. Für unsere internen Anwendungen, bei denen SEO unwichtig ist, ist das kein Problem. Für öffentliche Websites empfehlen wir Vorsicht.

UI-Komponenten¶

jQuery Mobile bietet eine Reihe von UI-Komponenten, die für Touch-Bedienung angepasst sind. Listen (listview) mit eingebauter Suche, Buttons mit Icons und verschiedenen Styles, Formulare mit Touch-Widgets (Slider, Flip Switch, Checkbox als Toggle), Dialogboxen, Panels und Toolbars. Alle Komponenten sind über ein Swatch-System thematisierbar — fünf vorgefertigte Farbschemata (a–e), die kombiniert werden können.

Die Qualität der Komponenten ist für grundlegende Anwendungsfälle solide. Listview mit Suche ist großartig für ein Telefonbuch oder einen Produktkatalog. Formulare mit Touch-Widgets sind benutzerfreundlicher als Standard-HTML-Formulare auf dem Mobilgerät. Für komplexere Interaktionen — Drag and Drop, komplexe Tabellen, Diagramme — werden jedoch ergänzende Bibliotheken benötigt.

Theming und Design¶

ThemeRoller für jQuery Mobile ist ein Web-Tool zum Erstellen eigener Themes. Man stellt Farben, Schriften, Eckenrundungen und Schatten ein und lädt die fertige CSS-Datei herunter. Es ist eine schnelle Möglichkeit, das Erscheinungsbild einer Anwendung an das Unternehmensbranding anzupassen. Aber Vorsicht — alle jQuery Mobile-Anwendungen haben trotzdem diesen „jQuery Mobile Look”. Wenn man ein einzigartiges Design braucht, muss man viel CSS umschreiben.

Das ist einer der Hauptkritikpunkte — jQuery Mobile-Anwendungen sehen aus wie jQuery Mobile-Anwendungen. Sie haben nicht das native Look and Feel von iOS oder Android. Benutzer erkennen, dass sie nicht in einer nativen Anwendung sind. Für interne Enterprise-Anwendungen mag das akzeptabel sein; für Consumer-Anwendungen ist es oft ein Ausschlusskriterium.

Performance auf mobilen Geräten¶

Hier stoßen wir auf das größte Problem mit jQuery Mobile. Das Framework ist groß — jQuery Core plus jQuery Mobile CSS und JS sind zusammen über 200 KB minifizierter Code. Bei schnellem WiFi ist das kein Problem, aber im 3G-Netz kann das erste Laden mehrere Sekunden dauern. Zusätzlich ist die Framework-Initialisierung — DOM-Parsing, Element-Enhancement — CPU-intensiv und verursacht auf älteren Handys spürbare Verzögerungen.

Seitenübergangs-Animationen sind nicht auf allen Geräten flüssig. Auf dem iPhone 4 und neueren Android-Handys sieht es gut aus. Auf älteren Geräten ruckeln die Animationen und wirken unprofessionell. Wir empfehlen, auf dem schwächsten Gerät zu testen, das Ihre Benutzer verwenden werden, und Animationen bei Bedarf zu vereinfachen oder zu deaktivieren.

Optimierung erfordert Aufwand — Lazy Loading von Bildern, Minimierung von DOM-Operationen, Vorladen kritischer Seiten, ein Custom Build von jQuery Mobile mit nur den benötigten Modulen. Mit diesen Optimierungen ist das Ergebnis akzeptabel, aber der Standardzustand ohne Optimierung ist für komplexere Anwendungen zu langsam.

Vergleich mit nativer Entwicklung¶

Die Frage, die unsere Kunden am häufigsten stellen: Sollen wir eine native iOS/Android-Anwendung oder ein mobiles Web mit jQuery Mobile bauen? Die Antwort hängt vom Kontext ab. Native Apps haben bessere Performance, Zugriff auf Hardware-APIs (Kamera, Beschleunigungsmesser, Push-Benachrichtigungen), Offline-Fähigkeit und Verteilung über den App Store. Eine Webanwendung hat eine einzige Codebasis für alle Plattformen, sofortige Updates ohne App-Store-Genehmigung und niedrigere Entwicklungskosten.

Für interne Enterprise-Anwendungen — bei denen es nicht stört, dass die Anwendung nicht nativ aussieht, bei denen man keine Push-Benachrichtigungen braucht und bei denen man eine Version für alle Geräte möchte — ist jQuery Mobile eine gute Wahl. Für Consumer-Anwendungen, bei denen das Benutzererlebnis entscheidend ist und man mit nativen Apps konkurriert, empfehlen wir native Entwicklung oder zumindest einen PhoneGap-Wrapper.

PhoneGap — der hybride Ansatz¶

PhoneGap (jetzt auch Apache Cordova) ermöglicht das Verpacken einer Webanwendung in einen nativen Container. Das Ergebnis ist eine native Anwendung, die über den App Store vertrieben werden kann und intern eine WebView ausführt. jQuery Mobile plus PhoneGap gibt Zugriff auf native APIs (Kamera, Kontakte, Dateisystem) und die Möglichkeit, offline zu funktionieren. Andererseits ist die Performance weiterhin durch die WebView-Performance begrenzt.

Dieser hybride Ansatz kann ein vernünftiger Kompromiss sein. Man entwickelt eine einzige Webanwendung, verpackt sie für iOS und Android und erhält native Distribution. Aber man muss akzeptieren, dass das Benutzererlebnis nicht dem einer echten nativen Anwendung entspricht. Für manche Anwendungsfälle — interne Tools, einfache Utilities — reicht das. Für komplexe Anwendungen mit anspruchsvoller Grafik oder aufwendiger Interaktion nicht.

Alternativen zu jQuery Mobile¶

jQuery Mobile ist nicht das einzige mobile Framework. Sencha Touch bietet einen reichhaltigeren Komponentensatz und bessere Performance, erfordert aber mehr Erfahrung und verwendet ein eigenes Klassensystem statt jQuery. jQTouch ist eine leichtere Alternative mit Fokus auf iOS-Look. Zepto.js ist ein leichtgewichtiger jQuery-Ersatz, optimiert für mobile Browser. Und natürlich kann man Responsive Design mit Media Queries verwenden und auf ein mobiles Framework ganz verzichten.

Fazit¶

jQuery Mobile ist ein solides Framework für die schnelle Erstellung mobiler Webanwendungen. Für interne Enterprise-Anwendungsfälle — bei denen Entwicklungsgeschwindigkeit und eine einzige Codebasis zählen — ist es eine gute Wahl. Für Consumer-Anwendungen mit hohen UX-Anforderungen empfehlen wir, native Entwicklung in Betracht zu ziehen. Vergessen Sie nicht, auf echten Geräten zu testen und die Performance zu optimieren.