I know HTML. Its on my CV. Expert level. I also know CSS and a whole bunch of JavaScript. I can even do TDD with JavaScript.
And on the iPhone there is this nifty object called UIWebView. Otherwise known as WebKit. Otherwise known as an embedded browser in your iPhone app.
And if you want a sexily awesome looking UI view, like the Today view of the Surf Report app (see right or free on AppStore) that was released on the AppStore recently, then the WebKit is just the best thing since the electric bread slicer for speed of development.
Holy grail of iPhone development?
Well, that’s what we thought. When I chatted with Dan Grigsby last week I mentioned there were good and bad things about the WebKit within an iPhone app.
This article is about good and bad things. The pros and cons. How we managed the integration of the two code-bases. And the answer to the big question: Would we do it again?
Its probably wonderfully useful stuff to know.
Negatives
So first the downsides. It would be remiss of me to fill you full of unbounded promises of easy non-Objective-C victories in your iPhone dev, and not tone them down with a full bucket of wet reality.
Its slow. When the WebKit is first loaded into memory, and we try to do this behind the scenes as soon as we get control of our app from the OS, it can take a good few seconds for your WebKit object to be available. You get notified of its readiness for action via the delegate:
- (void)webViewDidFinishLoad:(UIWebView *)webView
Its slow. You’re running an interpreter (JavaScript runtime) on top of a device with a small CPU and small memory. Go figure.
This reminds me of the fabulous “two minor drawbacks” scene from the 80s British sci-fi comedy Red Dwarf:
CAT: Why don't we drop the defensive shields? KRYTEN: A superlative suggestion, sir, with just two minor flaws. One, we don't have any defensive shields, and two, we don't have any defensive shields. Now I realise that, technically speaking, that's only one flaw but I thought it was such a big one it was worth mentioning twice.
The JavaScript bridge does not appear to block the main thread. This is a good/bad thing. You can invoke JavaScript code within the WebKit via your native Objective-C code.
[webview stringByEvaluatingJavaScriptFromString:@"loadData({some: 'data'})"];
It seems to return control back to your Objective-C code before it has finished executing, so you may need to poll the JavaScript runtime with `isFinished();` calls if you need to know when its complete.
Annoyingly, the Apple documentation for this method suggests otherwise:
JavaScript execution time is limited to 5 seconds for each top-level entry point. If your script executes for more than 5 seconds, Safari stops executing the script. This is likely to occur at a random place in your code, so unintended consequences may result. This limit is imposed because JavaScript execution may cause the main thread to block, so when scripts are running, the user is not able to interact with the webpage.
Quirky.
The JavaScript bridge is one directional. From Objective-C/UIKit you can invoke JavaScript upon the WebKit and henceforth do wonderful things (as per example above).
From JavaScript you have no native nor nice way to invoke methods on Objective-C objects, like you can in the Cocoa implementation of embedded WebKits. What you can do is use custom HTTP protocols, such as surfreport://, to give the OS a way for the webkit to communicate with your app.
We used this for ‘Related Photos’ buttons on some news and athlete’s pages. When you click a button in the webkit, it attempts to redirect to a surfreport:// url. The Objective-C code (your `UIApplicationDelegate`) is notified of this, hides the webkit, and displays the related photos using native UI elements. But we could do anything. Your `UIApplicationDelegate` needs to implement the follow method to receive these requests:
- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url
Alternately, you could use JavaScript to invoke this url, possible, via an Ajax call. Haven’t tried it. Might work. Either way, its a dirty hack, and a very annoying situation given that in Cocoa development there is a beautiful two-way bridge. I want that.
Multiple languages in one project. Whilst we mainly just wanted to take a static HTML file, and dynamically update various elements with application data (e.g. the surf and weather conditions in the example above), we needed to do that via JavaScript.
We came up with a consistent API loadData(json) for all pages, as discussed below; yet when something displayed incorrectly we now had an extra possible point of failure: JavaScript, Objective-C, and the original web service data source (e.g. the Surfline data for live updates).
To help isolate issues, we used JavaScript unit testing and a layer of “fixtures” or samples of JSON that might be sent from Objective-C to JavaScript. The tests passed against the fixtures; so if a QA error appeared in the app, we first checked the JSON being sent against the fixtures schema to isolate whether it was a JavaScript error or a data format error. It happened sufficiently often that its worth raising here.
WebKit for rapid prototyping
Nonetheless, the WebKit exists and it is awesome at rendering HTML and CSS, with access to the powerful CSS3 transformations and webkit-specific bonus features.
It is highly likely that your designer can make something beautiful looking in Photoshop and cut it up into HTML + CSS. Comparatively, its highly unlikely they can cut it up into native Objective-C code.
So in the initial phases of application development/prototyping, the WebKit is a sweet option to give the designer on your team direct, immediate access to building the app. If performance is an issue, you later replace it with native UI elements.
Code layout and samples
In our Xcode project, the structure we use for including HTML and associated assets into our apps is:
Classes/ - normal Objective-C .m/.h files Html/src - HTML, CSS, and JavaScript files including libraries like jQuery Html/test - JavaScript tests Html/test/fixtures - expected JSON formats to be sent from Objective-C to loadData methods

These aren’t Xcode Groups, rather normal filesystem folders. In the Xcode project, the Html/test files are not included nor bundled with the app. The files in Html/src are included in the “Copy Bundle Resources” of the Target (see image) and also linked into the project via a sub-group of “Resources”, so they can be easily accessed within the project.
But when I did the HTML/JavaScript development I worked from the command-line and TextMate, and lived entirely inside the Html/ folder.
For each static HTML page, such as the ‘Today’ view above, there will probably be the following files:
Html/src/today.html Html/src/today.css Html/src/today.js Html/src/jquery.min.js Html/test/unit/today_test.html
The WebKit will display today.html, which uses normal <link>/<script> to pull in the .css and .js assets. You can quickly see what the page will look like, even before integration into your app, by loading it into the iPhone Simulator (launch the simulator and drag the file in), or even Safari 3.
We settled on a standard API for the primary call from Objective-C into JavaScript: loadData(json). Bare-bones, this method starts off looking like:
// This function is called from Objective-C-land to apply
// the surf information to the HTML template
// +data+ is a hash of key -> value
function loadData(data) {
$('.data').html('N/A');
$('img.image_data').removeAttr('src');
// Assume that any data key can be copied into any HTML element with the same ID
for (var key in data) {
var value = data[key];
var value_exists = fieldExists(value);
var data_value = value_exists ? value : 'N/A';
var img_src_value = value_exists ? value : 'unknown';
$('#' + key).
filter('.data').html(data_value).end().
filter('.image_data').attr('src', key + '_' + img_src_value + '.png');
};
}
What it does is take a data hash like { surf_height_amount: '2-3', surf_height_unit: 'ft' } and HTML like:
<div id="surf_size"> <span class="data" id="surf_size_amount"></span> <span class="data" id="surf_size_unit"></span> </div>
And the loadData method updates it to:
<div id="surf_size"> <span class="data" id="surf_size_amount">2-3</span> <span class="data" id="surf_size_unit">ft</span> </div>
So we can build arbitrarily complex HTML templates. By allocating meaningful element IDs (surf_height_amount) and tagging the template elements with class="data" we have a simple mechanism for Objective-C to update the HTML. As the template gets more complex, then so too does the loadData method.
Would we do it again?
Yes.
The WebKit isn’t the holy grail for non-Objective-C developers, but if your grand-poobar level skills are in JavaScript and HTML, and your Objective-C/iPhone skills are still catching up, then its a wonderful prototyping platform. Especially for static, complicated displays of data. Especially if that data includes HTML content from an external feed which needs to be rendered.
For Oakley’s Surf Report app, Anthony is toying with replacing some of the WebKit usage with native UI elements (normal UITableView with custom UITableViewCells) so that we can get back those precious seconds and give them to the user as a Christmas present.


















