von Rolf Dohrmann / Web-App Entwickler
jQuery
Wer sich mit Webentwicklung beschäftigt, stolpert früher oder später über die JavaScript-Klassenbibliothek jQuery. Wikipedia schreibt über jQuery:
“Die jQuery-Basisbibliothek besteht aus einer einzigen JavaScript-Datei, in der alle grundlegenden DOM-, Ereignis-, Effekt- und Ajax-Funktionen enthalten sind.”
jQuery kann das Leben eines Webentwicklers in vieler Hinsicht vereinfachen. Egal, ob man DOM-Elemente hinzufügen, auf Ereignisse reagieren, moderne Effekte erzielen oder via AJAX Daten übermitteln will: jQuery kann helfen.
Einige Vorteile:
- Die Einbindung von jQuery ist sehr einfach.
- jQuery ist sehr kompakt = geringe Ladezeit.
- jQuery sollte mit den meisten Browsern funktionieren.
Ich würde sagen, es lohnt sich, da mal einen Blick drauf zu werfen.
jQuery Mobile
Dieser Beitrag allerdings beschäftigt sich mit jQuery Mobile. jQuery Mobile ist sozusagen ein Aufsatz für jQuery und hat das Ziel, die Entwicklung von Webapps zu vereinfachen. Warum muss die Entwicklung von Webapps vereinfacht werden? Ist das denn so kompliziert?
Webapps sind Apps, die in Browsern dargestellt werden. Letztendlich sind es einfach Websites. Es werden dieselben Basis-Techniken wie bei Websites verwendet: HTML, CSS und JavaScript. Was macht eine Website denn dann zu einer Webapp?
Navigationskonzept
Webapps werden speziell für die Nutzung auf Smartphones und Tablets konzipiert, also für mobile Endgeräte. Da man es bei diesen Geräten mit bedeutend kleineren Monitorgrößen als bei Desktop-Monitoren zu tun hat, ist ein anderes Navigationskonzept erforderlich. Dieses Navigationskonzept gibt es bereits. Wenn man sich Apps auf dem iPhone oder anderen Smartphones anschaut, dann wird man sehen, dass die Navigation ganz anders als bei Websites aufgebaut ist.
Wie sieht die Navigation bei einer Website aus? Natürlich gibt es ganz unterschiedlich aufgebaute Websites, aber zumeist hat man es mit einer horizontalen und/oder vertikalen Navigationsleiste zu tun, die ständig sichtbar ist. Egal, welche Seite ich mir anschaue, eine Art Hauptnavigation wird in der Regel immer sichtbar bleiben.
Dafür ist auf einem Smartphone nicht genug Platz. Darum ist das Konzept oftmals so, dass eine Liste mit Navigationseinträgen angezeigt wird. Man wählt einen Eintrag aus, die Liste verschwindet und man bekommt die ausgewählte Seite angezeigt.
Soweit, sogut. Aber wenn ich nun eine andere Seite sehen möchte? Da es auf der angezeigten Seite keine Navigation gibt, muss man sie zunächst wieder auf das Display zaubern. U.a. zu diesem Zweck hat eine App oder Webapp normalerweise eine Titelleiste, die auf jeder Seite zu sehen ist. Ein Bestandteil der Titelleiste ist der Back- oder Zurück-Button. Dieser Button lädt die zuvor angezeigte Seite, was in unserem Beispiel die Navigation war. Vor da aus geht’s dann weiter auf die nächste gewünschte Seite. Ich würde sagen, dass der Back-Button derzeit elementarer Bestandteil einer Webapp ist.
Die Titelleiste beinhaltet oftmals auch den Titel der aktuell angezeigten Seite (oder der Webapp) und es ist auch noch Platz für einen weiteren Button. Von der Anordnung her ist es so, dass der Backbutton linksbündig ausgerichtet ist, ein eventuell vorhandener weiterer Button rechtsbündig und der Titel ist zentriert.
Dieser Aufbau ist natürlich kein Zwang und kein ehernes Gesetz, aber nach meiner Kenntnis derzeit so etwas wie ein Quasi-Standard. Der User fühlt sich zu Hause, wenn er auf bereits bekannte Navigationskonzepte trifft. Er muss nicht lange suchen oder nachdenken, er weiß, wie das Ganze funktioniert und kann loslegen.
jQuery Mobile hat, wie oben ausgeführt, das Ziel, die Entwicklung von Webapps zu vereinfachen. Dies ist ein Beispiel für die Hilfe, die jQuery Mobile bietet. Das Erzeugen einer Titelleiste und der Navigationsliste ist etwas, über das man sich nicht mehr viel Gedanken machen muss, wenn man jQuery Mobile benutzt. Es funktioniert nahezu automatisch. Dann muss man darauf vertrauen, dass die Macher von jQuery Mobile ihre Software wirklich gut getestet haben und weiterhin testen werden (oder es selbst im Rahmen des Möglichen überprüfen). Denn wenn jQuery Mobile funktioniert, dann hat der Webapp-Entwickler sich viel Arbeit gespart. Es wäre ziemlich aufwändig und teuer, all die gängigen Smartphone-Typen vorrätig zu haben und einen selbst geschriebenen Code so lange anzupassen, bis er auf allen Geräten die gewünschten Resultate erzielt. Insofern kann das Entwickler-Leben mit jQuery Mobile bedeutend einfacher werden.
Cross-Browser Entwicklung
Viele andere JavaScript-Frameworks, die dem Entwickler bei der Erstellung von Webapps unterstützen wollen, konzentrieren sich mit ihren Frameworks auf das iPhone und auf Android-Geräte. Auf diesen sollte die Webapp dann vernünftig angezeigt werden. Das ist schon mal ein guter Anfang, aber es gibt ja bekanntlich auch noch ein paar andere Hersteller und Browser. Es ist sicherlich bestenfalls eine Zwischenlösung, wenn man sagen muss: tut uns leid, aber diese Webapp funktioniert auf Ihrem Smartphone nur, wenn es ein iPhone ist oder unter Android läuft.
Dies ist ein Punkt, in dem sich jQuery Mobile von den anderen Frameworks unterscheidet. Bei der Entwicklung von jQuery Mobile wurde von Anfang an Wert darauf gelegt, möglichst viele unterschiedliche Smartphones mit ihren verschiedenen Browsern einzubeziehen.
Hier ist eine Liste der Smartphones/Browser, die derzeit von jQuery Mobile unterstützt werden:
http://jquerymobile.com/gbs/
Stand der Dinge
Am 16. Oktober wurde die erste Alpha-Version von jQuery veröffentlicht (Vers. 1.0a1). Die Version ist noch buggy, aber man kann sich schon mal einen Eindruck verschaffen, wohin die Reise geht. Zum Teil habe ich dies bereits getan, zum Teil bin ich noch dabei. In den nächsten Beitägen zum Thema jQuery Mobile will ich anhand von Beispielen zeigen, wie man eine Webapp mit jQuery Mobile entwickeln kann und welche Möglichkeiten das Framework bietet.
Links
Happy coding,
Rolf Dohrmann
—
Web, App und Map Entwickler
Web, App and Map Developer
