JavaScript iPhone Apps

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:

  1. Providing a tray icon for the application (to be used when the user saves it).
  2. 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.

Posted: November 18th, 2008

Subscribe for email updates

20 Comments (Show Comments)


Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.

Secrets of the JavaScript Ninja

Secrets of the JS Ninja

Secret techniques of top JavaScript programmers. Published by Manning.

Subscribe for email updates

John Resig Twitter Updates

@jeresig / Mastodon

Infrequent, short, updates and links.