JQTouch versus IUI version PastryKit

As part of spiking the abilities of a HTML/CSS/JS/Ruby on Rails driven mobile app, I’ve been spending a fair bit of time exploring the different mobile frameworks available to help speed up development.

The big three, as the title indicates, as IUI (the first mobile, primarily iPhone, dev package), JQTouch (based of a cut down / optimisied version of JQuery), and PastryKit (Apple’s completely undocumented package used for some of their help systems).

Each has a distinctly different flavour, and I had my concerns going in to using a framework at all. I’m a big fan of writing my own code, from scratch. That way, I know my code, and I like my personal coding style; I really dislike some coding styles, and find them just plain difficult and unproductive to work to.

JQTouch

JQTouch is by far the best presented of the pack. It has it’s animation code running on the JQuery library, and it rather lean, coming in at 3.5kb for the JS and a total of 3.4kb for the CSS (including both the primary styles, as well as running one of the supplied themes).

First time around, I was a little put off by its implementation; their example has JS code in the head, and their HTML structure is a little haphazard. But after a bit of a play (upon a second looking), it seems to make a fair bit of sense.

Of course, it does add a few lines to your head:

1
2
3
4
5
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript"> google.load("jquery", "1.3.2"); </script>

<script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>

<style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>

<style type="text/css" media="screen">@import "themes/jqt/theme.min.css";</style>

Only a few. And to be honest, its only realistically four (you’re probably already including JQuery). After you’ve included the files, there’s a small bit of JavaScript to begin the process, and you’re done.

Now to the interesting part. The structure is different to how you’ve probably coded before, but not necessarily bad. A little light, or incorrect perhaps, in places, but easy enough to pick up and run with. Essentially, JQTouch provides the ‘native’ looking animations from page to page. But, and here’s the clincher; it requires you to have any page that you have an animation to be in the same source code. Let me explain: a user comes onto your mobile site, and sees the home page (this is a div#home). They click a link to go to section one (a link with a href of #section1) and it does a fancy page flip (the anchor has a class of flip) and the next page is section one (oddly enough, div#section1).

It relies on anchors and naming to figure out what links to what. Not necessarily a bad thing, but perhaps a pitfall if you are relying on server-side response to occur (a form gets submitted, page refreshes won’t use the flip animation). In a nutshell, your code will look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="home" class="current">

  <div class="toolbar">

    <h1>jQTouch</h1>

  </div>



  <ul class="rounded">

    <li class="arrow"><a href="#section1">Section One</a></li>

    <li class="arrow"><a href="#section2">Section Two</a></li>

  </ul>



</div>



<div id="section1">

  <div class="toolbar">

    <h1>Section One</h1>

  </div>



  <ul class="rounded">

    <li class="arrow"><a href="#">Link</a></li>

  </ul>



</div>

It’s quite easy to work with. The visual styling is quite sharp, and you can change the theme (from the two ones provided) in a snap, as well as create your own.

The only downside is that you have to use exactly their HTML structure. Deviance from this means you page breaks, animations don’t work, and your app looks rubbish.

IUI

IUI is the oldest of the frameworks. I’ve never been a fan; their structure of code just grates me the wrong way.

It works in much the same way, has a lighter HTML structure, but in that lies the problem; it forces you to reduce your layout to a list. I like simple code; it’s just that not all the content should be displayed on a list. It just isn’t semantic. I want forms. I want content area.

1
2
3
4
5
6
7
8
9
10
11
12
13
<ul id="home" title="iUI Demos" selected="true">

  <li><a href="#about">About</a></li>

  <li><a href="#samples">Samples</a></li>

  <li><a href="#3rd-party">3rd Party Samples</a></li>

  <li><a href="#tests">Tests</a></li>

  <li><a href="#sandbox">Sandbox</a></li>

</ul>



<ul id="samples" title="Samples">

  <li><a target="_blank" href="samples/music/music.html">Music</a></li>

  <li><a target="_blank" href="samples/prefs.html">Prefs</a></li>

  <li><a target="_blank" href="samples/digg/index.html">Digg</a></li>

</ul>

It’s just not as slick as JQTouch. It feels clunky on the phone. It’s heavier than JQTouch (coming in at 18.9kb for the JS, and 11.8kb for the CSS). I’m sure people are using it, and using it well, but I cannot shake the feeling it’d be a bad match for me; I’d prefer a little complexity, so I have the freedom to work in the content I want.

PastryKit

PastryKit is Apple’s undocumented not-yet-released framework for making iPhone web layouts work like native. It’s very pretty, but this prettyness comes at a cost: there’s no docs, no help, and using it probably will get your app banned (Apple’s obscure denial rules, of course). To check it out, open http://help.apple.com/iphone/3/mobile/ on your iPhone. Any other browser gets detected, and blocked.

Have a read of Daring Fireball’s post. I had a play, but without a lot of time, nor the inclination to reverse engineer the HTML structure (it blocked me, even when I changed my user agent string), I’ll just wait until Apple reveal it to the public.