3 Frameworks für das mobile Web – Der Mobile Framework-Battle

Anlässlich meiner intensiven Beschäftigung mit mobiler Webentwicklung habe ich mich mal mit den bekanntesten Frameworks für mobiles Web auseinandergesetzt.

Der objektive Teil

Sencha jQuery Mobile jQTouch
Basis Ext.js jQuery jQuery
Größe
  • 200Kb JS
  • ca. 300kb CSS
  • 45Kb JS
  • 82Kb jQuery 1.5
  • 40Kb CSS
  • 35Kb JS
  • 82Kb jQuery 1.5
  • 23Kb CSS
Plattformen iPhone/iPad/iPod,
Android,
Blackberry 6
iPhone/iPad/iPod,
Android,
Symbian und viele mehr in definierten Abstufungen
“iPhone,
iPod Touch, and other forward-thinking devices”
Webseite www.sencha.com www.jquerymobile.com www.jqtouch.com

Im folgenden eine genauere Beschreibung der Frameworks:

Der subjektive Teil

Sencha Touch

Sencha Touch habe ich in den vergangengen 4 Wochen recht gut kennen gelernt und ich mag es nicht. Der Ansatz hier ist es nicht, eine mobile Webseite zu erstellen, sondern eine Web-App. Eine Webseite die aussieht wie eine iPhone-App. Und das ganze für 3 Plattformen: iPhone/iPad, Android, Blackberry 6 (demnächst…)

Entwicklung

Die Entwicklung mit Sencha ist auf 98% JavaScript, 1% HTML und 1% CSS aufgeteilt. Das ganze liegt daran, dass mit Sencha Touch, welches auf Ext.JS aufbaut, sehr objektfokussiert entwickelt wird, im Prinzip analog zu Ext.JS.

Leider muss man dabei jegliche Entwicklung dem Framework unterordnen (Datastores ist ein Stichwort…) oder wüste Workarounds und Hacks schreiben.

Dokumentation

Die Dokumentation von Sencha ist eine automatisch generierte aus der Dokumentation die in-code geführt wird. Leider ist die Qualität der Dokumentation etwas mies und inkonsistent So werden manche Texte gekürzt, man muss in den Quellcode gucken um die Beschreibung komplett zu lesen.

Code

Was soll ich sagen. 4 Wochen sind eine verdammt lange Zeit. Und Sencha ist verdammt inkonsistent. Ich kann via Ext.get( elementId ) oder Ext.select( CSS3-Selektor ) Elemente aus dem Dom wählen. Ein getValue() ist erfolgreich wenn das Element ein Input-Feld ist. Ein setDisabled( true ) funktioniert hingegen nicht. Interessant ist übrigens (wir gehen jetzt mal von “nativen” Sencha-Elementen aus), dass die “setDisabled()“-Funktion bei Buttons in 2 (verständlichere) Methoden .enable() und .disable() aufgeteilt ist. Vorliebe hin, Vorliebe her: Konsistenz fehlt hier völlig.

jQuery Mobile

Ich sage eins vorweg: Ich bin bekennender jQuery-Fan. Das hat sich auch anhand von jQuery-Mobile auch wieder bewahrheitet. Ext.JS hat unter Umständen zwar die Nase vorn was die Ausnutzung neuerer Technologie angeht, aber bei der breitflächigen Unterstützung vieler Browser hat jQuery Mobile eindeutig die Nase vorn.

Man arbeitet hier im einfachsten Fall mit 3 externen Sourcen: jQuery, jQuery Mobile und das zugehörige CSS. Der Rest erledigt sich im Prinzip von alleine, wenn man ein paar HTML5-Data-Attribute an die HTML-Elemente hängt. Eine Liste, die aus folgendem Code besteht:

<ul data-role="listview">
  <li><a href="#Linkwohin#">Linktext</a><li>
  <li><a href="#Linkwohin#">Linktext</a><li>
</ul>

wird automatisch in eine iPhone-ähnliche Liste verwandelt. Klickt man den Link an, wird der Inhalt einfach nach links aus dem Bild geschoben und die neue Seite wird nachgeschoben. Powerpoint-mäßig. Ihr wisst schon was ich meine…

Und im Gegenzug zu den Datastores von Sencha ist man hier mit “normalen” Ajax-Calls bedient, die eigentlich alles haben, was man so brauchen könnte. Und einen sehr flexibel agieren lassen.

Dokumentation

Auch bei jQuery Mobile ist die Dokumentation momentan sehr eingeschränkt, man hat sich für einen Verbindung aus Demo und Doku entschieden, was zulasten einer Entwicklungsgeschwindigkeit geht. Außerdem muss man einige Dinge direkt im Quellcode der Seite nachlesen. Das wird einem allerdings durch das (im Prinzip sehr gelungene) Ajax-Page-Loading sehr erschwert.

Schließlich will man nicht das generierte HTML sehen, sondern das, was für die Generierung gesorgt hat.

Code

Ich habe zur Erstellung eines rudimentären WP-Themes nicht eine Zeile Javascript-Code schreiben müssen (okay, eine, weil ich das Ajax-Loading mal ausschalten wollte). Ich halte mich hier erstmal dezent zurück. Ich habe auch nicht in den jQuery-Mobile Code reingeschaut, aber ich kenne jQuery eigentlich relativ gut, so dass ich da einfach mal Vertrauensvorschuss auf ein gepflegtes, konsistentes Framework gebe. Mag ungerecht sein, aber ich stehe dazu. Objektiv wäre meine Meinung ja eh nicht.

jQTouch

jQTouch ist ein Framework, welches auf jQuery basiert. Ziel ist hier, ein Interface für Webkit-Touch-Devices schaffen. Wie man in der Tabelle am Anfang sehen konnte, geht hier deutlich mehr Platz im CSS weg als im JavaScript. Der Grund: Animationen etc. werden fast ausschließlich mit CSS-Transitions gemacht.

Eigentlich ist das sehr sexy. Warum selbst programmieren, wenn man bereits bestehendes nutzen kann? Allerdings ist das ganze so hardcore-cutting-edge, dass selbst mein 10beta-Chrome da nicht mithalten kann. Auch mein recht aktuelles Desire HD steigt da aus.

Dokumentation

Nicht wirklich vorhanden. Ominöse Wiki-Seiten unter Github gibt es, aber dafür, dass das Framework angeblich “Beta 2″ ist, ist das in keinem Verhältnis.

Code

Ist ja nicht so viel JavaScript, sieht aber auf den ersten Blick aus nach Sencha Touch Config Objects, was angesichts der Tatsache dass es ein “Sencha Labs” Projekt ist, nicht wirklich verwundert. Mehr wollte ich davon auch nicht sehen.

Meine Schlussfolgerung

Je nach Anwendungszweck, würde ich mit Sencha Touch oder jQuery Mobile arbeiten. Dabei ist meines Erachtens mehreres zu beachten:

Sencha Toch bietet native-App-Feeling, aber nur für wenige Plattformen. Das DOM einer Sencha-App ist sehr schnell sehr groß. Das macht Android nur bedingt mit, und auch das iPhone habe ich ruckeln gesehen. Und generell: ein WEB-Framework mit 500Kb Größe?

In jedem anderen Fall, in dem Multiplattform wichtiger ist, als iPhone-Feeling: Finger weg von Sencha! Der Aufwand lohnt nicht. jQuery Mobile bringt in sehr kurzer Zeit eine mobile Webseite auf die Beine. Und bisher ist jQuery Mobile das einzige, welches selbst im Firefox problemlos funktioniert…


Flattr this

Weitere Frameworks

2 0 2

9 Kommentare Schreibe einen Kommentar

  1. Pingback: Vi-Zen auf einem Apfelrechner | campino2k

  2. Einen Punkt hast Du meiner Meinung nach ausser acht gelassen. Die Performance. Ich habe alle hier erwähnten Produkte auf meinem IPhone getestet (Mag sein dass das eingeschränkt ist aber egal). Daher hatte ich mich GANZ KLAR für Sencha Touch entschieden (obwohl ich mittlerweile beinahe am verzweifeln bin da du völlig recht hattest mit Datastores, grausigen Hacks etc…).

    Aber die Performance von Sencha Touch lässt alle anderen Frameworks weit hinter sich.

    • Die Ladezeiten von Sencha sind außerhalb des gleichen Netzes trotz Gzip und Co. echt Wahnsinn im Vergleich mit anderen, kleinen Frameworks. Da die Anwendung an der ich gearbeitet habe, viele Daten austauscht (auf einmal) und 6 Listen mit ~100 Einträgen, wovon jeweils 3 Listen von einer vorhergehenden abhängig sind. Darüber hinaus haben wir in der Anwendung 5 Tabs, wovon 2 deutlich mehr Panels enthalten.

      Performant war das am Ende nur sehr eingeschränkt. Die Demo-Apps, die Sencha im Kitchensink bereitstellt (O’Reilly und so) sind zwar nett und Performant, aber bei weitem nicht so umfangreich, wie das, was wir am Ende hatten.

      • Natürlich wird eine applikation langsamer wenn sie wächst, jedoch im Verhältnis eben angebracht. Ich denke nicht, dass andere Frameworks mit der Grösse schneller werden ;-) Nun was ich an Sencha Touch auch mag ist, dass ich mich nicht mehr um HTML kümmern muss (das Design ist gegeben) und wenn ich mal was ändern will ist dies auch nicht unmöglich.. Auch ich bin JQuery Fan als ich vor 2 Jahren damit begonnen habe zu arbeiten… aber wie bereits gesagt, Sencha überzeugt mit Ihrer Performance.

        Die tatsächliche Schwäche sind die Docs und die Bugs die dieses Framework noch besitzt. Aber für mich sind diese Dinge zwar ärgerlich, aber ich kann trotzdem zum Ziel kommen. Dann zählen nur noch Performance und Look and Feel.. und Sencha Touch gibt hier momentan den Ton an.

        Gruss

  3. Pingback: Website-Statistik 2011 | campino2k

  4. Pingback: VG Wort. | campino2k

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.


Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>