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

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.

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

  • 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. There are, for instance, several Drupal themes and modules built around jQuery Mobile.

    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.

    Mobile Web programing tool: The-M-Project
    Download The-M-Project
    If jQuery Mobile’s collection of methods and styles aren’t sophisticated enough, The-M-Project offers a collection of widgets that are compiled down into jQuery Mobile objects. It handles many of the nitty-gritty design details, such as placing an icon in just the right spot, so you can instead focus on the bigger picture.

    The code is structured with the Model-View-Controller pattern. Much of the work is building a large JSON structure that defines the different pages and the widgets that sit within those pages. The layout is handled by The-M-Project.

    Mobile-Application-Programming

    The behavior of the app is defined by creating functions attached to various event hooks for each page. The-M-Project takes care of ensuring the events reach their location.

    It’s worth nothing that the build and deploy process is integrated with Node.js. The code for building your great creation also runs in Node.js; the testing is done using the same server. When it works, you can carry the mixture of code and library over to any Web server, or you can integrate it further with Node.js.

    Mobile Web programing tool: Touchqode
    Dowload Touchqode
    You’re sitting in a cafe in Paris, at the top of Mount Everest, or anywhere else without your laptop or desktop. An idea strikes you. Do you scribble it on a scrap of paper and get back to it later? Not if you have Touchqode running on your Android phone. (An iPhone version is coming soon.)

    This tiny development environment packs a surprisingly large number of features into a tiny screen. The code is highlighted, the scripts can run locally, and you can sync your new code via FTP. If the boss calls when you’re on the go, you should have little trouble fixing something that needs only a few keystrokes. I can’t imagine writing long programs with my Android phone, but given that authors have composed entire novels on their cellphones, it may be too soon to assume that users will only use Touchqode to create a few lines of occasional code.

    Either way, Touchqode is good in a pinch.