jQuery Mobile - Time for mobile web


jQuery Mobile is a new framework that allows web developers to write "native-like" applications that run on most modern mobile devices on the market. We use jQuery (the original) for almost every project we do on the web, but their new mobile framework is a huge breakthrough. What does it mean for the future of the web? To put it simply, it means we can rapidly develop a website for mobile phones that looks like a native app. But because it's a website instead of an actual app, that means it will work the same on the iPhone, Android, BlackBerry, Windows Mobile and more without having to rewrite the code for each device. Needless to say, we're pretty excited about it. Here are a few features from the jQuery Mobile website...

* Built on jQuery core for familiar and consistent jQuery syntax and minimal learning curve

* Compatible with all major mobile platforms - http://jquerymobile.com/gbs/

* Lightweight size (12k compressed for all mobile functionality) and minimal image dependencies for speed.

* HTML5 Markup-driven configuration of pages and behavior for fast development and minimal required scripting.

* Progressive enhancement approach brings core content and functionality to all mobile, tablet and deskstop platforms and a rich, installed application-like experience on newer mobile platforms.

* Accessibility features such as WAI-ARIA are also included to ensure that the pages work for screen readers (e.g. VoiceOver in iOS) and other assistive technologies.

* New events streamline the process of supporting touch, mouse, and cursor focus-based user input methods with a simple API.

* New plugins enhance native controls with touch-optimized, themable controls.

* Powerful theming framework and ThemeRoller application make highly-branded experiences easy to build.

Don't worry if you don't know what all these features mean -- they have a demo site. Visit it on your mobile device and see for yourself:


When I first visited their demo on my iPhone, iPad and Android G1, it surprised me how smooth it is and how it works the same way on each platform. I told myself I'd learn it as soon as I had some free time.


Last weekend while my baby son was asleep, I went through the jQuery Mobile documentation and tried to write a simple demo. Surprisingly, it only took 30 minutes to learn how to use all their features, and I was very impressed by how easy it was to make a small "native-like" app just using HTML and JavaScript. (It helps that I use jQuery all the time, but it's not at all a requirement to learn the mobile toolkit.)

You can write multiscreen apps using just one html file, or you can break it down into multiple pages. Either way, jQuery Mobile uses AJAX to smoothly load external html files and navigate between pages with iOS-like transition effects (slide, slideup, slidedown, pop, fade, flip).

After playing around, I'm very happy with what jQuery Mobile is doing -- very easy to use and powerful, and unique in that it runs the same way on my devices. The only limitation I found is that tab navigation is not fully supported yet -- still buggy and they are fixing it. I think it will solid by the time they release version 1 (it's in alpha 3 right now).

In addition, it may be possible to write local apps with this technology by writing an HTML5 application that is loaded into a simple browser window (so the "app" is nothing more than an instance of the browser). You could reuse the HTML files and simply rewrite the wrapper app for each type of device.


As a side note, for web developers who don't know Cocoa Touch or java, you can use Titanium and your existing skills (html, css, javascript) combined with jQuery Mobile to produce a beautiful app just in a few days. I will write another article about Titanium another day since I love to share my experiences with this software package. You can check out Titanium's WebView here: https://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.WebView-object.html

Here are some apps we wrote using Titanium on Apple App Store:





Ok, my son just started crying - I think he's hungry. See you in another article!

Duy Do
written by DUY DO

Duy Do is the Director of Online Development for Carbon8. Duy leads the Vietnam team and works closely with Jeff to bridge the gap between the U.S. and Vietnam teams. Duy has over eight years of experience leading development teams and is an expert in Flash development and rich Internet applications (RIAs).

When Duy is not at his computer, he enjoys the fresh air and walking along the beach with his beloved wife. He also takes trips on the ocean, fishing and diving with his friends.

share this