SLIDESHOW

12 Essential Programming Tools for the Mobile Web

HTML5 and a vibrant ecosystem of libraries are making the mobile Web a compelling alternative to developing native code.

12 Essential Programming Tools for the Mobile Web

When programming apps for mobile devices, choice becomes dilemma. Do you target the iPhone market at the expense of Android's rising tide? Do you go native or write code to the mobile Web? Sure, a single stack of code that performs optimally on a variety of platforms and form factors would be the dream, but the reality is a fragmented mobile market in which rudimentary programming tasks can be a challenge. Thankfully, a talented crop of developers are building worthwhile mobile tools and libraries to aid mobile developers -- especially those who are targeting the mobile Web. Here are a dozen eye-catching projects that ease the pain of developing apps for the mobile Web.

ChocolateChip-UI


Mobile devices place a premium on effective UI design. Enter Robert Biggs, developer of ChocolateChip-UI, a framework for whipping up a worthwhile mobile interface in HTML. Technically, the underlying code is WAML, a markup built on top of HTML5. Most of the work is done with WAML tags like or . The framework's JavaScript works through WAML, turning it into pure HMTL5. You can mix in your own HTML, CSS, and JavaScript into the WAML, and it navigates the ChocolateChip-UI translation process just fine. ChocolateChip-UI's collection of WAML widgets is fairly comprehensive, all of which appear like the standard iPhone UIs. Download ChocolateChip-UI

Mobl

JavaScript has many rough edges to chafe Web developers, so Mobl decided to help by building a framework for creating WebKit-based mobile apps. Instead of writing HTML, JavaScript, and CSS, you write your instructions in Mobl, and the Mobl compiler turns these into HTML, JavaScript, and CSS for the browser. The approach fixes some of the trickier issues of JavaScript, like how functions are passed to other functions for delayed execution. Mobl gets rid of this complexity by employing a more declarative syntax, and freeing you from paying attention to JavaScript punctuation. 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. 
Download Mobl

jQuery Mobile

The simplest part of jQuery Mobile is its HTML-centered layout. Pages are built in DIVs and other standard HTML components such as <LI> tags. As a result, jQuery Mobile is easy to integrate with dynamic websites and CMSes because making use of it is often just a matter of adding a new theme or skin. The tight integration with jQuery means that many but not all of the plug-ins for the desktop will also work with mobile websites. There are also a few mobile plug-ins built to extend the mobile framework. The light touch of the framework and the fertile ecosystem built around jQuery Mobile means we'll probably see its power only grow. 
Download jQuery Mobile

The-M-Project

The-M-Project offers a collection of widgets that are compiled down into jQuery Mobile objects. The code is structured with the MVC pattern. Much of the work is building a large JSON structure that defines the widgets that sit within your pages. The layout is handled by The-M-Project. App behavior is defined by creating functions attached to event hooks. The-M-Project ensures the events reach their location. It's worth noting that the build and deploy process is integrated with Node.js. When it works, you can carry the code and library to any Web server, or you can integrate it further with Node.js. 
Download The-M-Project

Touchqode


You're in a cafe in Paris, and an idea strikes you. Do you scribble it on a napkin and get back to it later? Not if you have Touchqode on your Android phone. This tiny development environment packs a ton of features into a tiny screen. Code is highlighted, scripts can run locally, and you can sync your new code via FTP. If the boss calls when you're out, you should no trouble fixing something that needs only a few keystrokes. Dowload Touchqode

LimeJS

DigitalFruit created LimeJS to help developers use the WebGL objects that are part of HTML5. The code is technically JavaScript, but the structure looks similar to C, with calls to the OpenGL library. 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. 
Download LimeJS

Zepto

The Zepto library won't lay out your widgets, or create widgets of any kind. The library helps 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.3KB, about a tenth the size of jQuery. The comparison to jQuery is apt because Zepto borrows much of the syntax without offering any of the features that require more sophisticated and heavy code. If you want those features, you can get a fatter library. 
Download Zepto

Jo

Jo is a collection of widgets that create card-oriented mobile apps in JavaScript. The structure is defined by a collection of JavaScript functions that create the widgets that are arranged by Jo 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. 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. Download Jo

Sencha Touch

Like Jo, Sencha Touch is used for creating card-oriented mobile apps in JavaScript. The library was built by Sencha, which also offers a framework for desktop Web pages. It sells support plans but does not charge for a license to use Sencha Touch. The company's dev team answers user questions and maintains an open support forum. Building apps with Sencha Touch is relatively easy, as the framework handles many of the layout decisions. 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. 
Download Sensa Touch

Jdrop

Jdrop is a Web resource tuned to help mobile developers marshal performance data between devices 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. 
More about Jdrop

jQTouch


jQTouch was one of the first great frameworks for mobile Web apps. 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. Building Web apps on top of jQTouch is as easy 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. 
Download jQTouch

PhoneGap

PhoneGap is a collection of routines that allows you to build native apps by writing HTML, JavaScript, and CSS. The concept is simple: The framework opens up a view that parses HTML. The goal is to arrange for the same code to work on all major smartphone platforms. With PhoneGap, it takes little time to transform a Web app into a native app for iPhone and Android, as it does all the work of popping up a window that acts like a Web browser. There can be little differences in how platforms display your code with PhoneGap, despite the fact that most use the same WebKit core. Either way, PhoneGap takes your Web app from relatively simple to relatively universal, relatively fast. 
Download PhoneGap