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
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.
jQuery Mobile
The simplest part of jQuery Mobile is its HTML-centred layout. Pages are built in DIVs and other standard HTML components. 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.
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 behaviour 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.
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.
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.
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.
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 licence. It is free to use, and Dave Balmer, Jo's developer, runs support for those who need help.
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 licence 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.
Jdrop
Jdrop is a web resource tuned to help mobile developers marshal performance data between devices and the desktop, where it can be better analysed. 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 favourite mobile sites.
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.
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.
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.
