Checking out JQuery Mobile

JavaScript

In a seemingly short period of time, JavaScript has gone from a form-validation tool to a game changer.

Having my head buried into SDK development for a number of years, I have taken relatively small notice of JavaScript until this past 18 months.

It’s no longer just a scripting language for pulling off Web2.0 tricks but a mainstream language for building full-blown applications.

In the mobile world, one example of this is WebOS, which came onto the scene with an innovative and flexible user interface, driven by JavaScript, HTML and CSS.

While WebOS has a long way to go to prove that it is more than just a “drive-by operating system”, one thing is for sure, JavaScript is here for a good while.

And WebOS isn’t the only driver — there are other champions of JavaScript to note.

PhoneGap has become a player in the mobile app development scene as developers are leveraging their web skills to build mobile applications with an open source, royalty free framework.

And the folks at Appcelerator have some non-trivial venture funds behind them and have gone through a number of iterations all built around the JavaScript/HTML/CSS model.

While their approach has shifted a bit over time, they are committed to the rapid development capabilities that JavaScript can enable.

So, it would seem that web technologies have a prominent place in mobile as WebOS, PhoneGap and Appcelerator have each taken their own approach to bending web technologies to their mobile will.

But what about true web applications — where do they fit in?

While there are some techniques available for making a “normal” web page mobile friendly — things like setting view-port and scaling the page appropriately to make sure that the page renders nicely on a mobile device, the truth is that the WebKit browser engine, now standard in many major mobile platforms, renders content quite nicely, mobile-optimized or not.

So, if web content renders nicely on a mobile browser, do we care about building web apps “for mobile” at all?

Though the question alone is worthy of debate over a beverage of your choice, it is sometimes helpful to have a look at the market itself to find our answer. And we need not look any further than the folks at JQuery.com.

A Familiar Player

The JQuery project has brought advanced web functionality to the masses and they are now getting into mobile in a big way.

In fact, the impact of this mobile effort might make some think that the tail is wagging the dog here as the JQuery team is introducing JQuery Mobile.

The JQuery mobile effort is not only introducing new capabilities for mobile developers but the effort is causing the JQuery team to go back to their core library and revisit architectural and performance characteristics.

All of this is good news for developers, web users, and now mobile users also.

The JQuery Mobile project encompasses some major functionality and is currently at the Alpha 2 Release.

The balance of this article takes a look at some of the goals of this project and in upcoming articles we will demonstrate some of JQuery’s major features.

The basics

The JQuery team is targeting all major mobile browser options. Patterned after Yahoo’s browser grading system, JQuery Mobile aims to offer their complete array of functionality on “A” level browsers.

Most of the platforms in the list have native browsers capable of advanced functionality, however in some cases the better option is currently delivered by the Opera browser.

In case you are wondering just how many “major” mobile platforms exist today, here is the list of the primary targets world-wide:

• iPhone/iPod/iPad
• Symbian Series 60
• Symbian UIQ
• Symbian Platform (3.0)
• BlackBerry OS (primarily Torch and later)
• Android
• Windows Mobile (sort of)
• webOS
• bada
• Maemo
• MeeGo

A primary objective of JQuery Mobile is to create a library where truly cross-platform applications may be written, eliminating (OK, reducing) the need for platform-specific applications.

If they can deliver on this it will lower the barrier to entry for many software vendors struggling to bring their products to the mobile scene.

A viable UI framework based on web tools enables virtually every software vendor to access the mobile space.

Another winner in this trend is the tablet class of device as tablets look to play an increasingly important role in both the consumer and commercial spaces.

The availability of a clean, consistent web-based application presentation framework will only accelerate the penetration tablet devices enjoy.

So, what all does JQuery include? Lots. Here is a brief list of some features of JQuery mobile.

• Built on the core JQuery library
• Quick runtime download via a small footprint, similar to JQuery core
• Utilizes HTML5 based markup for simplifying the development process
• Relies upon progressive enhancement to deliver high quality features on capable browsers and degrade acceptably on lower-end browsers
• Built with screen readers and other accessibility features in mind from the outset
• Accepts diverse input devices — touch, mouse and cursor input methods
• Upgrades HTML Form elements with new, snazzy controls
• Customizable with powerful theming framework

One of the nicest features of developing mobile applications with JQuery Mobile is that you don’t need to do 100% of your testing on the small screen of a phone.

Because the mobile browsers are often built upon WebKit, developers can use Safari, the WebKit nightly build, or Chrome to proto-type applications. Of course, don’t ignore the mobile browser altogether!

I am increasingly finding myself testing web pages in Safari due to this high level of compatibility.

Speaking of testing, in our next article we will build a basic application, exercising a multi-page application, highlighting some of the UI elements included in the JQuery Mobile library.

Until then, you can read more about JQuery Mobile directly at http://jquerymobile.com.