Article /
Computers /
Software
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.
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.
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
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
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:
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
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
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 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
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.
Mobile Web programing tool: LimeJS
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.
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
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.
WHATSAPP