Writing iPhone apps using open-source software

Posted on 11 Jan 2010 at 10:50

Simon Brock takes a real-world look at open-source software for writing iPhone applications, and explains how to use it

When the iPhone first launched there were no third-party applications for it, which was hardly surprising – Apple needed time to create and document the infrastructure for developers. Instead there were “web apps”: websites targeted at the iPhone version of Safari, tailored to its small screen size and rotatable display.

Once Apple did open the iPhone to third-party native applications there was an app explosion, with more than 50,000 available barely a year after the iTunes app store opened. Some of these are truly innovative, making the best use of the platform, while others are barely worth the bandwidth to download them.

From the earliest web apps to the current native applications, there has been open-source software available to help build them. There are complete web app frameworks, native application libraries, and even complete iPhone applications. I’m going to take a look at how you could use some to write an iPhone app.

To some extent those early web apps – purpose-built websites targeted at Safari – have been superseded by proper native applications, but there’s currently a resurgence of interest for two reasons. First, the abilities of Safari web are now available for other phones, particularly Android-based handsets that share the WebKit browser platform. Second, there are now packages that allow a developer to embed such a web app inside a “real” application.

So how do you build a web app? If you’re really keen you become an Apple registered developer and look at its examples

So how do you build a web app? If you’re really keen you become an Apple registered developer and look at its examples – if you’re less keen you look at the toolkits available. All the toolkits I’ll mention here are similar in that they require you to create a website using their JavaScript and CSS libraries. Typically, you create a site as a collection of HTML DIVs containing unordered lists as navigation items. You don’t need to give much thought to the app’s appearance, since most of it is derived from the toolkit.

These toolkits require JavaScript, so you can extend the site’s navigation by making an initial page that shows ten blogs posts, with the 11th entry a link that loads a further ten, and so on. The web app need only show what’s required to get a user started, with extra content on demand.

One of the best and longest-running ones is the iUI framework, a JavaScript library plus CSS and images for developing iPhone web apps. This has been used in books and a number of iPhone websites. Recently, the package has been improved by incorporating some iPhone-dependent effects.

The iPhone version of Safari has certain special features designed to take advantage of the platform – in particular, various kinds of animation implemented via stylesheets. For example, an important user-interface feature is that whenever you select an element in a table, that table slides to the left and the next page slides in from the right.

The original version of iUI implemented this in a platform-agnostic manner using a JavaScript animation to move the positions of the two pages. While the process worked, it was slow and not like the real thing, so the most recent version of iUI implements the effect using Mobile Safari CSS stylesheet extensions, resulting in a faster, smoother effect.

Another similar library is iWebkit, which has a slightly richer set of navigation options but is slightly less developed. Two other web app frameworks I’d like to mention are Magic Framework and Jaipho. At first glance Magic Framework is similar to iUI and iWebkit, but it has one trick up its sleeve: it has a database built in.