jQuery Mobile in der Praxis

Die mobile Web-App solWinner

Web-Anwendungen, die auf mobilen Geräten, aber auch auf herkömmlichen Desktops laufen sollen, werden immer gefragter. solvistas hat zur Fußball WM 2014 die mobile Web-App "solWinner" entwickelt, die mittels eines statistischen Modells und eingegebenen Tipps des Benutzers einen persönlichen Weltmeister ermittelt. 

Für die Umsetzung wurde jQuery-Mobile verwendet, das ein einfaches Darstellen mobiler Inhalte und eine optimale Eingabe auf mobilen Geräten ermöglichen soll. In der Praxis stellte sich jedoch heraus, dass trotzdem noch einige Tricks nötig sind, um eine gut funktionierende Webanwendung erstellen zu können.

Plattformunabhängigkeit

Egal ob Samsung oder Blackberry, iOS oder Android, Windows Phone oder Desktop - jQuery Mobile versucht, alle möglichen Plattformen zu unterstützen. Dazu basiert jQuery Mobile auf dem HTML5 Standard, der inzwischen schon sehr weit entwickelt ist und im Herbst 2014 endgültig veröffentlicht wird. Auf Basis dieser Web Technologien ist es möglich, auch Anwendungen mit komplexen Berechnungen und Darstellungen zu entwerfen. Mobile Geräte unterstützen bereits seit längerem die meisten HTML5 Funktionalitäten, wodurch einem Einsatz dieser Technologie eigentlich nichts im Wege stehen sollte. Eine Installation der Anwendung wird nicht benötigt, sie wird direkt über eine bestehende Datenverbindung geladen und gestartet. Neue Programmversionen und Updates sind sofort verfügbar und müssen nicht gesondert installiert werden.

Responsive Design

Die Fragmentierung der Geräte ist bei der Entwicklung für mobile Geräte ein zentrales Problem. Es existieren sehr viele unterschiedliche Geräte mit unterschiedlichen Größen und unterschiedlichen Display-Eigenschaften wie Auflösung und Abmessung. Dadurch wird das Erstellen eines Anwendungsdesigns erschwert. Aus diesem Grund hat sich Responsive Design etabliert, welches genau dieses Problemfeld abdeckt. Responsive Design wird bei jQuery Mobile durch das Verwenden von unterschiedlichen CSS-Stylesheets ermöglicht. Die Anwendung erkennt die Display-Größe des verwendeten Gerätes und passt das Design automatisch an. Bei der Entwicklung der solWinner-App hat sich herausgestellt, dass dieses Feature nicht immer problemlos genutzt werden kann, speziell, wenn die mobilen Inhalte dynamisch generiert werden. Ein durchgängiges Responsive Design ist in diesem Fall nur durch händisches Programmieren in Javascript und jQuery möglich.

Swipe

Navigieren zwischen mehreren Seiten mittels Wischen über den Bildschirm ist auf mobilen Geräten eine gängige Praxis und wird von den BenutzerInnen erwartet. jQuery Mobile bietet hierzu Funktionen an, um das sogenannte Swipen in mobilen Web-Apps zu ermöglichen. Bei der Entwicklung stellte sich wiederum heraus, dass diese Funktionen nicht in allen Situationen funktionieren. Zum Beispiel erkennt jQuery Mobile einen Swipe nicht, wenn dieser über Eingabeelemente passiert. Durch Verwenden von geeigneten Plugins wie touchswipe.js kann jedoch auch dieses Problem gelöst werden.

Fazit

jQuery Mobile erleichtert die Erstellung plattformübergreifender mobiler Anwendungen sehr stark. Es ist nicht mehr nötig, für jede Plattform und Display-Größe eine gesonderte Anwendung zu erstellen. Dies wirkt sich positiv auf die Qualität der Anwendung, Geschwindigkeit der Entwicklung und nicht zuletzt drastisch auf die Kosten der Entwicklung aus. Es hat sich in einem Test gezeigt, dass die meisten gängigen Browser unterstützt werden. Probleme treten vor allem dann auf, wenn ältere Browserversionen - insbesondere ältere Internet Explorer Versionen auf Desktop PCs - verwendet werden. Die meisten Features funktionieren wie von jQuery Mobile angekündigt und beschrieben. Für fehlende Funktionalitäten stehen sehr viele Plugins zum Download bereit, welche zumeist frei erhältlich sind. Auch der Einstieg in jQuery Mobile gelingt dank der sehr umfangreichen Dokumentation verhältnismäßig leicht. Als größtes Problemfeld konnten wir die Geschwindigkeit der Anwendung ausmachen, welche im Vergleich zu nativen Anwendungen stark abfällt. Ein flüssiges Arbeiten ist bei vielen Anwendungstypen dennoch möglich.

Testen Sie solWinner auf www.solvistas.com/de/solwinner

Autoren: Andreas Feuerstein und Markus Hiesmair, Web- und Software Developer