GWT Blog-Serie – GWT im Vergleich zu jQuery Mobile und Sencha Touch (3/4)

mgwt

Quelle: https://code.google.com/p/mgwt/

Wer gegenwärtig ein mobile App entwickelt, der sollte sich vor der Konzeption entscheiden, ob er die App nativ oder als Web-App implementieren will. Die Entscheidung hängt oft davon ab auf welchen Plattformen die App zugänglich sein soll.

Soll die App nur auf einer Plattform verfügbar sein, dann ist die beste Lösung fast immer, die App nativ zu Entwickeln. Soll sie auf mehreren Plattformen erscheinen, dann wird der Kostenfaktor meist zum treibenden Argument gegen eine plattformspezifische Entwicklung, auch wenn die Performance von Animationen und Benutzerinteraktionen nicht das Niveau von nativen Apps erreichen.

Kommen die Entscheidungsträger zu diesem Punkt, fällt die Entscheidung oft auf eine Web-App mit jQuery Mobile. Doch es gibt noch andere Frameworks auf dem Markt, welche mobile Optimierung anbieten. So zum Beispiel Sencha Touch oder MGWT.

Als Mobile-Entwickler bei Namics und während des Studiums habe ich meine Erfahrungen mit all den erwähnten Technologien gesammelt. Ich arbeitete an nativen Apps für iOS und Android sowie plattformunabhängigen Apps mit Sencha Touch, jQuery Mobile und GWT.

Im vorherigen Blogpost ging ich auf die Performance-Optimierung von GWT ein. In diesem Teil meiner Blog-Serie will ich diese drei Frameworks vergleichen und vertieft auf die Performance von MGWT eingehen.

MGWT – GWTs mobile Library

MGWT ist eine Open Source Library, womit sich mit GWT ganz einfach Web-Apps für mobile Geräte erstellen lassen.  http://www.m-gwt.com/

Touch Support

MGWT bietet Touch Support und Gesture Recognizer für Tap, LongTap, Multitap und Swipe.

Theming

MGWT stellt Pretender -Themes für iPhone, iPad, Android Phone, Android Tablet und Blackberry, sowie ein Theme für den Desktop bereit. Leider verfügt es weder über ein OS-Independent Theme noch über Windows Phone Unterstützung. Beides steht jedoch in der Pipeline.

Quelle: http://googlewebtoolkit.blogspot.ch/2012/07/gwt-support-for-mobile-app-development.html

Quelle: http://googlewebtoolkit.blogspot.ch/2012/07/gwt-support-for-mobile-app-development.html

Gwt-Phonegap

Gwt-Phonegap ist eine GWT-Library zum Wrappen der original PhoneGap-Library. Dadurch wird der Zugriff auf Geräte-Funktionen wie Accelerometer, Kamera. etc. ermöglicht. https://code.google.com/p/gwt-phonegap/

Performance im mobilen Umfeld

Im mobilen Umfeld spielt die Performance ein sehr wichtige Rolle. Der Benutzer ist es gewohnt, dass man bei einer Interaktion sofort eine Feedback vom Gerät erhält. Öffnet man eine App, so möchte man zum Beispiel nicht mehrere Sekunden lang warten bis die App gestartet wurde.

Startup Performance

Ich versuche anhand eines Test, welcher von Daniel Kurka im Mai 2012 vorgestellt wurde, exemplarisch aufzuzeigen, wie die Startup-Performance von GWT optimiert wird. Daniel Kurka ist Angestellter bei Google, Mitglied vom GWT Steering Committee sowie Urheber von MGWT. Er vergleicht in diesem Beispiel die Startup Performance von jQuery Mobile, Sencha Touch und GWT. zum Video

Beim Testsetting wird davon ausgegangen, dass der Benutzer der Web Anwendung über eine Internetverbindung mit 5s Latency und einer Downloadrate von 4KB pro Sekunde verfügt.

Beim der Startup-Performance spielt die Downloadzeit die Hauptrolle, da diese am meisten Zeit in Anspruch nimmt.

Startup-Routine

Startup-Routine

Vergleich jQuery-Mobile, Sencha-Touch und GWT

Vergleich zwischen jQuery Mobile, Sencha Touch und GWT

Vergleich zwischen jQuery Mobile, Sencha Touch und GWT

jQuery Mobile: 6 Dateien, Total 71 Sekunden
Sencha Touch: 5 Dateien, Total 232 Sekunden
GWT: 1 Datei, Total 64 Sekunden

Wie man sieht brauchen alle drei Frameworks für das Laden des Web-Apps extrem lang. Niemand will 64 Sekunden warten, bis das App startet – geschweige denn 4 Minuten…

GWT bietet out-of-the-box verschiedene Caching-Lösungen an. Wenn die Webseite ein zweites mal geladen wird, dann werden nur noch 7 KB Daten geladen. Danke des Cachings verringert sich die Ladezeit auf 7 Sekunden beim erwähnten Test-Setup (was immer noch sehr lang ist):

Cache-GWT

Mit Sencha Touch und jQuery Mobile ist dies auch Möglich. Jedoch nicht ohne Mehraufwand. Wenn die Dateien in einem App-Bundle gespeichert werden, entfällt der initiale Download.

Code Splitting

Ein weiteres Feature zur Reduzierung der Startup-Zeit heisst Code Splitting. Damit wird beim Aufstarten nur noch ein Teil der Web-App geladen und der Rest wird später nachgeladen, sobald der Benutzer es benötigt. Im Beispiel von Daniel Kurka werden initial nur 36 KB herunter geladen und der Benutzer erhält bereits die Möglichkeit zu interagieren. Im Hintergrund werden dann die restlichen 200kB nachgeladen.

Offline-Verfügbarkeit mit MGWT

Verwendet man MGWT, so wird das ganze App automatisch offline Verfügbar gemacht. Wurde das App ein erstes Mal geladen, dann werden alle notwendigen Dateien im Appcache gespeichert. Ein zweiter Start der App wird dann komplett aus dem lokalen Cache geladen.

Offline Cache

Offline Cache

Runtime-Performance mit MGWT

Fast Layout dank Markup, CSS und Animations

Bei der Konzeption von MGWT wurde stark darauf geachtet, dass die mobilen Browser ihre volle Leistung ausschöpfen können. Die Themes wurden alle mit dem Flexible Box Model gelayoutet und die Animationen werden mit CSS3 ausgeführt. Das hat den grossen Vorteil, dass kein JavaScript verwendet werden muss um das Layout anzupassen. Dank CSS3 werden die Animationen nicht auf dem CPU sondern auf dem GPU ausgeführt, was sich in besserer Performance und weniger Batterieausnutzung wiederspiegelt.

Do it yourself – Runtime-Performance Vergleich

Wer die Frameworks gerne vergleichen möchte, der kann die mobile Showcase der drei Frameworks auf seinem Smartphone aufrufen:

jQuery Mobile

Sencha Touch

MGWT

 

Ich habe die 3 Frameworks auf zwei Smartphones getestet:

iPhone 5
Hier schnitt GWT und Sencha Touch sehr gut ab. Bei einem Touch reagiert das Web-App ohne Verzögerung. jQuery Mobile hat mich in dieser Hinsicht sehr enttäuscht.

Google Nexus S
Auch auf diesem Gerät waren die Showcases von Sencha Touch und MGWT klar besser als jener von jQuery Mobile. Aber: MGWT lässt sich deutlich besser bedienen als Sencha Touch.  Der jQuery Mobile Showcase ist auf diesem Gerät schlichtweg unbrauchbar.

Fazit

Wenn man irgendwann mal in den Genuss kommen eine Plattformunabhängige Web-App zu konzipieren, dann sollte unbedingt GWT/MGWT in Betracht gezogen werden.

Im Bereich Performance schlägt MGWT das jQuery Mobile Framework ganz klar. Sencha Touch und MGWT halten sich bei aktuellen Geräten ungefähr die Waage. Um eine Sencha Touch Web-App zu entwickeln braucht es vertiefte Kenntnisse in JavaScript, welche bei MGWT nicht vorausgesetzt werden.

MGWT lohnt sich vor allem, wenn man ein Pretender-App bauen will. Pretender-Apps sind aber umstritten. Dem Benutzer wird eine native App vorgegaukelt, welche aber nicht nativ ist. Dies führt beim Benutzer zu Verwirrung, wenn die App sich nicht zu 100% wie eine native App verhält. Deshalb würde ich persönlich MGWT nicht zu 100% einsetzen, sondern nur die wichtigsten Features davon verwedenen und eine eigenes OS-Independent-Theme entwickeln.

Auch wenn man nicht alle Features von MGWT nutzen möchte, dann lohnt es sich zumindest einige Funktionen von MGWT ab zu schauen. Z.B. die Benutzung von Flexbox für das Layouten des Markups, Touch-Support und Gesture-Recognizer der MGWT-Library und die Verwendung von Appcache mit hilfe dynamischer Linker-Modulen.

Im letzten Teil meiner Blog-Serie über GWT werde ich noch auf die Vorteile für den Entwickler eingehen.

2 Gedanken zu “GWT Blog-Serie – GWT im Vergleich zu jQuery Mobile und Sencha Touch (3/4)

  1. Wir arbeiten sehr erfolgreich mit Sencha Touch und jQuery.
    Die beiden Frameworks haben allerdings unterschiedliche Ansätze: Während man mit jQuery Mobile bspw. die GUI mit HTML gestaltet, wird sie mit Sencha Touch via Javascript erzeugt.
    jQuery Mobile ist mMn für den klassischen Webdesigner bzw. -Entwickler leichter zu benutzen und zu erlernen. Sencha Touch ist schwerer, aber bietet schönerer GUI Elemente.
    Ich denke also, dass es schon Vorteile hat mit jQuery zu arbeiten, kommt wohl darauf an, was man vor hat.

  2. Unbestritten, dass man mit jQuery Mobile schnell entwickeln kann. Jedoch fehlt mir in jQuery eine klare Struktur, welche nachhaltige Wartbarkeit gewährleistet. Dort bietet Sencha Touch mit dem MVC-Pattern schon grosse Vorteile. GWT setzt auf das MVP-Pattern.
    Schlussendlich muss man aber auch den Output beachten – das was der User in die Finger kriegt – und dort hat jQuery Mobile gegenüber Sencha Touch und GWT keine Chance.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind 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=""> <s> <strike> <strong>