13 essential programming tools for the mobile Web

When it comes to programming for mobile devices, choice quickly becomes dilemma. Do you target the lucrative iPhone market at the expense of Android's rising tide? Do you go native or write code to the mobile Web? And while a single stack of code that performs optimally on an increasingly wide array of platforms, form factors, and devices would be the dream, the reality is a fragmented trial in which rudimentary tasks can often be a challenge.

But with challenges and opportunity come curious minds. And the crop of developers turning their attention to building out mobile tools and libraries are quickly establishing a vibrant ecosystem to aid mobile developers -- especially those who've chosen to target the mobile Web.

[ Also on InfoWorld.com: Discover 4 ways to create smartphone Web apps without going through Apple's App Store. | Keep up on key application development insights with the Fatal Exception blog and Developer World newsletter. | Stay informed on mobile news and insights with the Mobile Edge blog and Mobilize newsletter. ]

For a time, this set was limited. But the promise of HTML5 has opened many developers' eyes to the mobile Web's myriad advantages over trying to install native software on the device.

First, websites are open. There is no need to play "mother may I" with the App Store approval team when the product is launched or updated.

Second, developers can reap 100% of their mobile app revenue. Of course, you have to find a way to collect the money yourself, which isn't always simple. But the 30% cut that Apple takes from app purchases is a steep tariff for what is largely a row in a database and a big bureaucracy.

Third, HTML5 is growing more robust and feature-rich. The latest version lets you store data on the client and do most of the things that a native app can do. In other words, the browser sandbox has almost all of the same features as the native code sandbox. And yes, the native code apps are kept in their own sealed corner of the operating system.

Fourth, HTML5 apps aren't device-bound. While much of the hype continues to orbit around Apple's iPhone, HTML5 apps are relatively easy to move to other platforms. It's not as simple as pushing a button, but it's much easier than translating your app from Objective C to Java.

There are limitations, of course. Web apps can fall prey to connectivity issues. They are often a bit slower, and many native app developers love to point out the millisecond delays that may or may not be noticeable. Game developers will want to think twice about relying on slick, super-responsive code in JavaScript.

The biggest limitation may be in the development itself. While Apple's tools are quite good for peering into the native apps, it's harder to dig deeply into the structure of the code running on your mobile browser. All of this interest in mobile development and the mobile Web has spawned a number of libraries and tools for easing the process of building applications with them. Here is a list of eye-catching projects with the potential to make it more convenient to build out the mobile Web.

Mobile Web programing tool: ChocolateChip-UI

Download ChocolateChip-UI

The small screen real estate of mobile devices places a premium on effective interface design. Enter Robert Biggs, a Web developer in Northern California who built the ChocolateChip-UI, a framework for whipping up a worthwhile mobile interface in HTML.

Technically, the underlying code created by the developer is WAML (Web Application Markup Language), a markup language built on top of HTML5. Most of the easy work is done with WAML tags like or . The framework's JavaScript works through the WAML and turns it into pure HMTL5 for the smartphone.

This combination is as light as a feather. You can mix in your own HTML, CSS, and JavaScript into the WAML, and it navigates the ChocolateChip-UI translation process just fine.

While this approach isn't perfect, I can understand why Biggs chose this route. I've been lost in the JavaScript closures of many mobile development tools before and it's not pretty.

ChocolateChip-UI's collection of WAML widgets is fairly comprehensive, all of which appear like the standard iPhone UIs. It even includes extras like deletion lists for enabling users to eliminate elements from a list with a few flicks of the finger.

Mobile Web programing tool: Mobl

Download Mobl

JavaScript has many rough edges that continue to chafe Web developers. The Mobl team decided to smooth these edges while building a framework for creating mobile applications that run in WebKit browsers. Instead of writing your instructions in HTML, JavaScript, and CSS, you write them in Mobl and the Mobl compiler turns them into HTML, JavaScript, and CSS for the mobile browser.

The approach enabled the Mobl team to fix some of the trickier issues of JavaScript, like how functions are passed to other functions for delayed execution. Keeping track of all of the nested parentheses necessary to do this in JavaScript can quickly become mind-numbing, increasing the likelihood of error.

Mobl gets rid of this complexity by employing a more declarative syntax. If you want to pause 1,000 milliseconds, you write:

sleep(1000); doNext();

Mobl compiles this into JavaScript with a setTimeout function and a callback function that will execute doNext(). As a developer, you don't have to think about the callback syntax or how to wrap everything up in yet another function. All you have to do is write a list of things you want to see happen.

There are dozens of ways the Mobl team helps you write these instructions without having to pay attention to all of the punctuation in JavaScript. The end result is a nice collection of the standard idioms of mobile apps. Want a scrolling list? Just wrap your list of items with the group keyword.

The developers who won't like this approach will be the ones already comfortable with Objective-C or JavaScript. After all, why learn yet another language with slightly different syntax when this slightly different syntax will only be turned back into something they already understand? Then again, language lovers might find a number of good, new ideas to make it worth the trip.

Mobile Web programing tool: jQuery Mobile

Download jQuery Mobile

When the folks behind the jQuery framework decided to tackle the mobile platforms and build a simple UI toolkit for smartphones, it was clear it would attract widespread attention and experimentation. The result is a project that's well supported by many of the major hardware manufacturers and is bound to be relatively successful on mobile devices.

The simplest part of jQuery Mobile is its HTML-centered layout. Pages are built in DIVs and other standard HTML components such as

1 2 Page
Now Read This: IT Resume Makeover: Our top 11 tips
View Comments
You Might Like
Join the discussion
Be the first to comment on this article. Our Commenting Policies