Kleines Update zu jQTouch, jQuery Mobile und künstlichem Scrolling

Wenn man derzeit eine iPhone-Webapplikation erstellen möchte, die sich so ähnlich wie eine native App anfühlen soll (Sweet Solution, wir erinnern uns…), stößt man unweigerlich auf drei brauchbare Frameworks, die einem einen Großteil der Arbeit abnehmen und fast schon automatisch sehr iOSige Interfaces auf den kleinen Screen zaubern: jQTouch, Sencha Touch und jQuery Mobile.

Derzeit wohl am spannendsten zu beobachten ist jQuery Mobile, weil hier der Anspruch gehegt wird, kompatibel zu allen möglichen mobilen Plattformen zu sein, die auf WebKit basieren (also alle ernstzunehmenden). Ich werde in meinem nächsten mobilen WebApp-Projekt, das ab Anfang nächsten Jahres ansteht, wahrscheinlich auf jQuery Mobile setzen – unter anderem habe ich ein gutes Gefühl, weil das Entwicklungsteam echte Geräte von den Herstellern gesponsert bekommt, um die geforderte Kompatibilität auch tatsächlich zu gewährleisten.

Abgesehen davon habe ich heute jedoch via Jens Grochtdreis eine sehr feine jQTouch-App entdeckt. Sie macht etwas sehr Selbstreferenzielles, bildet nämlich die jQuery-API ab. Eine Besonderheit ließ mich jedoch aufstutzen: diese App implementiert fixe Titelleisten und somit auch künstliches JavaScript-Swipe-Scrolling. Wie jeder weiß, unterstützt das iPhone aus konzeptionellen Gründen keine fixe Positionierung von HTML-Elementen, so dass man hier üble Tricks anwenden muss, wenn man scrollbare Bereiche und feste Titlebars haben möchten.

Diese Tricks sind nicht Bestandteil von jQTouch, doch der Macher der jQuery-API hat eine feine Implementierung als Erweiterung geschrieben, die er auch freundlicherweise bei github zur Verfügung stellt – sie heißt Scrollable und kümmert sich um performantes Scrolling über CSS3-Transitions, sowie die Erkennung der unterschiedlichen Swipe-Gesten per JavaScript

Glaubt mir, sowas möchte man nicht selber programmieren!

Die Sache fühlt sich natürlich nicht gänzlich nativ an, kommt aber nahe dran und ist eben schön integriert – klasse! Denn wenn mich bisher etwas gestört hat an jQTouch, dann ist es dieser hässliche »Sprung nach oben« vor der Slide-Animation, wenn man sich eine Navi-Ebene weiter bewegen wollte …

10 Kommentare

ti

Ich habe vor einem halben Jahr im Rahmen eines Studienprojekts was mit jQuery gemacht, auch mit »scrollable«: http://dm4hb.de/guide (bitte nur mit iOS öffnen…). Leider mussten wir scrollable auf einigen Seiten rausnehmen, weil es hässliche Nebenwirkungen mit eingebundenen Videos gab, die nicht hinter der Leiste verschwanden, sondern beim Scrollen sondern darüber blieben. Außerdem hatten wir mit den fixen leisten generell Probleme mit der Perfomance bei älteren iOS-Geräten.

Da ist viel potential drin, aber es scheint, als ob da seit einiger Zeit wenig passiert ist, was schade ist, da es doch teilweise noch recht buggy ist… vielleicht täusche ich mich da auch.

Sencha hatten wir und auch angeschaut, aber soweit ich mich erinnere scheint es scheint Overkill zu sein, wenn man nur eine Webpräsens und nicht Applikation erstellt.

Also liegt meine Hoffnung jetzt auch in jQuery Mobile, damit habe ich noch keine Erfahrungen.

Gerrit

Ich glaube auch, dass die Scrolling-Performance bei Sencha Touch zwar besser ist, aber man wird sich schwer tun, diesen Aspekt korrekt herauszupulen, evtl. auch rechtemäßig.

Philipp Bosch

Zwei andere Lösungen für das selbe Problem:
iScroll von Matteo Spinelli
TouchScroll von David Aurelio/uxebu

Beide mehr oder weniger brauchbar, jedes mit kleineren oder größeren Problemen.

Richtig vernünftig fühlt sich das ganze eben doch erst mit echten nativen Controls an. Das lässt sich allerdings auch mit PhoneGap und dem NativeControls-Plugin relativ einfach lösen.

erlehmann

Das mit der nicht-fixen Positionierung war mir bisher unbekannt. Gibt es einen erklärenden Link dazu?

Philipp Bosch

Oops, der iScroll-Link in meinem vorigen Kommentar ist falsch. Korrekt ist dieser.

Und das Problem der fehlenden Unterstützung für fix positionierte Elemente im Mobile Safari ist hier ganz gut geschildert.

Gerrit

iScroll sieht super aus! Man müsste wahrscheinlich vergleichen, welches Skript besser ist!

Tim

Nice, das kommt mit ja wie gerufen! Schaue ich mir nachher zu Hause an. Hätte gerne noch in die P8 reingeschaut, aber mein Zug ruft leider :/ Gruß auch an phlp!

Sebastian Fastner

Noch ein Tipp zum anschauen, wenn man Cross-Platform für Smartphones Apps schreiben möchte ist das Unify-Projekt . Es spielt auch in der SenachTouch-Liga und hat sogar noch ein wenig mehr den Hang zu Native-like Apps.

Gerrit

@Sebastian: Unify klingt ja toll und so, aber es gibt keine einfache interaktive Demo, sondern nur dieses (zugegebenermaßen nette) Video. Und installieren kann man das Ding auf dem eigenen server nur sehr schwer – das ist ja die Hölle mit den ganzen Dritt-Frameworks und was man da nicht alles zurechtbiegen muss… Ich hab’s nicht geschafft bisher!

Sebastian Fastner

@Gerrit: Sorry dafür, ich komm wegen meiner sontigen Projektarbeit leider nur sehr langsam dazu, meine Tutorials weiter zu schreiben. Grundsätzlich unterstützt Unify sowohl das Einstellen in die entsprechenden Stores (per Phonegap) als auch das Hosten auf dem Server.

Ich kann dir ja nochmal bescheid geben wenn die Tutorials und Doks einen vernünftigen Stand haben.

Kommentar verfassen