Channels ▼
RSS

Mobile

Porting Javascript Applications to the iPhone

Source Code Accompanies This Article. Download It Now.


Better Browsing on Mobile

The partial port of the SR web page shows that it's not difficult to move a subset of a company's web-based applications onto the iPhone. I was able to locate and use an off-the-shelf framework and custom Javascript software to impart an iPhone look and feel to the SR web page. Would using an iPhone for SR reporting risk vendor lock-in? Not really, which brings us back to the point I made at the start of this article. Apple's iPhone has raised the bar on what's acceptable for a smartphone browser. Mobile users will demand that their browsers be fully capable of viewing the web—albeit painfully slow at times—and executing light-weight web applications. Over time, the performance of both the platform and Javascript will improve; thereby expanding what a mobile phone is capable of doing for us. It should come as no surprise that Apple's added SquirrelFish, a high-speed Javascript interpreter, to the WebKit rendering engine.

You can expect other smartphone vendors to improve the capabilities of their browsers as fast as they can. When that happens, then we'll run web apps on any phone that we choose. That's an outcome that will be good for all of us.

Steps to Writing an iPhone Web Page

1. Prototype and write the page's code on a standards-compliant desktop browser, such as FireFox 3 or Opera 9.x I prefer FireFox because then I can apply Aptana's Firebug to debug the Javascript. Note that for these two browsers that iUI's buttons don't render well, but it's good enough for code testing.

2. If you haven't already, modify the application's interfaces so that they don't use mouseover events.

3. Test and fix the page with the desktop version of Safari 3.x. The iUI buttons render fine on this browser. Clean up any quirks with events or side-effects to CSS selectors.

4. Do final test and revisions on the iPhone. Be prepared for another round of fixes for quirks and CSS side-effects. Also, you may have to tweak the interface for the small screen. Don't forget to re-orient the phone and verify that you haven't hard-coded the screen positions of any of the application's elements or controls!


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video