I’ve been watching, with interest, developers create new applications for the iPhone. Owning one myself – and being knowledgeable in JavaScript – I’ve been wondering what options there were for creating downloadable JavaScript applications or the iPhone. In doing some research I found a number of solutions, some simpler than others, some requiring more knowledge of Objective-C than others.

Before looking at the options I should note that given the requirements of the platform if you’re really serious about getting in to iPhone development you should learn Objective-C. None of the options appear to provide the full range of functionality that a normally-written application would.

JiggyApp

This was an early entry to the JavaScript iPhone application market – arriving back in 2007. It requires a Jailbroken iPhone (likely running version 1.1 of the Operating System).

JiggyApp provides a full API for developing an application – apparently separate from most of the typical APIs. Arguably, though, the code ends up being relatively usable.

Plugins.load( "UIKit" ); var window = new UIWindow( UIHardware.fullScreenApplicationContentRect ); window.setHidden( false ); window.orderFront(); window.makeKey(); window.backgroundColor = [ 0.8 , 0 , 0, 1 ]; var mainView = new UIScroller(); mainView.contentSize = [ window.bounds[ 2 ] * 2 , window.bounds[ 3 ] * 2 ]; mainView.backgroundColor = [ 0 , 0 , 0 , 0 ]; window.setContentView( mainView ); var hello = new UITextLabel( [ 20 , 20 , window.bounds[ 2 ] - 40 , 100 ] ); hello.text = "Hello World!"; hello.backgroundColor = [ 0 , 0 , 0 , 0.25 ]; hello.setFont( new Font( "Trebuchet MS" , 2 , 46 ) ); hello.color = [ 1 , 1 , 1 , 1 ]; hello.centersHorizontally = true; mainView.addSubview( hello );

The above snippet was from the Getting Started with Jiggy page.

JSCocoa

JSCocoa is a full bridge that maps Cocoa development into JavaScript (instead of the typical Objective-C/Cocoa mapping). The result ends up working in both OS X and on the iPhone.

It’s a pretty-clear port of Objective-C style and mannerisms but with a JavaScript syntax. Note some of the differences:

Objective-C/Cocoa:

[[NSButton alloc] initWithFrame:NSMakeRect(0, 0, 100, 40)];

JSCocoa:

NSButton.instance({ withFrame:NSMakeRect(0, 0, 100, 40) })

Right now it seems like JSCocoa is more usable for developing OS X applications but the progress moving forward is certainly promising.

“Applications” in MobileSafari

While it’s not, technically, a true iPhone application one option is to adapt your existing web applications to be used in a more application-centric manner.

Apple provides a number of tips for improving the style of your web application. The most important points of which are:

Providing a tray icon for the application (to be used when the user saves it). Providing a full-screen view of the application (with no MobileSafari toolbars showing).

This will give the full appearance of a regular iPhone application (after using some more styling and setup from iui, or similar).

PhoneGap

The next step to making your iPhone web application more native-like is to tap into some of the underlying native APIs. One recent release that will help is that of PhoneGap.

PhoneGap is an application that exposes a few JavaScript APIs to pages running MobileSafari. Right now this includes Geolocation and access to the Accelerometer.

Geolocation:

getLocation(); function gotLocation(lat,lon){ document.body.innerHTML = "latitude: " + lat + " longitude: " + lon; }

Accelerometer:

function updateAccel(){ document.body.innerHTML = "accel: " + accelX + " " + accelY + " " + accelZ; setTimeout(updateAccel, 100); }

They’re also working on access to the camera, sound, and vibration tools of the phone.

WebTouch

The other day “Dr Nic” wrote up an article on how he had used a WebKit instance (along with HTML, CSS, and JavaScript) to render a portion of his iPhone application.

I contacted him about the project and wondered if he’d be willing to provide some of the code that backs it. Written up by his co-worker at Mocra, Anthony Mittaz, the result is called WebTouch.

Right now it’s just a zip file of sample code but hopefully it’ll be expanded at some point.

It’s really simple and gives you a good entry point into the world of hybrid HTML/CSS/JavaScript/Objective-C/Cocoa development. If you’ve been interested in Objective-C this might make for a good starting point, as well.

Bonus

While this isn’t something that you can actually use, I think it’s pretty cool. This guy ported my Processing.js work to the iPhone, writing his own Canvas implementation using OpenGL ES hooking in to SpiderMonkey.

There are a lot of options available for the discerning JavaScript developer – the most promising of which is, I think, WebTouch. It’s pretty obvious that in order to be able to build the best possible iPhone application you would have to know Objective-C. Having a clear path, paved with JavaScript, to that end result should be any JavaScript developer’s goal.