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?
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.
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 percent 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 percent 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.
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 eyecatching projects with the potential to make it more convenient to build out the mobile web.
The small screen real estate of mobile devices places a premium on effective interface design. Enter Robert Biggs, a web developer 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
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.
Mobl gets rid of this complexity by employing a more declarative syntax. If you want to pause 1,000 milliseconds, you write:
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
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. 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 plugins 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.
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.
The behaviour 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.
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.
One 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.
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.
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.
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.
Jo and Sencha Touch
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 licence. 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.
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.
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.