Spreken is zilver, zwijgen is oud. Leesvoer van onze Tammo's.

Bij het e-business team van Tam Tam heb ik veel te maken met web applicaties. Dit keer werd mij gevraagd om voor een klant een mobiele web applicatie te ontwikkelen. Aangezien ik hier nog weinig tot geen ervaring mee had, ben ik eerst begonnen om een site te maken in HTML 5. Al gauw kwam ik tot de ontdekking dat de afbeeldingen en tekst niet scherp op een retina display (iPhone 4) getoond werden. Ik moest hier met een behoorlijk omweg omheen om dit goed te krijgen, dus ben ik wat onderzoek naar mobiele frameworks op het internet gaan doen.

Er zijn op dit moment aardig wat frameworks voor mobiel te verkrijgen: jQTouch, sencha, xui, sproutcore en jQuery Mobile. Waarom dan de keuze voor jQuery Mobile? De meeste frameworks vereisen extra kennis over het framework en is er weinig en/of slechte documentatie beschikbaar. jQuery Mobile is gemakkelijk te leren, omdat het gebouwd is op jQuery. De opbouw en syntax komt dan ook sterk overeen met jQuery. Het enige waarover je moet beschikken is wat basis kennis van HTML, javascript en jQuery. Wanneer je dit hebt is het eenvoudig om (snel) een volwaardige mobiele web applicatie ontwikkelen.

jQuery Mobile is samen gaan werken met de mensen van Adobe. Bij de CS5.5 release van Dreamweaver zijn er veel functies ingebouwd die het eenvoudig maken om mobiele web applicaties met jQuery Mobile te ontwikkelen. Dit zorgt voor een lage instapdrempel voor beginnende ontwikkelaars. Mede hierdoor denk ik dat jQuery Mobile zeer snel uit zal groeien tot de marktleider van mobiele frameworks.

Wat Is JQuery Mobile

Web-developers zullen vast wel weten wat een hel het is om cross-browser te ontwikkelen en je website er in elke browser goed uit te laten zien. Vroeger had je maar een paar browsers waar je voor moest ontwikkelen, maar nu met de opkomst van tablets en de steeds goedkopere smartphones is er een nieuw platform bij gekomen: Mobiel. Hier komt jQuery Mobile goed van pas.

jQuery Mobile is een licht framework dat een reeks van user-interface elementen en functies (voor zowel smartphones als tablets) bevat die je kunt gebruiken in de mobiele web applicatie.

User Interface elementen jQuery mobile – http://jquerymobile.com/designs/

jQuery Mobile maakt het makkelijk om user-interfaces te ontwikkelen voor een mobiele web applicatie. De opzet van de interface is markup gedreven. Dit betekent dat je de basis interface kan creëren in HTML, zonder een regel javascript te schijven. Javascript blijft natuurlijk wel nodig om je web applicatie iets nuttigs te laten doen.

Verder biedt jQuery Mobile een reeks custom events om je mobiele en touch specifieke acties te laten detecteren, zoals tap, tap-en-vasthouden, vegen (swipe) en de oriëntatie te veranderen (dat wil zeggen het draaien van het beeldscherm van het toestel).

Het maakt gebruik van progressive enhancement (HTML 5 en CSS3 ondersteuning) om er voor te zorgen dat de interface werkt op vrijwel elk web-enabled toestel. Ook maakt jQuery Mobile gebruik van kleuren thema’s, zodat je gemakkelijk de uitstraling van de applicatie kunt aanpassen.

Wat maakt jQuery mobile beter dan native apps

Cross-platform
Een native applicatie is  speciaal ontwikkeld voor een specifiek toestel of OS zoals iOS of Android. Jquery Mobile is een framework dat ontwikkeld is zodat het werkt op elk web-enabled toestel. Het heeft ondersteuning voor veel platformen: iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile, bada en Meego. Tevens heeft het ook ondersteuning voor WAI-ARIA voor screenreaders. Heb je een ouder toestel? Geen probleem: jQuery Mobile past zich aan de comptabiliteit van het toestel aan. Zie afbeelding Device support.

Device support jQuery mobile RC1

Een hoge kwaliteit
Een browser die in staat is om op zijn minst gebruik te maken van media queries (een vereiste voor jQuery Mobile).

B Medium Kwaliteit
Een browser die niet genoeg marktaandeel heeft tot het dag-tot-dag testen. Bug fixes zullen nog steeds worden toegepast om deze browsers te helpen.

C lage kwaliteit
Een browser die niet in staat is gebruik te maken van media queries. Ze zullen niet worden gevoed met jQuery Mobile of CSS (Valt terug tot eenvoudige HTML en eenvoudige CSS).

Actief
jQuery Mobile wordt continue verbeterd. Door de samenwerking met Adobe geeft het framework meer vertrouwen en komen er steeds meer updates en verbeteringen uit. Op dit moment is jQuery Mobile RC1 vrijgegeven en verwacht ik  binnenkort de eerste final versie online te zien.

Geen eigen taal
Voor ontwikkelaars met kennis van HTML, javascript en jQuery is jQuery Mobile makkelijk. Je hoeft geen specifieke kennis te hebben zoals bij het ontwikkelen van native apps.

Heeft JQuery Mobile Ook Nadelen?

Een voordeel van jQuery Mobile is dan ook het nadeel. De user-interface! De uitstraling van jQuery Mobile ziet er bijna net zo uit als de user-interface elementen van een native applicatie. Bij een native applicatie ben je gewend snel door de applicatie te navigeren, terwijl een web applicatie in de meeste gevallen de pagina waar je heen navigeert moet inladen. Dit duurt net even wat langer dan bij een native applicatie.

Een probleem op dit moment met mobiele web applicaties is dat je niet alle API’s kan gebruiken die je normaal wel kan gebruiken bij het ontwikkelen van een native applicatie. Bijvoorbeeld systeem notificaties. Er komen steeds meer API’s beschikbaar via plugins voor jquery Mobile, maar die zijn nog tot op heden nog niet concurrerend met de API’s voor native applicaties.

Verder merk ik uit ervaring dat jQuery Mobile op sommige toestellen wat traag reageert. Op dit moment is jQuery Mobile nog niet final en ga ik er vanuit dat het framework met de tijd steeds sneller en beter wordt.

Conclusie

Zoek je een manier of snel en mooi een web applicatie te ontwikkelen? jQuery Mobile is in mijn ogen het framework wat in de gaten gehouden moet worden. Het heeft tot nu toe op papier de meeste potentie t.o.v. de andere frameworks. Binnen ons e-business team heeft jQuery Mobile in ieder geval zijn waarde getoond.

jQuery Mobile is net uit de beta fase een RC1 geworden. Dit betekent dat de meeste bugs eruit zijn gehaald maar nog niet allemaal. jQuery Mobile wordt bij elke release weer wat stabieler. Het biedt op dit moment genoeg potentie om web applicaties mee te ontwikkelen en bied genoeg ruimte om zelf met HTML 5 en CSS3 aan de slag te gaan.

Om een goede indruk te krijgen, zou ik een kijkje nemen op de demo site van jQuery mobiel.

Handige Tips

iScroll4
In JQuery mobile is het mogelijk om fixed header en footers te gebruiken. Nadeel is dat tijden het scrollen de headers en footers verdwijnen. Als je een paar keer achter elkaar scrollt  dan flikkeren de header en footer nogal. Een goede oplossing hiervoor is iScroll4 te gebruiken. Dit is een jQuery plugin die goed te gebruiken is i.c.m. jQuery mobile en zorgt ervoor dat je headers en footers blijven staan.

Add to homescreen
Een handige plugin voor jQuery Mobile is de ‘add to homescreen’ plugin. Als je de applicatie wilt laten gebruiken als een applicatie vanuit het begin scherm op een iOS toestel, dan kan je met deze plugin een melding maken die er voor zorgt dat je een melding krijgt zodra ze in safari de web applicatie bekijken. De plugin beschikt over bijna elke taal, is plug & play en eventueel naar eigen wensen aan te passen.

Links

jQuery Mobile – http://jquerymobile.com/
iScroll 4 – http://cubiq.org/iscroll-4
Add to homescreen – http://cubiq.org/add-to-home-screen