iPhone Web Frameworks

When I see a new platform, I’m the kind of guy that looks for tools first thing.

Here’s a list of existing tools for iPhone web development… Sadly, many aren’t suitable for iPad web development (and I’m sure some would argue that some’re not even suitable for iPhone web development).

So – what I’m looking for in a framework:

  1. Small enough to be stored in the safari cache (<24kb)
  2. Provide native look and feel (I may not use it, but it’s always nice to have)
  3. Provide basic functionality for Ajax (I could write my own, but why not?)

Here’s a list of the frameworks I’ve found. I haven’t looked at most of them yet, I’ll update this page as I do.

  • iUI
  • A simple library designed to mimic native look and feel in iPhone web apps. Joe Hewett, the initial designer, has a blog post describing it in general terms. The focus on iPhone behavior means that it’s either going to have to be rewritten for iPad, or folks will just have to put up with a very blocky interface.

  • BaseJS
  • A small, focused library that provides mostly non-visual helper methods

  • PhoneGap
  • XUI
  • PastryKit
  • jQTouch
  • iWebkit
  • WebApp.net
  • UiUIKit
  • Apples provided Dashcode app builder (not a framework per se, of course)

Here’s a few useful links for learning HTML5:

Touch events on the iPad work like they do on the iPhone. You can attach event listeners two DOM elements and have listeners called when an event occurs. Apple has provides this resource which provides a nice example which I thought might be good to simplify.

Basically what you need to do is :

1) Attach a listener to an element

 <div id="_mcePaste">
   <div id="box" style="height:225px;width:225px;background:red;position:absolute"</div>

2) Do something when an event occurs

function touchStart( e ) {
 var box = document.getElementById("box");
 box.style.background = "green";
 return false;
function touchMove( e ) {
 var targetEvent =  e.touches.item(0);
 var box = document.getElementById("box");
 box.style.background = "yellow";
 box.style.left = targetEvent.clientX + "px";
 box.style.top= targetEvent.clientY + "px";
 return false;

It is important to have the  e.preventDefault(); in the  the event handler to prevent the event from being propagated to the browser and causing unwanted scrolling events.

I have created a full working example with source here. You will need an iPhone or iPad simulator to test this code.

iPad Inline HTML 5 Video

The beta 2 update of the iPhone 3.2 SDK now has a browser. For those that wonder about the video experience, it is much like you would have in a regular browser.

Video plays inline in a web page. The Google videos may be played in high definition, and the samples look great.

Google still has not made all it’s video available in HTML 5 but there are many samples to try.

As of the latest SDK release Quicktime videos now also play inline and you can also play them in horizontal full screen mode by simply rotating the iPad and clicking the full screen button.

iPad Inline Quicktime

iPad Full Screen

iPad Full Screen

Most folks certainly already know this one, but if you haven’t already, turn on debugging on Mobile Safari.

To do so, select:

Settings -> Safari -> Developer -> Debug Console (on)


iPad User Agent

For those interested here is the full user agent provided by the iPad simulator released yesterday.

navigator.userAgent = Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B320c Safari/531.21.10

Update: The User-Agent as of the 3.2 Beta 5 is “Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B360 Safari/531.21.10”.

iPad Browser

With the iPad, Web developers have a new platform to create a rich web experience with HTML 5. Having devoted my life to web applications, I’m excited to test the waters.
iPad Browser

Today the only way we can experience the iPad is through the iPhone 2.3 Beta SDK. I eagerly downloaded and installed the SDK and was sad to find no web browser in the emulator! I’m still new to iPhone app development so I looked around and found an Web Browser Tutorial on DBlog. I took it and with a few tweaks added a simple location bar and “Go” button as well as enabled the larger iPad sized format.

While I’m sure Safari will be in one of the future updates to the SDK, this application will work today. Find the iPad Browser on Github.

In the coming weeks we three amigos hope to blog more about the iPad, especially the web capabilities of the device. After just 3 days with the iPad emulator and this browser, I am hooked.