JavaScript

Develop for iPad with HTML5: Trial and Error

    Kevin Yank
    Share

    At Apple’s Worldwide Developer Conference (WWDC) last week, Apple CEO Steve Jobs told developers that it supported two development platforms for its various iDevices: the App Store, and web applications written with HTML5, CSS, and JavaScript.

    Though there are certainly practical limits on what may be achieved with web applications targeted for these devices, ambitious developers like Thomas Fuchs (of script.aculo.us fame) are pushing those limits to see what is possible.

    screenshot of the Every Time Zone app running on iPad

    In an illuminating blog post, Fuchs explains the various technical choices he was forced to make in order to achieve acceptable performance on Apple’s iPad when developing the gorgeous Every Time Zone application, which is optimized for the iPad:

    • Avoid images and CSS gradients, but painting gradients on HTML5 <canvas> tags is OK.
    • Avoid CSS shadows, which again means relying on <canvas> for glows and shadows.
    • Use CSS for animations, and keep them simple, since hardware acceleration goes away when things get complicated.
    • Use JavaScript touch events (e.g. ontouchmove), rather than onclick when they are available.
    • Avoid CSS opacity, which tends to disable hardware acceleration when you least expect it.
    • Roll your own JavaScript code, because current frameworks like jQuery are only optimized for desktop browsers.
    • Use 3D CSS animations, even when you only need 2D, because Mobile Safari only offers hardware acceleration for 3D translations.

    Reading between the lines, it seems clear that developing for Apple devices using web technologies is still very much a trial-and-error process. As mobile devices from Apple and others continue to evolve rapidly, the rules will change frequently over the next few years.

    If you want to play in this arena, you really need to know your code, which will enable you to attempt with confidence two or three different approaches to the same problem. If you are used to working with jQuery, for example, now might be a good time to take a course like JavaScript Live to get some experience writing your JavaScript from scratch.