HTML5 and a vibrant ecosystem of libraries are making the mobile Web a compelling alternative to developing native code [Part 3]

PhoneGapOne of the reasons why Flash games are so compelling is because of the fertile ecosystem of library writers who can sell their work to Flash developers. DigitalFruit created LimeJS to offer similar support to developers who want to use the WebGL objects that are part of HTML5.

The early results of LimeJS are effective in WebKit browsers. The code is technically JavaScript, but the structure looks similar to good, old-fashioned C, with calls to the OpenGL library. It should be possible to automatically cross-compile some OpenGL to this library, although this will probably require some hand-tuning.

LimeJS offers are a few worthwhile features for simplify game development. There are scenes filled with layers and a director that will fire events according to a flexible schedule. There are animations and transitions that move the sprites across the pages. All of the features will be familiar to people who’ve written casual games before.

The development environment includes several modern touches. The basic building is handled in Python, and the final package can be bundled together with Google’s Closure Compiler so that it will download faster.

LimeJS will be attractive to anyone who’s spent time developing games for OpenGL frameworks in other environments. While the final syntax is JavaScript, it doesn’t rely on the more complex ideas that make JavaScript off-putting to some, at least until the Closure Compiler does its work.

Mobile Web programing tool: Jdrop
More about Jdrop
On its face, Jdrop appears to be a big pile of JSON that might be mistaken for an open NoSQL database. In practice, this Web resource is tuned to help mobile developers marshall performance data between the tiny screens and the desktop, where it can be better analyzed.

To ease the difficulty of extracting performance feedback from mobile devices, Jdrop offers Mobile Perf, a bookmarklet that aggregates a set of performance bookmarklets, including Firebug Lite, Page Resources, DOM Monster, SpriteMe, CSSess, and Zoompf. Through Mobile Perf, you can debug your app on a phone and automatically store the resulting data in the Jdrop cloud for later analysis from your desktop, providing an interesting way to debug true mobile performance and to examine the HTML source of your favorite mobile sites.

Mobile Web programing tool: XUI, Zepto
Download XUI
Download Zepto
Most of the frameworks described here exist to do the heavy lifting by turning a description of the application, often written in their own language, into something that looks pretty good on the page. XUI and Zepto are very different. They begin with the idea that HTML and CSS are already pretty good at displaying most of the things that one might want to display and only offer help creating and modifying the DOM.

These libraries won’t lay out your widgets or even create widgets of any kind. You get what HTML offers, then you control its appearance with CSS. The library is there to help you manipulate the DOM by offering features like the ability to find elements, attach classes, and juggle events.

The payoff is in size. The current version of Zepto weighs in at about 2,300 bytes, about one-tenth the size of jQuery. XUI is just a bit bigger. The comparison to jQuery is apt because both borrow much of the syntax without offering any of the features that require more sophisticated and heavy code. XUI, for instance, pulls out the code that would be required to be compatible with BlackBerry or IE Mobile. If you want them, you can get a fatter library.

Mobile Web programing tool: Jo and Sencha Touch
Download Jo
Download Sensa Touch
Jo and Sencha are two collections of widgets that create card-oriented mobile applications in JavaScript. The structure is defined by a collection of JavaScript functions that create the widgets that are arranged by the libraries to look good on the screen. The code for these often includes big, nested function calls that assemble the parts and then call other functions that assemble these parts into bigger parts.

Sencha Touch is built by a burgeoning company, Sencha, that also offers a framework for regular Web pages. It sells a collection of support plans but does not charge for a commercial license to use Sencha Touch. The company’s development team answers questions for users and maintains an open support forum.

Jo is an open source project delivered with the OpenBSD license. It is free to use, and Dave Balmer, Jo’s developer, runs support for those who need help.

I’ve built several Web applications with Sencha Touch and have found the process relatively easy because the framework handles many of the layout questions. In the best cases, I simply created a new widget object, and the Touch framework would squeeze it into to the page so that it looked nice. Some of the resulting apps worked well on both the iPad and the iPhone despite the different screen sizes.

Both Jo and Sencha Touch are producing more code than documentation right now. Each should be filling these gaps soon, but for the time being, Sencha’s commercial support offers the deeper documentation of the two.

Mobile Web programing tool: jQTouch
Download jQTouch
jQTouch was one of the first great frameworks for mobile Web applications. Its creator, David Kaneda, has since left the project to work for Sencha, but Jonathan Stark has taken the mantle and continues to add worthwhile tweaks to the code.

Applications in jQTouch are built by inserting HTML in DIVs. jQTouch parses these DIVs looking for the right classes, then inserts its own code for handling events.

I’ve built several Web applications on top of jQTouch and found it’s as simple as creating a Web page. It’s also a bit easier to integrate with dynamic Web tools like JSPs, PHP, and other server-based frameworks.

In the right situations, the code looks identical to native apps. But sometimes I’ve found odd glitches and weird transformations that don’t make sense. Some of the touch events are also a bit slow on certain platforms.

Mobile Web programing tool: PhoneGap
Download PhoneGap
Another of the biggest and most successful open source mobile frameworks is PhoneGap, a very simple collection of routines that allows you to build native apps for smartphones by writing HTML, JavaScript, and CSS. Many of the JavaScript frameworks described in this roundup are meant to be bundled with PhoneGap before being sent to the App Store.

The concept is simple: The framework opens up a view that parses HTML. On iOS, this is called UIWebView, but there are similar components in all of the major smartphone development stacks. The goal is to arrange for the same HTML, JavaScript, and CSS to work on all of the major platforms, like Android, iOS, BlackBerry, and WebOS.

I’ve built several applications and found that PhoneGap’s approach usually comes fairly close to working. It has taken me as little as an hour to transform a Web app into a native app for iPhone and Android. PhoneGap did all of the work of popping up a window that acts like a Web browser.

The idea isn’t perfect. I’ve found many little differences in how Android and the iPhone display the same HTML and CSS, despite the fact that Android and iOS supposedly use the same WebKit core. While I haven’t built any full BlackBerry or WebOS tools lately, I wouldn’t be surprised if there were many other little problems. Either way, PhoneGap can take your Web application from relatively simple to relatively universal, relatively fast.