So, recently I went to work on a small project; I built a micro Flickr interface as an iPhone web app for a weekend project. I used the jQTouch javascript framework along with Sinatra to build it. If you read the O’Reilly file on iPhone web app development, jQTouch looks pretty good. I ran into some major show-stopping bugs pretty quickly, though.

For example, here is their basic template code:

<div id='home'> 
  <div class='toolbar'> 
    <h1>Home</h1> 
  </div> 
  <ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li> 
      About 
    </li> 
  </ul> 
</div> 
<div id='about'> 
  <div class='toolbar'> 
    Back 
    <h1>About</h1> 
  </div> 
  <ul> 
    <li>About 1</li> 
    <li>About 2</li> 
  </ul> 
</div>

That works fine; it matched jQTouch’s template system and creates a beautiful interface with nesting and back buttons and everything. Now, let’s say I want to add a little style, or maybe have some content not in a list on the home screen. In that case, you’d want to add a container, like so:

<div id='home'> 
  <div class='toolbar'> 
    <h1>Home</h1> 
  </div> 
  <div> 
    <ul> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li> 
        About 
      </li> 
    </ul> 
  </div> 
</div> 
<div id='about'> 
  <div class='toolbar'> 
    Back 
    <h1>About</h1> 
  </div> 
  <ul> 
    <li>About 1</li> 
    <li>About 2</li> 
  </ul> 
</div>

Boom! Too late, already broken. Navigation no longer works. When you click that “About” link, which normally takes you to the about screen (denoted by the #about div), you instead get an error where the application continually tries to go ‘back’ but there are no pages in the global history hash.

God help you if you want to register click or tap handlers. Basically, I ended up implementing all the navigation by hand, and because of that it’s buggy. Next time, I’ll do more research on mobile js frameworks - maybe go with iUI or jQueryMobile.